Flutter 기본 위젯 사용법 가이드

Flutter는 모든 UI 요소를 위젯으로 구성합니다. 기본 위젯을 이해하면 Flutter 앱 개발에 큰 도움이 됩니다.
이 글에서는 Flutter에서 자주 사용되는 기본 위젯들을 소개하고, 사용 예제를 제공하겠습니다.

---

1. 위젯의 종류

Flutter 위젯은 크게 두 가지로 나눌 수 있습니다:

• StatelessWidget: 상태가 없는 위젯으로, 값이 변경되지 않는 UI를 만듭니다.
• StatefulWidget: 상태를 가질 수 있는 위젯으로, 동적으로 변경되는 UI를 처리합니다.

---

2. 주요 기본 위젯 소개

2.1 Text

화면에 텍스트를 표시하는 데 사용됩니다.

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.blue),
)

2.2 Container

레이아웃을 구성하는 다목적 위젯입니다. 크기, 패딩, 색상 등을 설정할 수 있습니다.

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.symmetric(horizontal: 10.0),
  color: Colors.amber,
  child: Text('Container Example'),
)

2.3 Row & Column

수평(Row) 또는 수직(Column) 방향으로 위젯을 배열합니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star, color: Colors.red),
    Text('Row Example'),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Text('Column Example'),
    Icon(Icons.star, color: Colors.green),
  ],
)

2.4 Image

이미지를 표시하는 위젯입니다.

Image.network(
  'https://flutter.dev/images/flutter-logo-sharing.png',
  width: 100,
  height: 100,
)

2.5 Button 계열 위젯

사용자의 입력을 받을 수 있는 버튼 위젯들입니다.

• ElevatedButton

ElevatedButton(
  onPressed: () {
    print('Button Pressed');
  },
  child: Text('Elevated Button'),
)

• TextButton

TextButton(
  onPressed: () {},
  child: Text('Text Button'),
)

• IconButton

IconButton(
  onPressed: () {},
  icon: Icon(Icons.thumb_up),
)

2.6 Scaffold

앱의 기본 레이아웃 구조를 제공합니다.

Scaffold(
  appBar: AppBar(
    title: Text('Scaffold Example'),
  ),
  body: Center(
    child: Text('Hello, Scaffold!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

---

3. 간단한 예제: 기본 앱

아래는 위젯을 활용한 간단한 Flutter 앱 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Basic Widgets'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Welcome to Flutter!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print('Button Clicked!');
                },
                child: Text('Click Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

4. 결론

Flutter의 기본 위젯은 다양한 UI를 만드는 데 필수적입니다. 위젯의 조합과 속성을 활용하여 효율적으로 앱을 개발할 수 있습니다. 다음 글에서는 상태 관리(State Management)에 대해 다뤄보겠습니다.

---

참고 자료

• Flutter 공식 문서: https://docs.flutter.dev/development/ui/widgets
• Flutter 위젯 카탈로그: https://flutter.dev/docs/development/ui/widgets/catalog