[Flutter] 레이아웃 위젯 백그라운드 색상 채우기

 

 

Row나 Column과 같은 위젯에는 백그라운드 색상을 채우기 위한 속성이 존재하지 않는다.

따라서 다음과 같이 위젯을 Container 혹은 ColoredBox로 감싼 뒤 색상을 설정해줄 수 있다.

 

Container(	//ColoredBox도 가능
  color: Colors.yellow, // 여기에 설정하는 색이 백그라운드 색
  child: Row(...), 	// 기본 위젯을 자식으로 설정
)

 

 

[실행 결과]

 

 

[전체 코드]

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: ColoredBox(
        color: Colors.yellow,
        child: Row(

            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/56410074/how-to-set-the-background-color-of-a-row-in-flutter

How to set the background color of a Row() in Flutter?