위젯(Widgets)

화낼거양

Dec 20, 2024

💡

위젯(Widgets)은 Flutter에서 UI를 구성하는 기본적인 요소입니다. Flutter 애플리케이션에서는 모든 것이 위젯으로 구성되며, 이러한 위젯들은 다시 조합되어 복잡한 UI를 만들 수 있습니다.

위젯의 종류

StatelessWidget:

상태가 변하지 않는 위젯입니다. 한 번 렌더링되면 변경되지 않습니다.

예제:


class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

StatefulWidget:

상태가 변할 수 있는 위젯입니다. 사용자의 상호작용이나 데이터 변경에 따라 UI가 동적으로 변할 수 있습니다.

예제:


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(
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

위젯의 구조

위젯은 기본적으로 트리 구조로 구성됩니다. 루트 위젯이 최상위에 위치하고, 그 아래로 자식 위젯들이 배치됩니다. 이러한 구조를 위젯 트리라고 부릅니다. 예를 들어, MaterialApp이 루트 위젯이라면, 그 아래에 Scaffold가 있고, Scaffold 아래에 AppBar, Body 등의 위젯이 배치됩니다.

위젯의 주요 특징

재사용성: 한 번 정의한 위젯을 여러 곳에서 재사용할 수 있습니다.

구성 가능성: 작은 위젯을 조합하여 더 복잡한 UI를 만들 수 있습니다.

빠른 개발: Flutter의 핫 리로드 기능을 통해 UI의 변경 사항을 즉시 반영할 수 있습니다.

풍부한 위젯 라이브러리: Flutter는 다양한 기본 위젯을 제공하여 개발자가 쉽게 UI를 구성할 수 있도록 합니다.

💡

모든 위젯 설명 주소 : https://docs.flutter.dev/reference/widgets