08.12.24[개발일기] 주니어 개발자 협업일기-Flutter

1. 박스안에 가로로 2개 이상의 아이템을 넣고 싶을땐  Row안에 Children을 사용해 배열에 넣고 싶은 아이템을 지정해주면 된다.

이때 배경색을 지정해주면 현재 컨테이너가 어느정도 너비와 높이를 차지 하고 있는지 한눈에 보기 편하다.

Container(
  width: double.infinity,
  height: MediaQuery.of(context).size.height, // 현재 화면의 전체 높이를 가져옴
  color: Colors.blue, // 배경색 추가 (선택 사항)
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('This container takes up the full height of the screen'),
    ],
  ),
),

 

 

2. 박스안에 세로로 2개 이상의 아이템을 넣고 싶을땐  Row안에 Children을 사용해 배열에 넣고 싶은 아이템을 지정해주면 된다.

 1번과 이어지는 부분이다.

Container(
  width: double.infinity,
  height: MediaQuery.of(context).size.height, // 현재 화면의 전체 높이를 가져옴
  color: Colors.blue, // 배경색 추가 (선택 사항)
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('This container takes up the full height of the screen'),
    ],
  ),
),

 

3. 현재 화면의 전체 높이가 아닌 직전 부모의 높이 혹은 너비를 그대로 상속 시키고 싶은 경우 Container는 height를 null로 주면 된다.

Container(
  color: Colors.blue, // 배경색 추가 (선택 사항)
  child: Center(
    child: Text('This container takes up the height of its parent'),
  ),
),

 

만약 부모 위젯이 Column, Row, Stack과 같은 레이아웃 위젯이라면, 부모 위젯의 height를 상속 받기 위해 Expanded 또는 Flexible 위젯을 아래와 같이 사용하면 된다. 아래 예시는 Column을 예시로 들었다. 이 방법을 사용하면 Container가 직계 부모의 높이만큼 자동으로 크기를 맞추게 되어 편리하다.

 

Column(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.blue, // 배경색 추가 (선택 사항)
        child: Center(
          child: Text('This container takes up the height of its parent'),
        ),
      ),
    ),
  ],
),

 

4. Scaffold 위젯에 bottomNavigationBar 속성을 사용하면 간단하게 Footer를 추가할 수 있다.

Scaffold(
  appBar: AppBar(
    title: Text('Footer Example'),
  ),
  body: Center(
    child: Text('Main Content'),
  ),
  bottomNavigationBar: Container(
    color: Colors.blue,
    height: 60.0,
    child: Center(
      child: Text(
        'This is the Footer',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
);