[Flutter] 화면에 가득 차도록 위젯 사이즈 full로 설정하기

 

 

위젯은 기본적으로 자식 위젯만큼의 크기를 가진다.

플러터에는 사이즈 설정 속성이 없는 위젯이 많기 때문에, 화면에 꽉 차게 설정하기 위해서는 사이즈 설정 속성이 있는 위젯을 이용하여 세팅해 줄 수 있다.

 

SizedBox나 Container와 같이 사이즈를 설정할 수 있는 위젯의 크기를 double.infinity 로 설정한 뒤, 기본 위젯을 자식으로 설정해준다.

SizedBox(
	width: double.infinity,	//가로 꽉 차게 설정
	height: double.infinity,	//세로 꽉 차게 설정
	child: Container(	//꽉 채우고자하는 위젯
		//생략
    )
)

 

백그라운드 색을 노란색으로 설정하고 비교해보면 화면이 가득 채워지는 것을 확인 할 수 있다.

 

 

[설정 전]

 

 

 

 

[설정 후]

 

 

 

 

[전체 코드]

import 'package:flutter/material.dart';

//앱 시작 부분
void main() {
  runApp(const MyApp());
}

//시작 클래스. 머티리얼 디자인 앱 생성
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('제목')
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.yellow,

        child: Row(
          mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: 100,
                height: 100,
                margin: const EdgeInsets.all(8.0)
              ),
              Container(
                color: Colors.green,
                width: 100,
                height: 100,
                  margin: const EdgeInsets.all(8.0)
              ),
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                  margin: const EdgeInsets.all(8.0)
              )
            ]
        )
      )
    );
  }
}

 

 

 

---

 

참고한 사이트

https://stackoverflow.com/questions/57419127/flutter-how-create-container-with-width-match-parent

Flutter - How create Container with width match parent?