배경색 지정하기

이번에는 배경색을 지정해볼게요.

배경색을 지정하기 전에 우선 알아야 할게 있어요.

그것은 바로 Container() 위젯입니다.

공간을 만드는 위젯입니다.

Container()위젯 사용하기

그럼 home에 Container()를 사용해 봅시다.

다음과 같이 home의 코드를 변경해주세요.

home: Container(

),

Container에 color속성을 사용해서 배경색을 지정할 수 있습니다.

home: Container(
    color: Colors.red
),

그럼 현재까지의 코드는 다음과 같죠.

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return MaterialApp(
            title: 'hello',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: Container(
                color: Colors.red,
            ),
        );
    }
}

그럼 이번엔 글씨를 넣어볼까요? Container안에 글씨를 넣어봅시다.

home: Container(
    color: Colors.red,
),

위젯 안에 위젯을 하나 추가할 때는 child를 사용합니다.

그리고 그 child안에 추가할 위젯을 넣습니다.

child 위젯 사용하기

home: Container(
    color: Colors.red,
    child: //추가할 위젯
),

Text()위젯을 넣는다면

home: Container(
    color: Colors.red,
    child: Text('pinkcoding'),
),

여기까지 작성한 MyApp클래스의 코드는 다음과 같습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        color: Colors.red,
        child: Text('pinkcoding'),
      ),
    );
  }
}

빨간색 배경에 빨간 글씨라니 영 좋지 않네요.

우리는 여기에서 배경색 변경하는 방법을 알았으니 다음 시간에 글씨색을 변경하는 방법에 대해 알아봅시다.