플러터(Flutter)는 크로스 플랫폼 모바일 앱을 만들기 위한 Google의 UI 프레임워크입니다. 플러터 앱을 개발할 때 상태관리는 중요한 과제 중 하나입니다. 여러분의 애플리케이션이 컴포넌트 간의 상태를 효율적으로 관리한다면, 사용자 경험을 향상시키고 코드를 더 재사용하기 쉽게 할 수 있습니다.
이번 글에서는 플러터(Flutter) 앱을 개발할 때 사용할 수 있는 다양한 상태관리 패키지에 대해 알아보겠습니다.
목차
Provider
Provider는 플러터에서 가장 인기 있는 상태관리 패키지 중 하나입니다. Provider는 간단하고 직관적인 API를 제공하며, 상태 및 데이터를 유지하고 관리하기 위한 기능을 제공합니다. 또한, ChangeNotifier나 Stream과 같은 기본형을 이용하여 데이터의 변화를 감지하고 화면을 자동으로 갱신할 수 있습니다.
아래는 Provider를 사용하여 상태를 관리하는 간단한 예제 코드입니다.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => Counter(),
child: MaterialApp(
home: MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final counter = Provider.of<Counter>(context);
return Scaffold(
appBar: AppBar(
title: Text('Provider Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
Text(
'${counter.count}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => counter.increment(),
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
GetX
GetX는 가벼우면서도 강력한 플러터 상태관리 라이브러리입니다. GetX는 의존성 주입(Dependency Injection), 라우팅, 상태관리, 및 다양한 유틸리티를 편리하게 제공합니다. 또한, 상태 변화를 감지하여 화면을 자동으로 갱신하거나, 다른 페이지로 라우팅하는 등의 작업을 매우 쉽게 처리할 수 있습니다.
아래는 GetX 패키지를 사용하여 상태를 관리하는 간단한 예제 코드입니다.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GetX Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GetX<CountController>(
init: CountController(),
builder: (controller) {
return Text('You have pushed the button ${controller.count} times');
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => Get.find<CountController>().increment(),
child: Icon(Icons.add),
),
),
);
}
}
class CountController extends GetxController {
var count = 0;
void increment() {
count++;
update();
}
}
Riverpod
Riverpod는 플러터 애플리케이션을 위한 강력하고 직관적인 상태관리 라이브러리입니다. Riverpod는 의존성 주입(Dependency Injection)과 상태 관리를 위한 다양한 기능을 제공하며, Flutter의 Provider 패키지의 미래 버전으로 간주되고 있습니다. Riverpod는 Provider 패키지보다 더욱 강력한 기능을 제공하며, 코드의 가독성도 향상시킬 수 있습니다.
아래는 Riverpod를 사용하여 상태를 관리하는 간단한 예제 코드입니다.
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
runApp(MyApp());
}
final countProvider = StateProvider((ref) => 0);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ProviderScope(
child: MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Riverpod Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Consumer(
builder: (context, watch, child) {
final count = watch(countProvider).state;
return Text('You have pushed the button $count times');
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => context.read(countProvider).state++,
child: Icon(Icons.add),
),
),
),
);
}
}
결론
플러터(Flutter)에서 상태관리는 매우 중요한 부분이며, 위에서 소개한 Provider, GetX, Riverpod는 그 중에서도 많은 사용자들에게 선호되는 패키지들입니다. 여러분 스스로의 프로젝트에 맞는 적절한 상태관리 패키지를 선택하여 효율적으로 앱을 개발하시기 바랍니다.
참고문헌: