Как устроено состояние во Flutter: локальное состояние, данные приложения, InheritedWidget и Provider

В сфере искусственного интеллекта произошло заметное событие. Friflex_dev 7 минут назад Как устроено состояние во Flutter: локальное состояние, данные приложения, InheritedWidget и Provider Средний 9 мин 148 Блог компании Friflex Flutter * Dart * Обзор Привет, Хабр! Это Аня, руководитель Flutter-команды Friflex, и Катя, Flutter-разработчица Friflex. В этой статье разберем, что такое состояние во Flutter.

Катя расскажет, как отличать локальное состояние от состояния приложения и в каких случаях достаточно setState(). Аня покажет, как передавать данные по дереву виджетов с помощью InheritedWidget, и разберет, как устроен Provider. Что такое состояниеВ самом широком смысле, состояние или state — это все, что хранится в памяти приложения во время его работы: шрифты, текстуры, анимации, UI, переменные.

Технические детали

Но управляем мы далеко не всем. Например, за текстуры отвечает сам Flutter. Нам важнее другое определение: state — это данные, от которых зависит построение пользовательского интерфейса и изменение которых может привести к перестроению UI.

Управляемые состояния Flutter-приложения можно разделить на два вида — эфемерное состояние (Ephemeral state) и состояние приложения (App state). Что такое эфемерное состояниеЭфемерное состояние еще можно назвать локальным состоянием. Это понятие очень точно описывает саму суть — такой вид состояния управляет только одним виджетом и не распространяется вне его контекста.

Оно живет только вместе с конкретным виджетом, к которому привязано. Примеры:текущая страница в PageView;выбранный таб в BottomNavigationBar;прогресс анимации. Такое состояние не нужно сохранять между сессиями и шерить по всему приложению, оно меняется локально.

Отраслевые последствия

Самая простая реализация эфемерного состояния — использование StatefulWidget и метода setState(). Для еще более простого понимания рассмотрим пример кастомного текстового поля с кнопкой очистки, которая должна отображаться, когда поле заполняется текстом. Создадим StatefulWidget CustomTextField, State которого будет выглядеть так:class _CustomTextFieldState extends State { late final TextEditingController controller; bool showClearButton = false; @override void initState() { super.

initState(); controller = TextEditingController(); controller. addListener( () => setState(() => showClearButton = controller. isNotEmpty), ); } @override Widget build(BuildContext context) { return TextField( controller: controller, decoration: InputDecoration( suffixIcon: showClearButton ?

IconButton( icon: const Icon(Icons.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.