Flutter 상태 관리

flutter에서 상태 관리는 화면의 데이터가 변경될 때 UI에 즉시 반영되도록 하는 중요한 개념입니다.

1. Flutter 기본 상태 관리: StatefulWidget

Flutter의 기본 상태 관리 방식으로, StatefulWidget을 사용하여 상태 변경이 필요한 위젯을 정의합니다. 상태는 setState() 메서드를 통해 업데이트됩니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic State Management'),
      ),
      body: Center(
        child: Text(
          'Counter: $_counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

• StatefulWidget: StatefulWidget은 상태를 변경할 수 있는 위젯입니다. 이 위젯의 상태는 State 클래스에 정의됩니다.
• setState(): 상태가 변경될 때 setState() 메서드를 호출하여 UI가 갱신되도록 합니다.

 

2. Provider를 활용한 상태 관리

Provider는 Flutter에서 권장하는 상태 관리 라이브러리 중 하나로, 전역 상태 관리를 쉽게 구현할 수 있도록 도와줍니다. 앱에서 데이터가 변경되면 해당 데이터를 사용하는 모든 위젯이 자동으로 갱신됩니다.

예제: Provider로 카운터 관리하기

우선 provider 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가하고 패키지를 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

 

 

카운터 앱 - Provider 적용

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterProvider with ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
    notifyListeners();
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterProvider = Provider.of<CounterProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Provider State Management'),
      ),
      body: Center(
        child: Text(
          'Counter: ${counterProvider.counter}',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterProvider.incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

• ChangeNotifierProvider: ChangeNotifier를 사용하는 Provider로 상태가 변경될 때 notifyListeners()를 호출하여 UI를 갱신합니다. 최상위 위젯에 상태를 전달하기 위해 ChangeNotifierProvider를 사용합니다.
• CounterProvider: 상태를 관리하는 클래스로, ChangeNotifier를 상속받습니다. incrementCounter() 메서드가 호출되면 notifyListeners()가 호출되어 UI를 갱신합니다.
• Provider.of<CounterProvider>(context): Provider에서 상태를 가져오는 방법입니다. 이 예제에서는 counterProvider를 통해 counter 값을 가져오고, incrementCounter() 메서드를 호출하여 상태를 변경합니다.

 

상태 관리 방식 선택 시 고려 사항

• 기본 상태 관리 (StatefulWidget): 간단한 UI 변경과 로컬 상태 관리에 적합합니다.
• Provider: 전역 상태를 관리해야 할 때, 여러 화면에서 상태를 공유해야 할 때 유용합니다. 구조적으로 코드가 깔끔해지고 유지보수에 용이해집니다.

 

추가 상태 관리 도구

Provider 외에도 Riverpod, Bloc, GetX 등 다양한 상태 관리 도구가 있습니다. 앱의 규모와 복잡도에 따라 적절한 상태 관리 방식을 선택하는 것이 중요합니다.