[flutter] 플러터 Container를 사용하여 레이아웃을 만드는 방법은 어떤 것들이 있나요?

[flutter] 플러터 Container를 사용하여 레이아웃을 만드는 방법은 어떤 것들이 있나요?

11 Dec 2023

flutter

Contents

단일 색상 배경을 설정하는 방법
이미지 배경을 설정하는 방법
여백과 테두리를 설정하는 방법

1. 단일 색상 배경을 설정하는 방법

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Center(
    child: Text('단일 색상 배경'),
  ),
)

2. 이미지 배경을 설정하는 방법

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('asset/image.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: Center(
    child: Text('이미지 배경'),
  ),
)

3. 여백과 테두리를 설정하는 방법

Container(
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(20),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2),
  ),
  child: Text('여백과 테두리'),
)

이러한 방법들을 조합하여 다양한 레이아웃을 만들 수 있습니다. Container 위젯을 유연하게 활용하여 앱의 디자인을 구성하는 데 도움이 될 것입니다.