flutter, Hello World

언제나 처음은 Hello World다.

 

Hello World를 화면에 적기 위한 코드는 아래와 같다.

(출처: flutter.dev/docs/development/ui/widgets-intro)

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

결과

flutter hello world 실행 결과

클래스를 나누면 아래와 같다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body:Text(
          'Hello World',
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

다시 쪼갤 수 있다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Text(
        'Hello World',
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

 

실행 화면

flutter hello world 실행 결과