[Flutter] Container 배경 이미지 넣기

flutter 에서 배경에 이미지를 넣는 방법은 크게 2가지가 있다. Stack을 사용해서 아래에 이미지를 넣을 수도 있고, Container에 decoration을 사용해서 이미지를 넣을 수도 있습니다. 이번 글에서는 decoration을 사용해서 이미지를 넣어보겠습니다.

 

import 'package:flutter/material.dart';

class Page extends StatelessWidget {
  const Page({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/background.png'),
            fit: BoxFit.cover
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [],
        ),
      )
    );
  }
}

child에서 colum이 아니라 바로 Text같은 위젯을 사용하면 배경이 겹쳐지지 않고 이상하게 나오게 됩니다.