[Flutter basic] Container 를 사용해 원하는 크기,위치 그리기

Modern Collection View 와 MVVM 패턴 가이드

[iOS] Modern Collection View & MVVM 패턴 가이드 - 인프런 | 강의

쉽게 말하자면 Container는 하나의 사각형 박스를 생각하면 된다.

Container를 알아야 하는 큰 이유는 어느 위치에 내가 원하는 UI를 그리기 위해

그 위치에 Container를 생성해주고

그 안에 UI를 넣어주는 방식을 사용하면 편하기 떄문이다.

 

실제로 나도 사각형 박스들의(Container) 집합으로 앱의 모든 UI를 그리고 있다.

 

 

그렇게 되면 좀더 직관적으로 UI를 그릴수 있으며

Color를 적용시켜 디버깅이 유리해진다.

예를 들어 내가 원하는 위치에 버튼이 그려지지 않은경우

그 버튼을 감싸고 있는 컨테이너에 색깔을 넣어주어 컨테이너가 올바른 위치에 와있는지 확인한다.

그리고 그렇지 않은경우 그 상단의 컨테이너를 체크 하는방식으로 디버깅 하면 쉽게 문제점을 찾을수있다.

이것은 나중에 알아보기로 하자.

 

우선 flutter 프로젝트를 생성한후 불필요한코드를 삭제한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Container'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
    );
  }
}

 

Container는 row/column/center 등 쉽게 위치를 잡아줄수 있는 방법들이 있지만

우선 container 만 사용해서 UI를 그려 보도록 하자.

 

1. container 크기 지정

 

container 에는 width/height 처럼 크기를 지정해줄수 있다.

직관적으로 확인하기 위해 color를 지정해주자.

Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),

이렇게 쉽게 Container의 크기를 지정해 줄수 있지만

사실 자식의 자식 컨테이너 가 아닌경우 ( 크기가 지정되어있는 경우) 가 아니라

부모 컨테이너 의 경우 (영역을 잡아 주는 역할을 주로 하는경우) 크기를 지정해 줄일이 많이 없다.

디바이스 마다 너비와 높이가 다르기 때문이다.

디바이스가 커지거나 작아질수록 컨테이너의 크기를 유동적으로 잡아주기 위해서는 패딩과 마진을 활용해야 한다.

 

 

 

 

2. margin padding마진과 패딩 설정하기

 

마진은 컨테이너 외부에 공백을 만들어 주는것이다. 

padding과 헷갈릴수 있는데 padding 은 컨테이너 내부에 공백을 만든다 보면 된다.

 

 

margin/padding 을 설정 하려면 EdgeInsets 를 넣어줘야하는데 이렇게 여러 방법이 있다.

개인적으로는 all / only / symmetric 만 사용중인데 이 세개만 보자면

all은 위-오른쪽-왼쪽-아래 모두 같은 크기로 여백을 주는방법이다.

only 는 내가 원하는 방향에 여백을 주는방법이고

symmetric은 양옆 / 위아래 이렇게 여백을 주는 방법이다.

 

all을 사용해 마진을 설정해보자

body: Container(
        width: 200,
        height: 200,
        color: Colors.red,
        margin: EdgeInsets.all(100),
        
      ),

위의 빨간 컨테이너처럼 약간 왼쪽으로 치우쳐있는게 아니라 가운데로 두고 싶다면

symmetric 마진을 설정해줘서 양옆 똑같은 마진을 주면 된다.

단 이럴때는 디바이스 너비를 정확하게 아는 경우가 아니므로 컨테이너 너비는 생략해준다.

Container(
        height: 200,
        color: Colors.red,
        margin: EdgeInsets.symmetric(horizontal: 100, vertical: 100),
        
  ),

아니면 만약 위에만 살짝 띄워주고 싶다면 only를 사용해주기도 한다.

Container(
        height: 200,
        width: 200,
        color: Colors.red,
        margin: EdgeInsets.only(top: 20),
      
      ),

다음은 패딩을 넣어줘 보자 패딩을 확인하기 위해 빨간 컨테이너를 큰영역을 잡아준다.

기본적으로 컨테이너에 child가 있거나 color가 설정되어있다면 가능한 가장 큰영역을 잡아먹는다.

body: Container(
        color: Colors.red,
      ),

다음과 같이 body 부분을 다 잡아먹는다.  여기서 양옆/ 위아래 를 10만큼 띄워보자'

body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.red,
      ),

이제 이안에 패딩을 넣을건데 그렇게 된경우 파란색의 자식 컨테이너의 상태를 확인해보자.

body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.red,
        padding: EdgeInsets.all(100),
        child: Container(
          color: Colors.blue,
        ),
      ),

이렇게 사면이 100만큼 공백이 들어간 상태로 자식 컨테이너가 들어간다.

만약 여기서 파란컨테이너의 길이를 줄이고 싶다면  파란 컨테이너에 아래쪽 마진을 주면 된다.

body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.red,
        padding: EdgeInsets.all(100),
        child: Container(
          color: Colors.blue,
          margin: EdgeInsets.only(bottom: 300),
        ),
      ),
      

만약 자식 컨테이너의 높이를 짧게 지정해주면 어떨까?

컨테이너의 크기가 정해 지지 않은경우에는 가능한 한 큰 영역을 잡는다했다.

만약 자식 컨테이너의 크기가 정해졌다면

그렇다면 자식 컨테이너의 크기 + 부모컨테이너의 마진+ 패딩 만큼만 영역을 잡는다.

 

 body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.red,
        padding: EdgeInsets.all(100),
        child: Container(
          color: Colors.blue,
          height: 200,
        ),
      ),

 

 

이렇게 컨테이너의 위치와 크기를 잡는 이유는 원하는 UI를 그 안에 넣어주기 위함이라 했다.

만약 내가 원하는 위치가 파란색 컨테이너의 왼쪽 위 모서리 쪽이라면 

이제 그 컨테이너 안에 UI를 넣어주면 된다.

child 에 들어가는 UI들은 기본적으로 컨테이너의 왼쪽 위에 들어가기 때문에

(만약 패딩이나 alignment에 따라 다르긴함)

나는 늘 컨테이너의 위치를 잡을때 왼쪽위에 넣을 생각을 한다.

 

Container(
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(100),
        child: Container(
          height: 200,
          child: Text("여기!@#@#"),
        ),
      ),

 

 

 

개발자 이직 비법 보러가기