Flutter (2)


Вышла книга «Быстрый старт Flutter-разработчика»

Рад поделится новостью: наконец-то закончил обучающий материал по фреймворку Flutter: Быстрый старт Flutter-разработчика

Начав в свое время изучать сей великолепный кросс-платформенный инструмент, обнаружил, что в книжных магазинах совсем отсутствуют книги по Flutter. На разных ресурсах накопилось уже достаточно много обрывочных сведений касательно разработки с помощью Flutter, статей, посвященных Dart, однако книги не нашел. Решил внести свой вклад в популяризацию, написав этот краткий курс молодого Flutter-боца. Пользуйтесь на здоровье!

Всего в книге 10 глав-уроков, первые уроки более простые, последние – более сложные. Помогать в изучении Вам будет уже написанный и работающий код в репозитории проекта – https://github.com/acinonyxjubatus/flyflutter_fast_start – FlyFlutter Fast Start на github –, там для каждого урока выделена своя ветка. Краткое содержание курса:

Урок 1. Запускаем Flutter — научимся запускать проект на Flutter под Android и iOS, а также совершать простейшие манипуляции с виджетами. Помимо этого, узнаем чем может быть полезен Flutter и когда на нем можно создавать приложения.

Урок 2. Язык программирования Dart — Обзорно пройдемся по основным возможностям и правилам языка Dart

Урок 3. StatelessWidget и StatefulWidget — Научимся создавать Stateless и StatefulWidget-ы. Узнаем про состояния виджетов, попробуем ими манипулировать. Также узнаем, как декорировать и выравнивать виджеты.

Урок 4. Создание списка элементов — Познакомимся с ListView, узнаем какие есть способы его создания. Полученные знания применим для создания списка с прогнозами погоды.

Урок 5. Загрузка данных с сервера — Узнаем как можно выполнить асинхронную работу во Flutter. Сделаем запрос на сервер, получим, распарсим и покажем полученную информацию на клиенте. Таким образом, создадим полноценное клиент-серверное приложение.

Урок 6. Inherited Widgets, Elements, Keys — Узнаем, что такое Inherited Widget, а также на примере посмотрим как он работает. Разберемся с тем, что такое Element-ы и как они работают. Помимо этого, мы познакомимся с ключами Keys и узнаем когда и как их нужно использовать.

Урок 7. Навигация между экранами, Работа с Google Maps  — Научимся переключать экраны с помощью Navigator-а.  Сможем подключить и показать карты от Google Maps в приложении, а также подключим дополнительный необходимый в примере пакет timezone.

Урок 8. SQLite, Clean Architecture — Сумеем подключить SQLite и сохранить данные в локальной базе данных, а также прочесть их.  Убедимся, что во Flutter тоже можно и нужно писать чистый код и напишем свою реализацию паттерна Repository.

Урок 9. BLoC, Streams — Узнаем, что такое BLoC, чем он полезен и как использовать библиотеку bloc. Все это применим на практике: мы произведем значительный рефакторинг приложения погоды, придав коду приличествующий вид — повысим читаемость и поддерживаемость.

Урок 10. DI, Тесты — Освоим технику инверсии зависимостей применительно к Flutter разработке. На практическом примере реализуем паттерн Dependency Injection во Flutter в примере приложения погоды. Затем узнаем, какие бывают тесты. Напишем unit-тесты, widget (UI-тесты) и интеграционные тесты для приложения с погодой.

Быстрого и легкого изучения! Жду фидбек на сайте forum.flyflutter.ru в разделе, посвященном книге.




Flutter: Stateful и Stateless виджеты

Поскольку 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