Flutter의 단일 자식 위젯 총정리

플러터 flutter 다이어그램

Flutter에서 자식을 하나만 갖는 대표적인 위젯들에 대해 자세히 설명해 드리겠습니다.

Container 위젯

Container는 Flutter에서 가장 많이 사용되는 위젯 중 하나로, 다양한 디자인 설정이 가능합니다.

• 주요 특징:
  • 크기, 색상, 여백, 테두리 등 다양한 스타일 적용 가능
  • decoration 속성을 통해 그라데이션, 그림자 등 고급 스타일링 가능
  • BoxDecoration을 사용할 때 주의: color 속성과 동시 사용 불가

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(30),
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.red, Colors.blue],
    ),
  ),
  child: Center(child: Text("Hello, Flutter!")),
)

 

 

GestureDetector 위젯

사용자의 제스처를 감지하고 처리하는 위젯입니다.

• 주요 콜백 이벤트:
  • onTap, onDoubleTap, onLongPress
  • onPanStart, onPanUpdate, onPanEnd
  • onHorizontalDragStart, onHorizontalDragUpdate, onHorizontalDragEnd
  • onVerticalDragStart, onVerticalDragUpdate, onVerticalDragEnd
  • onScaleStart, onScaleUpdate, onScaleEnd

GestureDetector(
  onTap: () => print("탭됨!"),
  child: Container(
    color: Colors.green,
    child: Text("탭하세요"),
  ),
)

 

 

SizedBox 위젯

고정된 크기를 가진 박스를 생성하는 위젯입니다.

• 특징: const 선언이 가능하여 성능 최적화에 유리

const SizedBox(
  width: 100,
  height: 100,
  child: ColoredBox(color: Colors.red),
)

 

 

Padding 위젯

자식 위젯에 여백을 추가하는 위젯입니다.

• EdgeInsets 클래스 활용:
  • EdgeInsets.all(16.0)
  • EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0)
  • EdgeInsets.only(top: 16.0, bottom: 16.0, right: 16.0, left: 16.0)
  • EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0)

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text("패딩 적용된 텍스트"),
)

 

 

SafeArea 위젯

디바이스의 안전 영역을 고려하여 UI를 배치하는 위젯입니다.

SafeArea(
  child: Container(
    color: Colors.orange,
    child: Text("안전한 영역 안에 있는 텍스트"),
  ),
)

 

 

Text 위젯

텍스트를 표시하는 기본 위젯입니다.

Text(
  "안녕하세요, Flutter!",
  style: TextStyle(fontSize: 24),
)

 

 

버튼 위젯들

Flutter는 다양한 스타일의 버튼 위젯을 제공합니다.

• TextButton
• OutlinedButton
• ElevatedButton
• FloatingActionButton

ElevatedButton(
  onPressed: () => print("버튼 클릭됨"),
  child: Text("ElevatedButton"),
)

 

 

이러한 단일 자식 위젯들을 적절히 조합하여 복잡한 UI를 구성할 수 있습니다. 각 위젯의 특성을 이해하고 활용하면 효율적이고 매력적인 Flutter 앱을 개발할 수 있습니다.

 

[Flutter] 플러터 자식을 하나만 갖는 대표 위젯

 

플러터에서 자식을 하나만 갖는 대표 위젯 알아보기