개발/플러터

[플러터] Padding 에 대하여

핸디(Handy) 2020. 5. 9. 12:55

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