레이아웃 하기전에..

MaterialApp 짚고 넘어가기
이 것도 위젯임.
이걸 사용하면 구글의 매터리얼 테마로 쉽게 쉽게 만들 수 있게 해준다.
아이폰 기본 앱같은애를 만들고 싶으면 Cupertino 로 사용.

그냥 커스텀 디자인을 입힌 나만의 위젯
그래도 Material App() 으로 쓰면 됨
그냥 쓰고 구글물을 뺀다고 생각할 것.

MaterialApp 을 쓰면

  home:Scaffold(
        appBar: AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar( child: Text('adsjklfj')),
  )

상중하로 나눠줌.

여러 위젯 가로로 배치하기

      prefer_const_literals_to_create_immutables: false

위 추가하기

  return MaterialApp(
      home:Scaffold(
        body: Row( // 이 부분을 Column으로 바꾸면 세로로 정렬 됨
          mainAxisAlignment: MainAxisAlignment.center, // 가운데 정렬
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 적절히 떨어뜨림.
          crossAxisAlignment: CrossAxisAlignment.center, // 세로 정렬 
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ]
        )
      )
    );

자동완성을 잘 사용하자.

mainAxisAlignment : 여기까지 친 상태에서

• 왼족에 있는 애를 대문자로 써보자.
• 파라미터에 마우스를 올려본다.

걍 구글링 잘 해…

숙제

파란색 상단바가 뿅 나오게 하단바 안에다가 아이콘 세개 배치

Icon(Icons.phone), Icon(Icons.message), Icon(Icons.contact_page),

완성본

  import 'package:flutter/material.dart';

  void main() {
    runApp(const MyApp()); // 앱 시작해주세요 라는 뜻임
  }

  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super  (key:key);
    @override
    Widget build(BuildContext context){
      return MaterialApp(
        home:Scaffold(
          appBar: AppBar(title: Text('앱임')),
          body: Text('안녕'),
          bottomNavigationBar: BottomAppBar(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 적절히 떨어뜨림.
                children:[
                  Icon(Icons.phone),
                  Icon(Icons.message),
                  Icon(Icons.contact_page)
                ]
            )
          ),
        )
      );
    }
  }

02 박스 디자인

위의 예제에서 패딩을 높여보고 싶다면 왼쪽의 전구: Wrap with Container 이렇게하면 Container로 감쌀 수 있음.
그러면 이제 height를 설정해줄 수 있음.

변경된 코드

child: Container( // 이때 width, height, child만 필요한 박스면 SizedBox라고 넣으면 됨
            height: 70,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 적절히 떨어뜨림.
                children:[
                  Icon(Icons.phone),
                  Icon(Icons.message),
                  Icon(Icons.contact_page)
                ]
            ),
          )

margin 넣고, padding 넣고 등등

body: Container(
          width: 150, height: 50, color: Colors.blue,
          margin : EdgeInsets.all(20), // 이렇게 마진을 줄 수 있음
          margin : EdgeInsets.fromLTRB(0, 30, 0, 0), // 이런식으로 쓰면 위쪽만 줄 수 있음. (left, top, right, bottom 순임)
          padding: EdgeInsets.all(20),
          decoration: BoxDecoration(
            border: 
            color:

          )
          child: Text('dddd'),
        )

가운데 정렬하기

body: Align(
          alignment: Alignment.center ,
          child: Container(
            width: 150, height: 50, color: Colors.black,
          ),

wdith: double.infinity 를 사용하면 무한히 채워줌.