Поскольку Flutter декларативный, пользовательский интерфейс строится как некоторая функция от состояния
UI = f(state)
Другими словами, UI наблюдает за State-ом.
Будучи Android Java и Kotlin разработчиком, я привык писать все в императивном стиле. Например,
textView.setText("Lorem")
или, на Kotlin
textView.text="Lorem"
С другой стороны, во Flutter, если вы хотите поменять UI, сначала Вам нужно поменять State
State может быть определено как “whatever data you need in order to rebuild your UI at any moment in time”
Stateful и stateless виджеты
Вкратце, Stateful — это аналог var, а stateless — это аналог val переменных в Koltin.
Нельзя поменять состояние StatelessWidget. Его следует использовать в случае, когда UI элемент создается единожды и его состояние не будет меняться. Например, статичный текст, иконки, изображения и т.п..
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Stateless Widget', home: Scaffold( appBar: AppBar( title: Text('Appbar title'), ), body: Center( child: Text('static content'), ), ), ); } }
Stateful виджеты могут меняться в рантайме. Это может быть поле для ввода текста, слайдер, чекбокс и т.п.
Состояние widget’s храниться в объекте State. Когда состояние виджета меняется, этот объект вызывает setState(), сообщая фреймворку о необходимости перерисовать виджет.
Чтобы объявить StatefulWidget необходимо унаследовать StatefulWidget, а также создать State для него
class MyWidget extends StatefulWidget { @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { int _count = 42; // ··· }
Ephemeral state и App state
Начнем с Application state. Этот тип состояния используется когда есть необходимость шарить данные между компонентами приложения: экранами, виджетами или даже сессиями. В этом типе данным вы вероятно захотите хранить, например, пользовательские настройки, корзину покупателя или список элементов, загруженный с сервера.
Ephemeral state — временное состояние — состояние вью, которое может поменяться. Например, текущая страница в PageView, текущий прогресс в ProgressBar или выбранная radioButton в radioGroup