Введение.
- StatelessWidget не меняет своего состояния, т.е. он рисует виджеты только 1 раз, с помощью метода build.
- В то время как StatefulWidget, перерисовывает виджеты при вызове метода setState, внутри класса, наследуемого от State.
Далее, создадим счетчик.
Пишем код.
Измените функцию main, таким образом:
void main() {
runApp(
MaterialApp(
home: NewWidget(),
),
);
}
Далее, создайте StatelessWidget с названием NewWidget (как это сделать я говорил здесь).
Этот StatelessWidget, сконвертируйте в StatefulWidget. Для этого:
- Нажмите на надпись StatelessWidget
- Нажмите на лампочку
- В появившемся списке, выберите Convert to StatefulWidget

У вас создастся 2 класса, NewWidget и _NewWidgetState.
Класс _NewWidgetState, переделайте так:
class _NewWidgetState extends State<NewWidget> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Text("Count $_counter"),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_counter++;
setState(() {});
},
child: Icon(Icons.add),
),
);
}
}
Разберем его.
int _counter = 0;
В этой строке, мы создали приватную переменную counter, в которой, будем хранить значение счетчика.
floatingActionButton: FloatingActionButton(
Новая кнопка FloatingActionButton, так же как и другие, использует onPressed и child аргументы.

onPressed: () {
_counter++;
setState(() {});
},
В onPressed, передали функцию, которая:
- Увеличивает _counter на единицу.
- Перерисовывает виджеты на экране, с помощью setState((){})
Кстати, такой вариант тоже работает:
onPressed: () {
setState(() {
_counter++;
});
},
В качестве иконки для кнопки, установили +.
child: Icon(Icons.add),
Теперь, запустите.

Мы получили, почти, полную копию стандартного примера из Flutter.
Заключение.
Теперь, вы можете создавать изменяемые элементы интерфейса с помощью StatefulWidget, и функции setState. В следующей статье, я расскажу как создавать асинхронные функции.
Итоговый результат.
