Hello world + 화면 레이아웃(개발자 도구)

1. 핵심내용

main.dart 파일에서 기본 Hello world를 화면에 보여주는 구조이다.

 

위젯형식으로 화면을 꾸며가는 것으로 보면 된다. 클래스 밑에 클래스 ... 이런 식으로

import 'package:flutter/material.dart';

void main() {

  runApp(App());

}

class App extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Center(

            child: Text("Hello flutter!"),

          ),

        ),

        body: Center(

          child: Text("Hello world!"),

        ),

      ),

    );

  }

}

 

아래는 결과물

 

2. 핵심내용

 

RN에서 화면 레이아웃은 주로 flex를 많이 사용했다. 하지만 flutter같은 경우에는 순서대로 하나씩 하는 느낌으로 상당히 직관적이다. 그리고 또한 레이아웃 시 도움이 될만한 개발자 도구가 상당히 잘 되어있는 편이다. 위젯들을 다 외울필요 없이 아래 코드 흐름을 이해하면 충분히 나중에 혼자 만들 수 있을 것 같다.

 

 

<코드>

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF181818),
        body: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 40,
          ),
          child: Column(
            children: [
              SizedBox(
                height: 80,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        'Hey, Selena',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 28,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                      Text(
                        'Welcome back',
                        style: TextStyle(
                          color: Color.fromRGBO(255, 255, 255, 0.8),
                          fontSize: 18,
                        ),
                      ),
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

<결과물>