Flutter 크기/위치/정렬 관련 위젯

화면을 구성한 위젯의 크기, 위치, 정렬 등을 할 때 쓰이는 위젯에 대해 알아보자.

 

요약 : Center, Expanded, SizedBox, Card

 

 

Center

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          color: Colors.blue,
          width: 200,
          height: 200
        )
      )
    );

Center : child프로퍼티에 중앙에 배치할 위젯을 넣어주면 된다.

 

 

Expanded

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 3, // 비율
            child: Container(
              color: Colors.pinkAccent,
            ),
          ),
          Expanded(
            flex: 1, // 비율
            child: Container(
              color: Colors.lime,
            ),
          ),
          Expanded(
            flex: 4, // 비율
            child: Container(
              color: Colors.cyan,
            ),
          ),
          Expanded(
            flex: 2, // 비율
            child: Container(
              color: Colors.green,
            ),
          ),
        ],
      )
    );

Expanded : 자식 위젯 크기를 최대로 확장시킴 (여러 위젯을 만들어 flex를 주면 비율을 정할 수 있음)

SizedBox

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
        width: 300,
        height: 300,
        child: Container(
          color: Colors.amber
        ),
      )
    );

SizedBox : 크기관련된 프로퍼티 없는 위젯에 크기를 주고싶은 경우 해당 위젯으로 감싸면 된다. (child없이 단독으로 쓰면 여백 표현할 수도 있다)

Card

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Card(
          color: Colors.white70,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0), // 모서리 둥근정도 설정
          ),
          elevation: 2.0, // 그림자 깊이
          child: Container(
            width: 250,
            height: 250
          )
        )
      )
    );

Card : 카드모양 위젯