Налаштування архітектури Provider для Flutter-додатків
Provider — найпопулярніший пакет Flutter за кількістю загрузок. Він обертає InheritedWidget у зручний API й позбавляє від необхідності вручну прокидувати залежності через дерево віджетів. Для проектів малого та середнього масштабу Provider — прагматичний вибір: мінімум бойлерплейта, максимум читаємості.
Базова структура з ChangeNotifier
class ProfileNotifier extends ChangeNotifier {
final UserRepository _repository;
ProfileNotifier(this._repository);
UserProfile? _profile;
bool _isLoading = false;
String? _error;
UserProfile? get profile => _profile;
bool get isLoading => _isLoading;
String? get error => _error;
Future<void> load(String userId) async {
_isLoading = true;
_error = null;
notifyListeners();
try {
_profile = await _repository.getProfile(userId);
} catch (e) {
_error = e.toString();
} finally {
_isLoading = false;
notifyListeners();
}
}
}
Реєстрація в дереві віджетів:
MultiProvider(
providers: [
RepositoryProvider(create: (_) => UserRepositoryImpl()),
ChangeNotifierProxyProvider<UserRepositoryImpl, ProfileNotifier>(
create: (ctx) => ProfileNotifier(ctx.read()),
update: (ctx, repo, prev) => prev!..updateRepo(repo),
),
],
child: MyApp(),
)
У віджеті: context.watch<ProfileNotifier>() для підписки на зміни, context.read<ProfileNotifier>() для виклику методів без підписки.
Головна пастка Provider
context.watch() всередині build() пересобирає весь віджет при будь-якому notifyListeners(). Якщо ProfileNotifier викликає notifyListeners() тричі за одну загрузку — три перерисовки. Рішення: Selector<ProfileNotifier, UserProfile?> підписується тільки на конкретне поле, перерисовка тільки при його зміні.
Selector<ProfileNotifier, bool>(
selector: (_, notifier) => notifier.isLoading,
builder: (_, isLoading, __) => isLoading
? const CircularProgressIndicator()
: const SizedBox(),
)
Коли Provider достатньо
Provider підходить: невеликий додаток (до 15–20 екранів), команда 1–2 розробника, нема складних залежностей між екранами. Для додатків з реактивними потоками даних (WebSocket, realtime) або складною навігацією — розглядайте Riverpod або BLoC.
Що налаштовуємо
MultiProvider на рівні MaterialApp. Шарувата структура: repository → notifier → widget. Тестування через ProviderContainer без Flutter-залежності. Зразковий екран як шаблон для команди.
Терміни
Налаштування Provider-архітектури: 1–2 дні. Вартість — після аналізу вимог.