이 기사를 읽고 습득할 수 있는 것

Flutter의 화면 작성으로 「화면 가득 요소를 표시하고 싶다」라고 하는 문제를 해결하는 힘(아마)

결론

· Expanded

이런 느낌

우선, 쓰자.

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.blueAccent),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        ],
      ),
    );
      ),
    );
  }
}

🥺

요소가 날아 버렸다.
이것은, 높이가 아무것도 지정되어 있지 않기 때문이며, 어쩔 수 없는 것.

높이를 지정해보기

그래서 height를 Container에 붙여 본다.

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Container(
          decoration: BoxDecoration(color: Colors.blueAccent),
          height: 300,
        ),
        Container(
          decoration: BoxDecoration(color: Colors.greenAccent),
          height: 300,
        ),
      ],
    ));
  }
}

Container가 표시되게 되었지만, 높이 지정을 해 버리고 있으므로,
이것이라면 불편함이 일어난다.

파란색 Container를 화면 가득 늘려보세요

위의 문제를 해결하기 위해 Container를 Expanded로 묶으십시오.

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 200,
          ),
        ],
      ),
    );
  }
}

그러면 좋은 느낌으로 화면 가득 요소가 표시되게 된다.
우선 하고 싶은 것은 끝.

Expanded를 복수 넣으면 균등하게 요소를 넓혀준다

맨 위 이미지와 같은 요소 표시는 다음 소스에서 수행되었습니다.

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            height: 100,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.yellowAccent),
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 100,
          ),
        ],
      ),
    );
  }
}

복수의 Expanded가 요소내에 있으면, 그것들이 균등의 크기가 되도록(듯이) 자동으로 조정해 준다.
이런 곳이 Flutter가 좋아하는 곳이야...
(다른 것을 몰라)

마지막으로

이 요소 내에 Text 등을 넣으면 요소의 가로 폭이 망가져 버린다.
이것의 해소 방법은 또한 이번에.

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            height: 100,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.yellowAccent),
              child: Text("test"),
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 100,
          ),
        ],
      ),
    );
  }
}

출처