본문 바로가기
개발/플러터

[플러터] Padding 에 대하여

by 핸디(Handy) 2020. 5. 9.

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 이 필요할때 사용. ( 구글에서는 이걸 추천하더이다. )
 
    

댓글