Flutter 03

헤더 작성

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF181818),
        // HexCode로 색을 지정할 수 있다.
        // RGB, RGBO 등도 있다.
        body: Padding( // 안쪽 여백을 줄 수 있다.
          padding: EdgeInsets.symmetric(horizontal: 40),
          // all은 상하좌우 모든 곳에 10의 간격을 준다.
          // only는 한 곳에 10의 간격을 준다.
          // symmetric은 수직, 수평 중 10의 간격을 준다.
          child: Column( // 세로로 위젯을 쌓는다. CSS flex의 flex-direction을 column으로 주는 느낌.
            children: [
              SizedBox( // 자리를 차지하는 공간을 만들어 준다.
                height: 80,
              ),
              Row( // 가로로 위젯을 쌓는다. CSS flex의 기본 값 느낌이 든다.
                mainAxisAlignment: MainAxisAlignment.end,
                // Row의 MainAxis은 수평이다.
                // cross는 수직이 된다.
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    // 수평이 된다.
                    children: [
                      Text(
                        'Hello, Flutter',
                        style: TextStyle( // 텍스트의 스타일을 지정해줄 수 있다.
                          color: Colors.white,
                          fontSize: 28, // 크기
                          fontWeight: FontWeight.w800, // 두께
                        ),
                      ),
                      Text(
                        'Welcome',
                        style: TextStyle(
                          color: Colors.white38, // withOpacity는 왜 안 될까.
                          fontSize: 18,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

현재는 컴파일러가 파란 선을 표시해 주는데
Ctrl+Shift+p를 누른 후 open user settings에서 JSON 파일을 연 뒤
아래와 같이 수정하면, const가 필요한 부분에 저장할 때마다 생성해 준다.

{
// ...
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
// ...
    "dart.previewFlutterUiGuides": true, // 자식의 부모가 어떤 것인지 선으로 나타내준다.
}