1. Container위젯(함수)란?
다른 위젯을 감싸고 설정할 수 있는 강력한 위젯. 이를 통해 UI의 모양과 레이아웃을 제어할 수 있다. Container는 많은 속성을 가지고 있어서 다양한 스타일과 레이아웃을 만들 수 있다.
2. 주요속성
속성 | 설명 |
alignment | 컨테이너 내부의 자식 위젯 정렬방식 설정 |
color | 컨테이너의 배경색 설정 |
width | 컨테이너의 너비 설정 |
height | 컨테이너의 높이 설정 |
padding | 컨테이너의 내부 여백 설정 |
margin | 컨테이너 외부 여백 설정 |
decoration | 컨테이너의 그림자, 테두리, 그라데이션 등의 효과 추가 |
3. 예제
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Container 위젯 예제'), ), body: Center( child: Container( width: 200, height: 200, alignment: Alignment.center, color: Colors.blue, padding: EdgeInsets.all(20), margin: EdgeInsets.all(30), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 5, blurRadius: 7, offset: Offset(0, 3), ), ], ), child: Text( '안녕하세요!', style: TextStyle( color: Colors.white, fontSize: 20, ), ), ), ), ), ); } } |
Container 위젯을 사용하여 만들어진 가운데로 정렬된 파란색의 상자.
상자에는 '안녕하세요!'라는 텍스트가 포함되어 있다.
Container의 속성을 변경하여 원하는 스타일과 레이아웃을 만들 수 있다.
'공부방 > Flutter' 카테고리의 다른 글
[Flutter] ThemeData위젯(함수) (0) | 2024.03.24 |
---|---|
[Flutter] StatefulWidget위젯(함수) (0) | 2024.03.20 |
[Flutter] BoxDecoration()위젯(함수) (0) | 2024.03.13 |
[Flutter] Padding()위젯(함수) (0) | 2024.03.10 |
[Flutter] mainAxisAlignment함수(위젯) (0) | 2024.03.06 |