Flutter. Знакомство с Flutter.

Предисловие.

Flutter — это фреймворк для создания приложений под все операционные системы. Начиная с телефонов (ios, android), заканчивая компьютерами на Windows, Linux, MacOs, а также веб-приложениями.

В данной статье, я буду использовать Flutter с VS Code, т.к. VS Code, в отличии от Android Studio и IntelliJ IDEA, не лагает на слабом железе.

Установка среды.

Первое что делаем, это скачиваем архив с Flutter отсюда, и распаковываем его в C:\src\flutter.

Далее, добавьте C:\src\flutter\bin в системную переменную PATH. Чтобы можно было открывать flutter(и остальные файлы находящийся в директории C:\src\flutter\bin), из коммандной строки.

Теперь, введите в коммандной строке, следующую комманду:

flutter doctor

Она проверит, все ли вы установили для работы flutter. В идеале, у вас должно быть так:

У вас, скорей всего, будут проблемы с Android toolchain и Visual Studio — Develop for Windows. Исправим их.

Проблемы с Android toolchain в Flutter.

Запустите Android Studio, нажмите комбинацию Ctrl+Shift+A и откройте SDK Manager. Там установите, Android SDK Command-line tools.

Проблема решена, двигаемся дальше.

Проблемы с Visual Studio — Develop for Windows в Flutter.

У вас должен быть установлен Visual Studio.

Откройте Visual Studio Installer. Выберите свой Visual Studio, и нажмите Изменить.

Установите пакет Разработка классических приложений на C++.

Теперь, запустите в коммандной строке:

flutter doctor

Если вы получили ошибку Bad UTF-8 encoding то:

Проблема «Bad UTF-8 encoding» в Flutter.

Скачайте последний vswhere с github.

И поместите его в папку C:\Program Files (x86)\Microsoft Visual Studio\Installer.

Принимаем Android лицензии.

Запустите в коммандной строке:

flutter doctor --android-licenses

Подтвердите все лицензии, нажимая Y, затем Enter, и так пока лицензии не закончатся.

И установите VS Code, если еще этого не сделали. Теперь, запустите

flutter doctor

По идее, проблемы должны пропасть.

Если этого не произошло, то опишите свою проблему в комментариях, будем разбираться и вместе с этим, дополнять статью.

Запуск Flutter проекта.

Запустите VS Code, в расширениях, установите плагин Flutter.

Нажмите Ctrl+Shift+P, чтобы открыть палитру комманд. Там запустите Flutter: New Project, у вас создастся базовый проект. Запустите его, нажав F5.

Поздравляю, вы завершили установку Flutter. Теперь пора написать свой первый Hello World.

Пишем Hello World.

Удалите все кроме строк import, из базового проекта, и напишите там следующее.

Material(
  child: Text("Hello World"),
)

Этой строкой, мы в качестве аргумента child, установили виджет Text.

Подобная запись.

виджет_или_метод(
  название_аргумента: значение,
)

Позволяет задать аргументы виджета или метода (или функции что одно и тоже), по имени аргумента. Список аргументов, можно узнать, наведя на виджет курсором мыши.

Если хотим вложить один виджет в другой, то устанавливаем значение аргумента child.

Только что мы создали виджет Material, в который поместили виджет Text.

• Text — выводит текст на экран
• Material — меняет стиль вложенных виджетов, чтобы они соответствовали материальному дизайну.

Далее, все это обернем в StatelessWidget.

Для этого, напишите st, и, в появившемся списке, выберите Flutter Stateless Widget

Если список не появился, то нажмите Ctrl+Пробел.

Теперь, в виджете StatelessWidget, нужно реализовать метод build, который отрисовывает все виджеты. Возвращать он будет виджет Material, созданный ранее.

class NewWidget extends StatelessWidget {
  const NewWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Text("Hello World"),
    );
  }
}

Но кто же такой этот StatelessWidget?

StatelessWidget виджет и StatefulWidget.

Если коротко, то:

• StatelessWidget, это виджет без состояния, т.е. он неизменяемый. Метод build вызывается единожды.
• В то время как, StatefulWidget может меняться. Метод build, можно вызывать когда угодно.

Когда это возможно, лучше использовать StatelessWidget, потому-что помимо выигрыша в производительности, вы получаете еще выигрыш в времени компиляции.

С StatelessWidget, зачастую, можно обойтись упрощенной компиляцией Hot Reload (срабатывает при сохранении), в то время как с StatefulWidget работает только с Hot Restart (полная компиляция).

Дописываем приложение.

Виджет создан, осталось создать функцию main, и передать виджет. Перепишите следующий код.

void main() {
  runApp(MaterialApp(home: NewWidget()));
}

Разберем его.

• void main — точка входа в программу
• runApp — принимает в качестве аргумента виджет, и запускает его.
• MaterialApp — виджет, который используется для построения элементов интерфейса, в материальном дизайне. Туда мы передали NewWidget.

Теперь, запустите.

Было бы неплохо, установить надпись Hello World, по центру. Для этого, оберните Text в виджет Center.

return Material(
  child: Center(
    child: Text("Hello World"),
  ),
);

Так, намного лучше.

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