Управление состоянием — один из ключевых аспектов разработки приложений на Flutter. Часто для этой задачи выбирают тяжелые и многофункциональные решения вроде BLoC, Riverpod или GetX. Однако во многих проектах подобная инфраструктура избыточна: не каждое приложение требует сложной архитектуры и дополнительного уровня абстракции.
В данной статье мы расскажем про встроенные инструменты Flutter, которые позволяют реализовать надежный и предсказуемый state-менеджмент без сторонних фреймворков. Вы узнаете, как использовать ValueNotifier и Provider для удобной работы с состоянием и когда такой подход является оптимальным.
Ключевые инструменты
Для реализации простого управления состоянием во Flutter можно использовать инструменты, которые уже доступны в стандартной экосистеме. В данном подходе основную роль выполняют два механизма, обеспечивающие обновление данных и их связь с интерфейсом.
• ValueNotifier — инструмент для хранения одного значения (числа, строки или объекта) и уведомления подписчиков при его изменении. Работает по принципу обновления значения и автоматической передачи этого события слушателям.
• ValueListenableProvider — компонент из пакета provider, который подписывается на ValueNotifier и перестраивает зависимые виджеты при каждом изменении значения. Это позволяет поддерживать интерфейс в актуальном состоянии без дополнительного кода.
Другие простые встроенные варианты
После рассмотрения подхода на основе ValueNotifier и Provider полезно упомянуть и другие встроенные механизмы, которые Flutter предоставляет для управления состоянием. Они решают более узкие задачи и подходят в ситуациях, когда требуется минимальное вмешательство в архитектуру и простая реакция интерфейса на изменения данных.
Управление локальным состоянием с помощью setState()
Самый простой способ управления состоянием — встроенный метод setState() во Flutter. Он идеально подходит для управления локальным состоянием одного виджета.
dart
class SimpleCounter extends StatefulWidget {
@override
_SimpleCounterState createState() => _SimpleCounterState();
}
class _SimpleCounterState extends State<SimpleCounter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('$_counter'),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
),
);
}
}Преимущества:
• Предельно простой и интуитивно понятный механизм.
• Не требует подключения сторонних пакетов.
• Подходит для небольших виджетов с минимальной логикой.
Недостатки:
• Не предназначен для передачи состояния между разными виджетами.
• Частые обновления могут вызывать полное перестроение виджета, что снижает эффективность.
Передача данных по дереву через InheritedWidget
InheritedWidget — это базовый механизм Flutter для эффективной передачи данных вниз по дереву виджетов. Provider построен на его основе.
dart
class MyInheritedData extends InheritedWidget {
final int counter;
final Function() increment;
MyInheritedData({
required this.counter,
required this.increment,
required Widget child,
}) : super(child: child);
@override
bool updateShouldNotify(MyInheritedData oldWidget) {
return counter != oldWidget.counter;
}
static MyInheritedData of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<MyInheritedData>()!;
}
}
// Использование в виджете
Text('${MyInheritedData.of(context).counter}')Когда использовать:
Для простой передачи данных вглубь дерева виджетов
Когда нужно избежать добавления сторонних зависимостей
Для изучения того, как работают более высокоуровневые решения
Управление сложным состоянием через ChangeNotifier
Если ValueNotifier работает с одним значением, то ChangeNotifier может управлять состоянием целого объекта с множеством полей.
dart
class UserSettings extends ChangeNotifier {
String _username = 'Гость';
ThemeMode _themeMode = ThemeMode.light;
bool _notificationsEnabled = true;
String get username => _username;
ThemeMode get themeMode => _themeMode;
bool get notificationsEnabled => _notificationsEnabled;
void updateUsername(String newName) {
_username = newName;
notifyListeners(); // Уведомляем всех слушателей
}
void toggleTheme() {
_themeMode = _themeMode == ThemeMode.light
? ThemeMode.dark
: ThemeMode.light;
notifyListeners();
}
void toggleNotifications() {
_notificationsEnabled = !_notificationsEnabled;
notifyListeners();
}
}
// В приложении
ChangeNotifierProvider(
create: (_) => UserSettings(),
child: MyApp(),
);Пример базового применения: счетчик на основе ValueNotifier
Традиционно знакомство с управлением состоянием во Flutter начинают с простого счетчика. В данном разделе рассмотрим, как реализовать этот пример с использованием ValueNotifier, отделив логику от интерфейса и обеспечив корректное обновление данных.
Создание сервиса состояния
В файле counter_service.dart создаём класс, который будет содержать состояние и логику его изменения. Он выступает в роли хранилища, к которому будет обращаться интерфейс.
import 'package:flutter/foundation.dart';
// Используется ValueNotifier<int>, где хранимым значением является целое число.
// Это значение отслеживается и при его изменении автоматически уведомляются слушатели.
class CounterService extends ValueNotifier<int> {
// В конструкторе вызывается базовый конструктор ValueNotifier
// и задаётся начальное значение состояния (0).
CounterService() : super(0);
// Методы для изменения текущего состояния.
void increment() {
value++; // Изменение значения вызывает автоматическое уведомление слушателей.
}
void decrement() {
value--;
}
// Так как класс наследуется от ValueNotifier, вызов notifyListeners()
// осуществляется автоматически при обновлении value.
}Обеспечиваем доступ к сервису через Provider
На верхнем уровне нашего приложения (обычно в main.dart или app.dart) размещаем созданный сервис в дереве виджетов с помощью Provider. Это позволит любому виджету ниже по дереву получать к нему доступ.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_service.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// Используется ChangeNotifierProvider, так как ValueNotifier
// наследуется от ChangeNotifier и поддерживает механизм уведомлений.
return ChangeNotifierProvider(
create: (_) => CounterService(), // Инициализация экземпляра сервиса состояния.
child: const MaterialApp(
home: MyHomePage(),
),
);
}
}Используем и отслеживаем состояние в интерфейсе
Теперь любой виджет ниже по дереву получает доступ к CounterService и может реагировать на изменения состояния.
Создадим файл my_home_page.dart:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_service.dart';
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
// Используем Consumer.
// Consumer<T> отслеживает изменения в провайдере типа T (в данном случае CounterService).
// При изменении значения в CounterService перестраивается только участок интерфейса внутри билдера Consumer.
return Scaffold(
appBar: AppBar(title: const Text('Простой счетчик')),
body: Center(
child: Consumer<CounterService>(
builder: (_, counterService, __) {
// Внутри билдера доступен актуальный экземпляр CounterService.
// Получаем текущее значение и отображаем его.
return Text(
'${counterService.value}', // Текущее значение из ValueNotifier.
style: Theme.of(context).textTheme.headlineMedium,
);
},
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () {
// Получаем сервис и вызываем метод изменения состояния.
// Provider.of с listen: false не вызывает перестроение текущего виджета,
// поскольку здесь требуется только выполнение действия.
Provider.of<CounterService>(context, listen: false).increment();
},
child: const Icon(Icons.add),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: () {
Provider.of<CounterService>(context, listen: false).decrement();
},
child: const Icon(Icons.remove),
),
],
),
);
}
}Практический пример: переключение темы
Рассмотрим реализацию переключения между светлой и тёмной темой с использованием того же подхода к управлению состоянием.
theme_service.dart
Сервис, отвечающий за хранение и переключение темы приложения.
import 'package:flutter/material.dart';
class ThemeService extends ValueNotifier<ThemeMode> {
ThemeService() : super(ThemeMode.light);
void toggleTheme() {
value = value == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
}
// Геттер для определения текущего режима темы.
bool get isDarkMode => value == ThemeMode.dark;
}main.dart
Подключение ThemeService к дереву виджетов и использование его в MaterialApp.
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_) => ThemeService(), // Передаём ThemeService в дерево виджетов.
child: Consumer<ThemeService>(
// Consumer оборачивает MaterialApp, чтобы приложение обновлялось при смене темы.
builder: (context, themeService, child) {
return MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: themeService.value, // Текущее значение темы из ThemeService.
home: const MyHomePage(),
);
},
),
);
}
}Кнопка переключения темы в MyHomePage
Кнопка, вызывающая смену темы через ThemeService.
// ... inside MyHomePage's build method ...
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// Кнопка смены темы.
FloatingActionButton(
onPressed: () {
Provider.of<ThemeService>(context, listen: false).toggleTheme();
},
child: const Icon(Icons.brightness_6),
),
// ... остальные кнопки ...
],
),Комбинированный пример: список задач (To-Do List)
Давайте создадим более практичный пример — простое приложение для управления списком задач, используя только ValueNotifier и Provider.
Модель данных и сервис состояния
dart
// todo_model.dart
class TodoItem {
final String id;
final String title;
bool completed;
TodoItem({
required this.id,
required this.title,
this.completed = false,
});
}
// todo_service.dart
import 'package:flutter/foundation.dart';
class TodoService extends ValueNotifier<List<TodoItem>> {
TodoService() : super([]);
void addTodo(String title) {
value = [
...value,
TodoItem(
id: DateTime.now().millisecondsSinceEpoch.toString(),
title: title,
),
];
}
void toggleTodo(String id) {
value = value.map((todo) {
if (todo.id == id) {
return TodoItem(
id: todo.id,
title: todo.title,
completed: !todo.completed,
);
}
return todo;
}).toList();
}
void removeTodo(String id) {
value = value.where((todo) => todo.id != id).toList();
}
int get pendingCount => value.where((todo) => !todo.completed).length;
int get completedCount => value.where((todo) => todo.completed).length;
}Интерфейс приложения
dart
// todo_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'todo_service.dart';
class TodoScreen extends StatelessWidget {
final TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Список задач'),
actions: [
Consumer<TodoService>(
builder: (context, service, child) {
return Chip(
label: Text('${service.pendingCount}'),
backgroundColor: Colors.blue,
labelStyle: TextStyle(color: Colors.white),
);
},
),
SizedBox(width: 10),
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: 'Добавить новую задачу...',
border: OutlineInputBorder(),
),
),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () {
if (_controller.text.isNotEmpty) {
Provider.of<TodoService>(context, listen: false)
.addTodo(_controller.text);
_controller.clear();
}
},
child: Text('Добавить'),
),
],
),
),
Expanded(
child: Consumer<TodoService>(
builder: (context, service, child) {
if (service.value.isEmpty) {
return Center(
child: Text(
'Нет задач',
style: TextStyle(fontSize: 18, color: Colors.grey),
),
);
}
return ListView.builder(
itemCount: service.value.length,
itemBuilder: (context, index) {
final todo = service.value[index];
return ListTile(
leading: Checkbox(
value: todo.completed,
onChanged: (_) {
Provider.of<TodoService>(context, listen: false)
.toggleTodo(todo.id);
},
),
title: Text(
todo.title,
style: TextStyle(
decoration: todo.completed
? TextDecoration.lineThrough
: null,
color: todo.completed ? Colors.grey : null,
),
),
trailing: IconButton(
icon: Icon(Icons.delete, color: Colors.red),
onPressed: () {
Provider.of<TodoService>(context, listen: false)
.removeTodo(todo.id);
},
),
);
},
);
},
),
),
],
),
);
}
}Оптимизация производительности
Оптимизация обновлений интерфейса играет важную роль при работе с состоянием во Flutter. Даже при использовании простых механизмов важно контролировать, какие именно части дерева виджетов должны перестраиваться при изменении данных. Flutter и Provider предлагают инструменты, позволяющие минимизировать лишние перестроения и повысить производительность приложения.
Selector вместо Consumer для точных обновлений
Consumer перестраивает виджет при любом изменении состояния. Если в вашем объекте состояния много полей, но виджет зависит только от одного из них, используйте Selector:
dart
// Вместо Consumer<UserProfile>:
Selector<UserProfile, String>(
selector: (context, profile) => profile.username,
builder: (context, username, child) {
return Text('Привет, $username!');
},
)
// Виджет перестроится только когда изменится username,
// даже если другие поля UserProfile изменятся.Кеширование виджетов с помощью child
Используйте параметр child в Consumer и Selector для кеширования статических частей виджета:
dart
Consumer<MyService>(
builder: (context, service, child) {
return Column(
children: [
// Эта часть не будет перестраиваться при каждом обновлении
child!,
// Эта часть перестраивается
Text('${service.value}'),
],
);
},
child: const HeaderWidget(), // Статический виджет
)Когда какой подход использовать?
Выбор подхода к управлению состоянием зависит от конкретной задачи и масштаба вашего приложения. Вот подробное текстовое руководство по выбору.
1. Для локального состояния одного виджета
Используйте setState() — это самый простой и прямой способ. Он идеально подходит, когда состояние нужно только внутри одного виджета и нигде больше не используется. Например, для отслеживания, раскрыт ли аккордеон или активно ли переключатель. Не усложняйте архитектуру без необходимости.
2. Для связи нескольких виджетов на одном экране
Используйте ValueNotifier с ValueListenableBuilder — когда несколько виджетов на одном экране зависят от одного и того же значения. Например, если у вас есть счетчик, который должен отображаться в заголовке и в теле страницы одновременно. Этот подход создает легкую реактивную связь без лишних абстракций.
3. Для состояния, используемого в разных частях приложения
Используйте ValueNotifier или ChangeNotifier вместе с Provider — когда ваше состояние должно быть доступно из различных экранов или глубоко вложенных виджетов. Классические примеры: сервис аутентификации (информация о пользователе), корзина покупок в интернет-магазине или настройки темы приложения. Provider обеспечивает четкое и централизованное управление таким состоянием.
4. Для управления сложным объектом состояния
Используйте ChangeNotifier — когда ваше состояние представляет собой не просто число или строку, а целый объект с множеством полей и методов (например, профиль пользователя с именем, email, аватаркой и методами для обновления). ChangeNotifier позволяет инкапсулировать всю логику и уведомлять об изменениях единым вызовом notifyListeners().
5. Для учебных целей и минимальных зависимостей
Используйте базовый InheritedWidget — если вы хотите глубоко понять, как работают механизмы передачи данных во Flutter, или если в проекте критически важно избегать любых сторонних пакетов. Этот подход является фундаментом, на котором построены все высокоуровневые решения, включая Provider.
Практические рекомендации по выбору
1 Начинайте с самого простого решения, которое решает вашу текущую задачу. Не прогнозируйте избыточную сложность.
2 Эволюционируйте постепенно. Начните с setState() для виджета. Если состояние «переросло» его, поднимите его с помощью ValueNotifier и Provider на уровень выше.
3 Логически группируйте состояние. Не создавайте один огромный сервис на все приложение. Лучше иметь несколько небольших и отвественных сервисов: AuthService, CartService, SettingsService.
4 Избегайте глубокой вложенности Provider'ов в дереве виджетов. Если вам нужно предоставить несколько сервисов, используйте MultiProvider для чистоты кода.
5 Помните, что многие приложения успешно живут на ValueNotifier/ChangeNotifier и Provider. Переход на BLoC, Riverpod или GetX оправдан только тогда, когда вы реально упираетесь в ограничения более простых инструментов, например, при очень сложной асинхронной бизнес-логике или в крупной команде, где нужна строгая архитектура.
Краткий итог: Используйте setState для изолированного, ValueNotifier для общего на экране, а Provider — для общего в приложении. Переходите к более сложным фреймворкам только тогда, когда исчерпали возможности этой простой и эффективной связки.
Выводы: Дальнейшие шаги
Когда текущий стек перестаёт покрывать задачи, можно перейти к более продвинутым инструментам:
Riverpod — современная альтернатива Provider с лучшей безопасностью типов.
BLoC — строгая архитектура для больших команд и сложной бизнес-логики.
GetX — минималистичный и быстрый вариант, когда важна лаконичность.
Но важно помнить: большинство приложений не достигают уровня сложности, требующего этих инструментов. Стек ValueNotifier + Provider остаётся оптимальным для широкого спектра задач.