State Management với Provider

Giới thiệu State Management

Quản lý state là một trong những khía cạnh quan trọng nhất trong Flutter development.

Provider Pattern

Provider là package state management được recommend chính thức bởi Flutter team.

Setup Provider

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

Tạo Model với ChangeNotifier

import 'package:flutter/foundation.dart';

class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }

  void reset() {
    _count = 0;
    notifyListeners();
  }
}

Sử dụng Provider trong Widget

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Provider Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pushed the button this many times:'),
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => context.read<CounterModel>().increment(),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 8.0),
          FloatingActionButton(
            onPressed: () => context.read<CounterModel>().decrement(),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

MultiProvider Setup

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterModel()),
        ChangeNotifierProvider(create: (context) => ThemeModel()),
        ChangeNotifierProvider(create: (context) => UserModel()),
      ],
      child: MyApp(),
    ),
  );
}

Selector để Optimize Performance

Selector<CounterModel, int>(
  selector: (context, counter) => counter.count,
  builder: (context, count, child) {
    return Text('Count: $count');
  },
)

Best Practices

• Sử dụng Consumer ở mức widget thấp nhất có thể
• Dùng Selector khi chỉ cần một phần của state
• Tách business logic ra khỏi UI