Flutter. Переходим из StatelessWidget в StatefulWidget

Введение.

• 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. В следующей статье, я расскажу как создавать асинхронные функции.

Итоговый результат.