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

플러터 flutter 다이어그램

Flutter는 모든 UI를 위젯 기반으로 구성하며, 자식을 하나만 가질 수 있는 대표적인 위젯들이 다양하게 제공됩니다. 이 글에서는 이러한 위젯들을 살펴보고, 각각의 특징과 활용 방법을 소개합니다.

1. Container 위젯

Container는 가장 기본적인 레이아웃 위젯으로, 크기, 색상, 테두리 등 다양한 디자인 요소를 설정할 수 있습니다. 자식 위젯을 감싸며 배경색이나 여백을 추가하는 데 유용합니다.

import 'package:flutter/material.dart';

class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      width: 200,
      height: 100,
      child: Center(child: Text("Hello, Flutter!", style: TextStyle(color: Colors.white))),
    );
  }
}

 

 

2. GestureDetector 위젯

GestureDetector는 사용자 입력(탭, 드래그 등)을 감지하는 기능을 제공하며, 이벤트 처리에 유용합니다.

import 'package:flutter/material.dart';

class MyGestureDetector extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print("탭됨!");
      },
      child: Container(
        color: Colors.green,
        width: 200,
        height: 100,
        child: Center(child: Text("탭하세요")),
      ),
    );
  }
}

 

 

3. SizedBox 위젯

SizedBox는 고정된 크기를 가진 빈 공간 또는 자식 위젯을 포함한 레이아웃을 생성합니다. 퍼포먼스가 뛰어나며 const 선언이 가능합니다.

import 'package:flutter/material.dart';

class MySizedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      height: 100,
      child: Container(color: Colors.red),
    );
  }
}

 

 

4. Padding 위젯

Padding은 자식 위젯 주위에 여백을 추가하여 레이아웃을 조정하는 데 사용됩니다.

import 'package:flutter/material.dart';

class MyPadding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(color: Colors.yellow, child: Text("패딩 적용된 텍스트")),
    );
  }
}

 

 

5. SafeArea 위젯

SafeArea는 노치나 카메라 영역 등 UI가 가려질 수 있는 부분을 피해서 배치하도록 도와줍니다.

import 'package:flutter/material.dart';

class MySafeArea extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color: Colors.orange,
        child: Text("안전한 영역 안에 있는 텍스트"),
      ),
    );
  }
}

 

 

결론

플러터에서 자식을 하나만 갖는 위젯들은 UI를 구성하는 데 필수적이며, 각각의 역할에 따라 적절히 활용하면 매력적인 사용자 인터페이스를 만들 수 있습니다. 특히 Container와 GestureDetector는 다양한 상황에서 자주 사용되며, SafeArea는 현대 모바일 기기에서 필수적인 요소입니다.

앞으로의 고민거리

• 어떤 상황에서 특정 단일 자식 위젯을 선택해야 할까?
• 복잡한 레이아웃에서 단일 자식 위젯들을 어떻게 효율적으로 조합할 수 있을까?
• 성능 최적화를 위해 const 사용 여부를 어떻게 판단할 것인가?

 

플러터의 단일 자식 위젯들은 UI 개발의 핵심이며, 이를 활용하여 더욱 효율적이고 직관적인 앱 개발이 가능합니다.

 

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

 

[Flutter 실전 가이드] 실제 스마트폰에서 앱 테스트하기: Android와 iOS 환경 구축