[Flutter] Align, Expanded

Align

 자식 위젯의 정렬 방향을 정하는 위젯

 

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Align'),
        ),
        body: Align( // Align 자식 위젯의 정렬 방향을 정할 수 있는 위젯이다.
          alignment: Alignment.bottomRight, // 말그대로 오른쪽하단
          child: Container (
            color: Colors.red,
            width: 100,
              height: 100,
          ),
        ),
      );
  }
}

 

 

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

 bottomLeft

 bottomCenter

 bottomRight

 centerLeft

 center

 centerRight

 topLeft

 topCenter

 topRight

  : 9등분 되어있다.

 

 

 

 

Expanded

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

 

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded'),
      ),
      body: Column(children: <Widget>[
        Expanded(
          flex: 2, // 비율
          child: Container(
            color: Colors.red,
          ),
        ),
        Expanded(
                  // 비율 명시안하면 기본값 1이다.
          child: Container(
            color: Colors.green,
          ),
        ),
        Expanded(
            child: Container(
          color: Colors.blue,
        )),
      ]),
    );
  }
}