[Flutter_study] Section 5~6 review

* 아이콘 이미지 관련 사이트

- icons8, vecteezy

: 무료 이미지 다운

- canva

: 디자인(아이콘) 만들기

 

* Hot Reload

: 새로 고침과 비슷. 저장하자마자 변경사항 확인

(control +s로 저장해도 같은 결과)

 

* Hot Restart

: 앱의 상태를 재설정

 

* StatelessWidget

: Hot Reload/Hot Restart시 이부분만 실행됨.

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MyApp()
  );
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Container(),
      )
    );
  }
}
 

● Layout Widget

 

* Single-Child Layout Widget

- Container()

: 레이아웃 위젯(web의 div와 유사함)

하나의 자식만 가질 수 있음.

배경색, 패딩, 여백, 크기 지정 가능

 

* Multi-Child Layout Widget

-Column/Row

: 여러개의 자식을 가질 수 있다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MyApp()
  );
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                height: 100.0,
                width:100.0,
                color: Colors.white,
                child: Text('Container1'),
              ),
              Container(
                height: 100.0,
                width:100.0,
                color: Colors.blue,
                child: Text('Container2'),
              ),
              Container(
                height: 100.0,
                width:100.0,
                color: Colors.red,
                child: Text('Container3'),
              ),
            ],
          )
        )
      )
    );
  }
}