Header

delete app bar

vscode 에서 Scaffold 에 마우스를 올려보면
PreferredSizeWidget? appBar, 로 appBar 는 옵셔널 하다는 것을 알 수 있다
삭제를 하게되면 상단에 고정되어있던 appBar 가 사라지면서
화면 전체에 대한 스타일만을 변경할 수 있게 된다

backgroundColor: Colors. 까지 누르면 여러 색상을 볼 수 있다

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red.shade200, // shade는 투명도
        body: const Center(
          child: Text('hello world'),
        ),
      ),
    );
  }
}

Column, Row

화면을 세로 분할 (수직) 하기 위해서 Column 객체를 사용한다
children 으로 자식 배열을 받는다
Row 객체는 가로 분할 (수평)
Row 객체도 children 으로 자식 배열을 받는다
배열 마지막 인자는 콤마를 써주면 보기 쉽게 줄바꿈이 된다

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.black,
          body: Column(
            children: [
              Row(
                children: [
                  Column(
                    children: [
                      Text(
                        'Hey, Siri',
                        style: TextStyle(color: Colors.white),
                      ),
                      Text('Welcom back'),
                    ],
                  )
                ],
              )
            ],
          )),
    );
  }
}

플러터는 코드가 참 쉽지 않다.. 괜찮을까..?

Text 객체의 style 속성에서 TextStyle 객체를 불러와서 color 속성을 추가..
SizedBox 객체는 html 의 div 같은 느낌이다

Row 객체의 MainAxisAlignment 는 수평 방향
CrossAixsAlignment 는 수직

color

'#181818' 은 아래와 같이 표현한다
Color(0xFF181818)

padding

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  const App({super.key});

  @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, Siri',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 28,
                              fontWeight: FontWeight.w800),
                        ),
                        Text(
                          'Welcom back',
                          style: TextStyle(
                              color: Colors.white.withOpacity(0.8),
                              fontSize: 18),
                        ),
                      ],
                    )
                  ],
                )
              ],
            ),
          )),
    );
  }
}

Padding 객체로 지금까지 만든 것들을 children 속성에 넣어주고
padding 속성에 EdgeInsets symmetric 메소드를 사용하여 값을 주었다
이런 방법은 좋지 않다