화면을 구성할 때 배치한 위젯의 위치를 정해줘야 한다.

위젯을 중앙에 배치, 한쪽 방향으로 정렬, 위젯사이에 여백주기, 특정크기로 위젯 만들기 등에 사용하는 위젯을 알아보자

1. Center

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

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

2. Padding

안쪽 여백을 표현할 때 사용하는 위젯이다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Myongji College"),
          backgroundColor: Colors.red[600],
          centerTitle: true,
        ),
        body: Padding(
          padding: const EdgeInsets.all(10.0), //실숫값 입력 소수점 첫째자리까지 가능
          child: Container(
            width: 390,
            height: 700,
            color: Colors.yellowAccent,
          ),
        ));
  }
}

EdgeInsets 는 여러 함수를 제공한다.

all은 네 방향(상하좌우) 모두 같은 값

only 는 네 방향 중 원하는 방향만

fromLTRB 은 네 방향의 값을 각각 지정한다.

3. Align

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

원하는 방향으로 위젯을 정렬할 때 사용한다.

자식 위젯을 정렬하기 위해서는 alignment 특성에 정렬하고자 하는 방향을 정의해야 한다.

아래사진은 alignment 특성에 9가지 방향을 정렬해놓은 예시이다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Myongji College"),
        backgroundColor: Colors.red[600],
        centerTitle: true,
      ),
      body: Stack(children: [
        Align(
          alignment: Alignment.topLeft,
          child: Container(
              width: 100,
              height: 100,
              color: Colors.greenAccent,
              child: Align(
                alignment: Alignment.center,
                child: Text(
                  "Top Left",
                  textAlign: TextAlign.center,
                ),
              )),
        ),
        Align(
          alignment: Alignment.topCenter,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellowAccent,
            child: Align(
                alignment: Alignment.center,
                child: Text(
                  "Top Center",
                  textAlign: TextAlign.center,
                ),
              )
          ),
        )
				...
				...
				...
      ]),
    );
  }
}