[Flutter] 화면 구성 위젯 이해하기

1) Container 위젯

 

별도로 컨테이너에 크기를 지정하면 아래와 같이 변경된다.

 

컨테이너 안에 컨테이너를 생성할 수 있다.

우선 차일드에 하나의 텍스트를 추가해보자

 

해당 마진을 주면, 각각의 영역에 마진이 생기게 된다. 이와 반대로 패딩의 개념이 있다.

 

 

추가로 컨테이너나 디바이스에 대한 길이값을 알 수있다.

고정된 길이나 높이가 아니라 디바이스 대비 길이나 높이를 구할수 있는 것이다.

height: MediaQuery.of(context).size.height/2,

 

해당 값으로 주게 되면, 디바이스 기준으로 데이터가 설정되게 된다.

 

 

2) Column 위젯

여러개의 자식 옵션을 가질수 있다는 특징이 있다.

컬럼말고도 Row 위젯이 있다. 가로로 정렬하냐, 세로로 정렬하냐의 차이가 전부이다.

 

3) Row위젯

 

추가로 Row에서는 하나의 옵션이 추가가 가능하다.

mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.end,

 

3. Button

class ContainerWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter container'),
      ),
      body: Container(
        child: RawMaterialButton(
          fillColor: Colors.red,
          child: Text('button'),
          onPressed: (){
            print('press');
          },
          onLongPress: (){
            print('long press');
          },

        )
      )

    );
  }
  
}

길게 누르거나, 짧게 누르거나의 기능을 생성할 수 있다.

추가적인 펑션이나 옵션은 해당 클래스에 대해서 타고 들어가면 볼 수 있다.

아래와 같이 내용을 보고 직접 코딩을 해보는 것도 조금은 도움이 될 것같다(외울 필요는 없다)