포디 Podi
또렷한 기억보다 글이 낫다
포디 Podi
  • 분류 전체보기 (83)
    • 책 (14)
      • 기록 (14)
      • 한줄 (0)
    • IT (62)
      • 기록 (61)
    • 일상 (5)
      • 음식 (0)
      • 기록 (5)
    • 게임 (0)
      • 몬스터헌터 (0)

블로그 메뉴

  • 홈으로
  • 방명록
  • 태그들
  • 깃허브
  • 유튜브
  • 인스타

공지사항

인기 글

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
포디 Podi

또렷한 기억보다 글이 낫다

Flutter 여백을 주는 위젯
IT/기록

Flutter 여백을 주는 위젯

2022. 5. 17. 14:14
728x90

Container 위젯

padding 프로퍼티를 사용하면 여백을 줄 수 있다.

Container(
    padding: EdgeInsets.all(10),
)

Padding 위젯

padding 프로퍼티를 사용하면 여백을 줄 수 있다.

Padding (
    padding: EdgeInsets.all(10),
)

EdgeInsets은 뭔가요?

padding, margin과 같이 네 개의 방향(상하좌우)에 여백을 줄 떄 사용하는 클래스입니다.
TextDirection 의 영향을 받지 않습니다

EdgeInsets 인스턴스를 만드는 방법에 대한 몇 가지 예입니다.

//모든 측면(상하좌우)
const EdgeInsets.all(0.0)

//세로(vertical), 가로(horizontal)
const EdgeInsets.symmetric(vertical: 0.0, horizontal: 0.0,)

//지정된 방향
const EdgeInsets.only(left: 0.0, top: 0.0, right: 0.0, bottom: 0.0)

//상하좌우 방향 
const EdgeInsets.fromLTRB(left: 0.0, top: 0.0, right: 0.0, bottom: 0.0)

Container위젯과 Padding의 차이점

Padding 위젯의 경우 프로퍼티로 padding과 child만 가지고 있는 반면
Container의 경우 padding뿐만 아니라 marign, decoration, child 등 다양한 프로퍼티가 존재한다.
그래서 여백 추가, 테두리 추가, 배경색 또는 이미지 변경 등이 가능하다.

flutter layout - container

Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
}) :

...
Padding({
    Key? key,
    required this.padding,
    Widget? child,
}) :

...

 

 

참고

Container class

Padding class

EdgeInsets class

'IT > 기록' 카테고리의 다른 글

[Flutter] Text widgets - Text  (0) 2022.05.19
[Flutter] 이미지 넣기  (0) 2022.05.18
관계형 데이터베이스란?  (0) 2022.05.02
Flutter 화면 배치에 쓰는 기본 위젯 정리  (0) 2022.03.25
포토샵 대용으로 쓸만한 프로그램 김프(GIMP) 설치 후 무료폰트 적용하기  (0) 2022.02.11
    'IT/기록' 카테고리의 다른 글
    • [Flutter] Text widgets - Text
    • [Flutter] 이미지 넣기
    • 관계형 데이터베이스란?
    • Flutter 화면 배치에 쓰는 기본 위젯 정리
    포디 Podi
    포디 Podi
    기록은 복리다

    티스토리툴바