Padding 이란 공간에 여백을 주는 것입니다. 위젯이 많은 페이지의 경우 경계를 구분하기 어려울 때가 있습니다. 이때 Padding 위젯을 이용하여 어느 면이나 모든 면에 여백을 추가할 수 있습니다.
< 전체 코드 >
import 'package:flutter/material.dart';
void main() => runApp(FirstPage());
class FirstPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Padding Example"),
),
body: Center(
child: GridView.count(crossAxisCount: 3,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
child: Container(
padding: EdgeInsets.all(10.0),
color: Colors.blue,
width: 100,
height: 100,
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(15, 15, 15, 15),
child: Container(
color: Colors.green,
padding: EdgeInsets.all(10.0),
width: 100,
height: 100,
),
),
Text('EdgeInsets.all'
),
Text('EdgeInsets.fromLTRB'
),
Text('EdgeInsetsDirectional.fromSTEB'
),
],
),
),
);
}
}
padding :
EdgeInsets.fromLTRB(Left, Top, Right, Bottom) - 파라미터 그대로, 왼, 위, 오, 아래 에 개별적 padding 가능
EdgeInsets.all( all ) - 모든 방향으로 동일한 수치의 padding 가능
EdgeInsetsDirectional.fromSTEB(Start, Top, End, Bottom) - 이건 Start, End, 즉 읽는 방향에 따라 Start임으로 나라별 padding 이 필요할때 사용. ( 구글에서는 이걸 추천하더이다. )
'개발 > 플러터' 카테고리의 다른 글
[플러터] Route 기능에 대하여 ( 페이지 이동 ) (0) | 2020.05.11 |
---|---|
[플러터] 페이지(스크린) 간의 데이터 전송 (0) | 2020.05.10 |
[플러터] Navigator 에 대해 ( 화면 전환 ) (0) | 2020.05.07 |
[플러터] TextField 에 대하여 (0) | 2020.05.07 |
[플러터] ClipOval 에 대해서 (0) | 2020.05.05 |
댓글