Каждый Flutter-разработчик знаком с понятием состояния (state) в приложении. Сегодня мы поговорим о тех состояниях, которыми можно управлять, разберемся в классификации и рассмотрим их отличия.
Управляемые состояния Flutter-приложения можно разделить на два вида — эфемерное состояние (Ephemeral state) и состояние приложения (App state).
➡️ Эфемерное состояние еще можно назвать локальным состоянием. Это понятие очень точно описывает саму суть — такой вид состояния управляет только одним виджетом и не распространяется вне его контекста. Оно «живет» только вместе с конкретным виджетом, к которому привязано. Официальная документация в пример приводит текущую страницу PageView или выбранную вкладку BottomNavigationBar.
Самая простая реализация эфемерного состояния — использование Stateful-виджета и метода setState().
Для еще более простого понимания рассмотрим пример кастомного текстового поля с кнопкой очистки, которая должна отображаться, когда поле заполняется текстом. Создадим Stateful-виджет CustomTextField, State которого будет выглядеть следующим образом:
class _CustomTextFieldState extends State<CustomTextField> {
late final TextEditingController controller;
bool showClearButton = false;
@override
void initState() {
super.initState();
controller = TextEditingController();
controller.addListener(
() => setState(() => showClearButton = controller.text.isNotEmpty),
);
}
@override
Widget build(BuildContext context) {
return TextField(
controller: controller,
decoration: InputDecoration(
suffixIcon: showClearButton
? IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
controller.clear();
setState(() {
showClearButton = false;
});
})
: null,
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
Здесь мы видим очень простой пример эфемерного состояния. А что же такое состояние приложения?
➡️App state — это состояние, которое влияет на несколько виджетов. Может затрагивать и разные части приложения, например, разные экраны. Часто управление такими состояниями реализуется с помощью стейт менеджеров, например, Bloc или Redux.
В качестве примера тут можно привести классическую функцию всех e-commerce приложений — корзину товаров. В приложении стандартно существует страница корзины, где пользователь может посмотреть все ранее добавленные товары, управлять ими, а также оформить заказ. Но кроме этой страницы корзина может влиять на другие части приложения — например, на каталог, где также могут отображаться уже добавленные товары, или на страницу избранных товаров.
В своих проектах, в зависимости от целей и задач, вы можете выбирать любой из видов состояний. Но здесь рекомендую следовать одному принципу — двигаться от малого к большему. Самое эффективное — начинать с эфемерных состояний, а при необходимости масштабировать их до глобальных. Большое количество глобальных состояний сильно усложняет архитектуру приложения, создает множество зависимостей, которые в дальнейшем могут только помешать.
📎Еще больше примеров и деталей можно найти в официальной документации.