goal : 'Layout widget' 사용에 익숙해지기
Flutter 문서의 'Widget category'에서 'Layout widget'을 확인했다. https://flutter.dev/docs/development/ui/widgets/layout
Layout 위젯은 자식을 하나만 가질 수 있는 'Single-child layout widgets'과
둘 이상을 가질 수 있는 'Multi-child layout widgets'으로 나뉜다.
우선, 'Single-child layout widgets' 중 대표적인 Container 위젯을 사용해 아래와 같이 코드를 작성해보았다.
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Container(),
), // Container
), // SafeArea
); //MaterialApp
}
}
※'hot reload' 기능을 사용하기 위해 'MaterialApp'을 'StatelessWidget' 안에서 'return' 시켰다.※
아래와 같이 아직 Container의 모습이 보이지 않는다.다음과 같이 컨테이너를 설정해보자.
- Container
height : 100
width : 100
color : white
child : Text('flutter')
child: Container(
height: 100,
width: 100,
color: Colors.white,
child: Text('flutter'),
),
※'SafeArea()'의 사용으로 컨테이너가 상단바(상태표시줄)을 차지하지 않는다.※
이제 'margin'과 'padding' 기능을 알아보자.
먼저 'margin'을 적용해보았다.
child: Container(
height: 100,
width: 100,
color: Colors.white,
child: Text('flutter'),
margin: EdgeInsets.only(left: 30),
),
컨테이너가 왼쪽 가장자리로부터 30픽셀 떨어짐을 확인했다.
이제 'padding'을 적용해보자.
child: Container(
height: 100,
width: 100,
color: Colors.white,
child: Text('flutter'),
margin: EdgeInsets.only(left: 30),
padding: EdgeInsets.all(20),
),
컨테이너 내부에서 모든 가장자리로부터 2픽셀만큼 떨어짐을 확인했다.
이와같은 방식으로 대표적인 'Layout widget'들과 이 위젯들이 제공하는 속성들을 사용해보며 'Layout widget'사용에 익숙해졌다.