flutter state 개념 및 정리

Flutter에서 State는 위젯의 상태를 관리하는 데 사용됩니다. State는 두 가지 주요 유형으로 나뉩니다: StatelessWidget과 StatefulWidget. 이 두 가지는 서로 다른 방식으로 위젯의 상태를 처리합니다.

 

1. StatelessWidget

 

StatelessWidget은 변경되지 않는 상태를 가지는 위젯입니다. 즉, 한 번 생성되면 상태가 변하지 않습니다. 이러한 위젯은 상태를 가지지 않고, 빌드 시 제공된 데이터로만 렌더링됩니다.

 

예제

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String title;

  MyStatelessWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('Hello, $title!'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: MyStatelessWidget(title: 'Stateless Widget')));

2. StatefulWidget

 

StatefulWidget은 변경 가능한 상태를 가지는 위젯입니다.

StatefulWidget은 자체적으로 상태를 관리하며, 상태가 변경될 때마다 다시 빌드됩니다.

StatefulWidget은 두 개의 클래스가 함께 작동합니다:

StatefulWidget 클래스와 State 클래스.

import 'package:flutter/material.dart';

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 Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: MyStatefulWidget()));

StatefulWidget의 동작 방식

 

1. createState():

• StatefulWidget은 createState 메서드를 통해 State 객체를 생성합니다. 이 객체는 위젯의 상태를 관리합니다.

2. State 객체:

• State 객체는 위젯의 상태를 포함하며, 상태가 변경될 때 setState 메서드를 호출하여 UI를 업데이트합니다.

• setState는 상태를 변경하고, 변경된 상태를 기반으로 위젯을 다시 빌드합니다.

3. initState():

• initState는 State 객체가 처음 생성될 때 호출되며, 초기화 작업을 수행합니다.

4. dispose():

• dispose는 State 객체가 소멸될 때 호출되며, 리소스를 정리하는 작업을 수행합니다.

 

State의 생명주기

 

• initState(): State 객체가 처음 생성될 때 호출됩니다.

• build(): 상태가 변경될 때마다 호출되어 위젯을 다시 빌드합니다.

• didUpdateWidget(): 위젯이 업데이트될 때 호출됩니다.

• dispose(): State 객체가 소멸될 때 호출됩니다.

 

예제

 

아래는 위젯의 상태를 변경하여 UI를 업데이트하는 예제입니다.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Button pressed $_count times',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: CounterWidget()));

참고 자료

 

• Flutter Documentation - State

• Flutter Documentation - StatefulWidget

• Flutter Documentation - StatelessWidget