Layout Widget; margin&padding
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'으로 나뉜다.
Container
우선, '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
먼저 'margin'을 적용해보았다.
child: Container(
height: 100,
width: 100,
color: Colors.white,
child: Text('flutter'),
margin: EdgeInsets.only(left: 30),
),
컨테이너가 왼쪽 가장자리로부터 30픽셀 떨어짐을 확인했다.
padding
이제 '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'사용에 익숙해졌다.
Author And Source
이 문제에 관하여(Layout Widget; margin&padding), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dbscks1239/Layout-설정하기-feat.Flutter저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)