Container

위젯을 담는 역할을 한다. 컨테이너는 위젯을 감싸면서 padding 같은 몇 가지 부가기능을 제공한다.

EdgeInsets

.all() : 상하좌우 모든 방향에 double value만큼 padding을 준다.
.fromLTRB() : left, top, right, bottom 순으로 명시한만큼 padding을 준다.
.only() : 한 방향에만 padding을 준다.
.symmetric() : vertical, horizontal 같이 가로 세로 방향으로 padding을 준다.

단순 Padding을 위한거라면 Container가 아닌 Padding 위젯도 있다.

width, height

컨테이너의 가로 세로 크기 조절

color

Colors.색상 색상을 선택할 수 있다.
Color.fromARGB Alpha, RGB 순으로 색상을 넣어서 선택할 수 있다. IDE 팔레트를 이용할 수 있다.

Image

.asset('src') : 주소에 있는 이미지를 불러온다.
.network('src'): 해당 url에 있는 네트워크 상의 이미지를 불러온다.

width, height로 사이즈 조절을 하면, 자동으로 비율을 지켜서 조절된다.

Text

문자를 나타내는 위젯

TextStyle을 통해 폰트 크기, 색상 등 문자열을 꾸밀 수 있다.

ListView

스크롤 할 수 있는 화면을 만든다.

scrollDirection을 통해 스크롤 방향을 설정할 수 있다.

for문 말고도 builder라는 메서드를 통해 ListView를 만들 수 있다.

body: Center(
          child: ListView.builder(
            itemCount: 50, // 생성할 아이템 갯수
            itemBuilder: (BuildContext context, int index) { //아이템 빌드
              return Text(
                '$index. Text',
                style: TextStyle(fontSize: 25),
              );
            },
          ),
        )

Stack

위젯 위에 다른 위젯을 쌓고 싶을 때 사용.
선언한 순서대로 쌓이기 때문에 가장 먼저 선언한 위젯이 젤 하단에 위치한다.
따로 위젯의 위치를 지정할 순 없다.

Positioned

만약 쌓이는 위젯의 위치까지도 지정하고 싶을 때 사용.

Button: TextButton, ElevatedButton, OutlinedButton

        body: Center(
          child: Column(
            mainAxisAlignment:  MainAxisAlignment.center,
            children: [
              TextButton(onPressed: (){}, child: Text('Text Button')),
              Padding(padding: EdgeInsets.all(20)),
              ElevatedButton(onPressed: (){}, child: Text('Elevate Button')),
              Padding(padding: EdgeInsets.all(20)),
              OutlinedButton(onPressed: (){}, child: Text('Outlined Button')),
            ],
          ),
        )

공통적으로 모두 OnPressed라는 프로퍼티를 갖고 있으며, 버튼을 클릭했을 때 실행할 메서드를 정의한다.

IconButton은 기존 버튼들과 달리 텍스트가 아닌 아이콘이 들어가는 버튼이다.

화면 전환

모든 화면 전환 이벤트는 Navigator라는 위젯을 통해 처리된다.

OutlinedButton(onPressed: (){
                Navigator.of(context).push(
                 MaterialPageRoute(builder:(BuildContext context)=> FirstScreen(),
                  ),
                );

.push는 다음 화면을 이전 화면 위에 쌓겠다는 의미이다. 또한 MaterialPageRoute를 통해 Navigator가 이동할 경로를 지정한다. 이동할 경로(FirstScreen)는 빌더를 통해 화면을 만들어서 전달한다.

push의 반대인 pop을 하게 되면 이전 화면으로 돌아가게 된다.

OutlinedButton(onPressed: (){
                Navigator.of(context).pop();
                }, child: Text('Go to First Screen'))

화면 이동 시 데이터 전달

화면 클래스의 생성자에 인자 값을 주는 것으로 화면을 생성할 때 데이터를 넣을 수 있다.

주는 곳

MaterialPageRoute(builder:(BuildContext context)=> SecondScreen(screenData: 'Dara from FirstScreen',)

받는 곳

class SecondScreen extends StatelessWidget{
  final String screenData;
  SecondScreen({required this.screenData});

상태

변경되는 값이 화면에 적용되려면(반응성) setState()를 사용해야한다. setState() 없이 변화하는 값은 그저 변수에 불과한다.