Flutter 위젯 개념 이해

Contents

Flutter 위젯은 Flutter 애플리케이션의 UI를 구성하는 기본 빌딩 블록입니다. 모든 것이 위젯으로 구성되어 있으며, 버튼, 텍스트, 레이아웃 등 모든 요소가 위젯입니다. Flutter에서 위젯을 이해하는 것은 애플리케이션을 설계하고 개발하는 데 있어 핵심입니다.

위젯의 기본 개념

위젯의 종류: Flutter 위젯은 크게 두 가지 유형으로 나눌 수 있습니다.

StatelessWidget: 상태가 없는 위젯입니다. 위젯이 생성된 이후에는 변경되지 않는 경우에 사용됩니다.
StatefulWidget: 상태가 있는 위젯입니다. 위젯이 생성된 이후에도 상태가 변경될 수 있는 경우에 사용됩니다.

위젯 트리: Flutter 애플리케이션은 위젯 트리로 구성됩니다. 각 위젯은 다른 위젯을 자식으로 가질 수 있습니다. 최상위 위젯은 보통 MaterialApp이나 CupertinoApp과 같은 앱 위젯입니다.

StatelessWidget

StatelessWidget은 불변의 위젯입니다. 생성된 이후 상태가 변경되지 않기 때문에, 주로 간단한 UI 요소나 고정된 데이터를 표시하는 데 사용됩니다.

예제

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('StatelessWidget Example')),
        body: Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, StatelessWidget!',
      style: TextStyle(fontSize: 24),
    );
  }
}

StatefulWidget

StatefulWidget은 상태를 가질 수 있는 위젯입니다. 상태가 변경될 때마다 UI가 다시 빌드됩니다. 상태는 State 객체에 저장됩니다.

예제

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('StatefulWidget Example')),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

위젯 트리와 레이아웃

위젯 트리는 위젯들이 계층 구조로 배열된 형태입니다. 위젯 트리를 통해 복잡한 레이아웃을 구성할 수 있습니다. Flutter에는 레이아웃을 구성하기 위한 여러 위젯이 있습니다.

Container

Container 위젯은 단일 자식 위젯을 감싸고, 패딩, 여백, 테두리, 배경색 등을 적용할 수 있습니다.

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Hello, Container!'),
)

Row와 Column

Row와 Column 위젯은 자식 위젯들을 수평 및 수직으로 배치하는 데 사용됩니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.star, size: 50, color: Colors.red),
    Icon(Icons.star, size: 50, color: Colors.green),
    Icon(Icons.star, size: 50, color: Colors.blue),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, size: 50, color: Colors.red),
    Icon(Icons.star, size: 50, color: Colors.green),
    Icon(Icons.star, size: 50, color: Colors.blue),
  ],
)

결론

Flutter에서 위젯은 UI를 구성하는 기본 빌딩 블록입니다. StatelessWidget과 StatefulWidget을 이해하고, 위젯 트리를 통해 복잡한 레이아웃을 구성하는 방법을 알면 Flutter 애플리케이션을 효과적으로 설계하고 개발할 수 있습니다. 기본 위젯을 잘 이해하고 활용하면 더 나은 사용자 경험을 제공하는 애플리케이션을 만들 수 있습니다.

Post Views: 188