[Flutter] Container 가운데 정렬하기

[Flutter] Container 가운데 정렬하기

 

넓이가 지정된 Container를 디스플레이하면 좌측정렬된 상태로 나온다.

 

...

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 300,
        height: 300,
        decoration: const BoxDecoration(
          color: Colors.lightBlueAccent,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => {},
              child: const Text("Button")
            )
          ],
        ),
      )
    );
  }

...

 

 

이럴 때 Center 위젯으로 감싸주면 Container 위젯이 가운데 정렬되어 디스플레이 된다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          decoration: const BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => {},
                child: const Text("Button")
              )
            ],
          ),
        ),
      )
    );
  }