[ Flutter ] 화면 배치

Container

💬  child를 포함한 부모 위젯으로 주로 사용된다.

💬  width, height를 지정하지 않으면 최대 크기로 확장한다.

💬  배경 색상을 설정할 수 있다.

예제

Container(
  color: Colors.red,
  width: 100,
  height: 100,
  padding: const EdgeInsets.all(8.0),
  margin: const EdgeInsets.all(8.0),
)

 

SizedBox

💬  여백을 주기 위한 단순 용도로 사용하기도 하며, Container처럼 child를 포함한 부모 위젯으로 사용되기도 한다.

💬  width, height가 설정되지 않으면 child의 크기에 맞게 크기가 설정된다.

예제

SizedBox(
  width: 100,
  height: 100,
  child: Container(
    color: Colors.red,
  ),
),

 

Column

💬  수직 방향으로 위젯들을 나란히 배치하는 위젯

Column(
  children: <Widget>[
    [위젯],
    [위젯],
    [위젯],
  ],
),

예제

Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
  ],
),

 

Row

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    [위젯],
    [위젯],
    [위젯],
  ],
),

💬  mainAxis는 위젯의 기본 방향이며, Row는 오른쪽, Column은 아래쪽이 mainAxis가 된다.

💬  crossAxis는 기본 방향의 반대 방향을 나타내며, Row는 아래쪽, Column은 오른쪽이 된다.

💬  각 프로퍼티에 지정할 수 있는 상수는 아래와 같다.

예제

Row (
  mainAxisSize: MainAxisSize.max,  // 가로로 꽉 채우기
  mainAxisAlignment: MainAxisAlignment.center,  // 가로 방향으로 가운데 정렬하기
  crossAxisAlignment: CrossAxisAlignment.center,  // 세로 방향으로 가운데 정렬하기
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
     color: Colors.green,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
     color: Colors.blue,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    )
  ],
)

 

Stack

💬  children에 나열한 여러 위젯을 순서대로 겹치게 한다.

💬  사용 방법은 Row, Column과 같으며 순서는 children 프로퍼티에 정의한 리스트에 먼저 작성한 위젯이 가장 아래쪽에 위치하고 나중에 작성한 위젯이 위쪽에 위치한다.

예제

Stack (
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.green,
      width: 80,
      height: 80,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.blue,
      width: 60,
      height: 60,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    )
  ],
)

 

GridView

💬  열 수를 지정하여 그리드 형태로 표시하는 위젯이다.

💬  GridView.count() 생성자는 간단하게 그리드를 작성하게 해준다.

💬  crossAxisCount 프로퍼티에 열 수를 지정할 수 있다.

GridView.count(
  crossAxisCount: [열 수],
  children: <Widget>[
    [위젯],
    [위젯],
    [위젯],
  ],
),

예제

GridView.count(
  crossAxisCount: 2,  // 열 수
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
  ],
),

 

PageView

💬  여러 페이지를 좌우로 슬라이드하여 넘길 수 있도록 해주는 위젯이다.

💬  children 프로퍼티에 각 화면을 표현할 위젯을 여러 개 준비하여 지정하면 화면을 좌우로 슬라이드할 수 있다.

💬  하지만, Tab과 연동하여 사용하지 않으면 좌우로 슬라이드가 가능한지 사용자가 모를 수 있어서 단독으로는 잘 사용하지 않는다.

PageView(
  children: <Widget>[
    [위젯],
    [위젯],
    [위젯],
  ],
),

예제

PageView(
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

 

Center

💬  중앙으로 정렬시키는 위젯이다.

💬  child 프로퍼티에 중앙에 배치할 위젯을 설정한다.

Center(
  child: [위젯],
),

예제

Center(
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
),

 

Padding

💬  안쪽 여백을 표현할 때 사용하는 위젯으로, 안쪽 여백은 padding 프로퍼티에 값을 지정한다.

💬  EdgeInsets 클래스를 사용하여 설정하며 const를 붙이면 컴파일 타임에 상수로 정의되어 다시 사용되는 부분이 있을 경우 메모리에 있는 값을 재사용하는 이득이 있다.

Padding(
  padding: const EdgeInsets.all(40.0),
  child: [위젯],
),

◻️  단, 달라지는 값이 부여하고 싶다면, const를 삭제해야 한다.

EdgeInsets.all([double])

◻️  all() 함수는 네 방향 모두 같은 값을 지정한다.

EdgeInsets.only({left: [왼쪽], top: [위], right: [오른쪽], bottom: [아래]})

◻️  only() 함수는 원하는 방향에 값을 지정한다.

◻️  지정하지 않은 방향에는 기본값 0.0이 지정된다.

EdgeInsets.fromLTRB([왼쪽], [위], [오른쪽], [아래])

◻️  fromLTRB() 함수는 네 방향의 값을 각각 지정한다.

예제

Padding(
  padding: const EdgeInsets.all(40.0),
  child: Container(
    color: Colors.red,
  ),
),

 

Align

💬  자식 위젯의 정렬 방향을 정할 수 있는 위젯이다.

💬  자식 위젯을 정렬하기 위해서는 alignment 프로퍼티에 정렬하고자 하는 방향을 정의해야 한다.

Align(
  alignment: Alignment.bottomRight,
  child: [위젯],
),

💬  Alignment 클래스에 정의되어 있는 정렬 관련 상수들

예제

Align(
  alignment: Alignment.bottomRight,
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
),

 

Expanded

💬  자식 위젯의 크기를 최대한으로 확장시켜주는 위젯이다.

💬  여러 위젯을 동시에 적용하면 flex 프로퍼티에 정숫값을 지정하여 비율을 정할 수 있으며, 기본값을 1이다.

Column(
  children: <Widget>[
    Expanded(
      flex: [비율],  // 기본값을 1
      child: [위젯],
    ),
    Expanded(
      child: [위젯],
    ),
    Expanded(
      child: [위젯],
    ),
  ],
),

예제

Column(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
),

 

Card

💬  카드 형태의 모양을 제공하는 위젯이다.

💬  기본으로 크기가 0이므로 자식 위젯의 크기에 따라 크기가 결정된다.

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16.0),
  ),
  elevation: [실숫값],  // 그림자 깊이
  child: [위젯],
),

◻️  elevation 프로퍼티를 지정하여 그림자의 깊이를 조정할 수 있다.

◻️  shape 프로퍼티는 카드 모양을 변경하는 방법을 제공하며, 여기서는 RoundedRectangleBorder 클래스의 인스턴스를 지정했다.

◻️  borderRadius 프로퍼티에 BorderRadius.circular() 메서드를 지정하여 카드 모서리의 둥근 정도를 실숫값으로 조절한다. 값이 클수록 더 둥글게 된다.

예제

Center(
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
    ),
    elevation: 4.0,  // 그림자 깊이
    child: Container(
      width: 200,
      height: 200,
    ),
  ),
),

 

Flexible

💬  각 위젯이 잔여 공간에 따라 유동적으로 크기가 결정되게 할 수 있다.

💬  flex 프로퍼티를 통해 Flexible 간의 비율을 조절할 수 있다.

💬  남은 공간에 최대로 확장되기를 원하는 경우 Flexible의 fit 인자를 FlexFit.tight로 설정하거나 Expanded를 사용하면 된다.

Column(
  children: [
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.orangeAccent,
      ),
    ),
    Flexible(
      flex: 3,
      child: Container(
        color: Colors.lightBlueAccent,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.blueAccent,
      ),
    ),
  ],
),

 

FittedBox

💬  자식 위젯이 부모 위젯의 사이즈에 꽉 차도록 배치한다.

Container(
  color: Colors.blue,
  width: 300,
  height: 300,
  child: FittedBox(
    child: Center(
      child: Text(
        "FittedBox",
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
      ),
    ),
  ),
),

 

Visibility

💬  위젯의 활성/비활성 여부를 제어할 수 있다.

Visibility(
  visible: bool,
  child: Widget
),

 

Opacity

Opacity(
  child: _image,
  opacity: 0.3,
),

💬  위젯에 투명도를 줄 때 사용한다.

 

PlaceHolder

💬  나중에 위젯이 들어갈 공간을 임시로 남겨두고 싶을 때 사용한다.

Placeholder(
  fallbackWidth: 100,
  fallbackHeight: 100,
),

 

FractionallySizedBox

💬  부모 위젯의 상대적인 크기로 자식 위젯 크기를 지정할 수 있다.

Container(
  width: 200.0,
  height: 200.0,
  color: const Color.fromARGB(255, 235, 237, 237),
  child: FractionallySizedBox(
    widthFactor: 0.5,
    heightFactor: 0.25,
    child: ElevatedButton(
      onPressed: () {  },
      child: const Text('Button'),
    ),
  ),
),