Flutter. Установка и настройка окружения

Что такое Flutter?

Это мощный UI фреймворк от компании Google, который позволяет создавать кроссплатформенные и мультиплатформенные приложения, используя одну и ту же кодовую базу.

Это означает, что можно создавать приложения, которые работают на платформах:

• Android, iOS, Аврора ОС
• Windows, macOS, Linux
• Web

При сильном желании можно запустить на cмарт-часы, навигаторы и smart TV

SDK, нативная разработка и язык Dart

Software Development Toolkit (SDK) — это готовый набор инструментов для разработки программного обеспечения.

Нативная разработка: Без такого кроссплатформенного решения, для каждой отдельной платформы приходится писать приложения на своих родных (нативных) технологиях.

Язык программирования Dart:

• Для разработки под Flutter используется современный язык программирования Dart.
• Он легок в освоении и позволяет создавать эффективные приложения.
• Dart использует виртуальную машину (VM), что позволяет использовать горячую перезагрузку.

Как работает Flutter?

Flutter позволяет использовать один и тот же код для разных платформ. Некоторые части кода необходимо адаптировать под конкретную ОС, но большая часть кода остается неизменной.

Flutter-приложения работают так же быстро, как нативные (до 120fps), благодаря собственному рендерингу и виджетам.

Киллер-фича — hot reload: приложение автоматически обновляется при изменении кода без пересборки.

Flutter использует декларативный стиль разработки, похожий на HTML, CSS, XML. Среди других декларативных фреймворков — React, Jetpack Compose, SwiftUI.

Виртуальная машина и инструменты для разработки

Виртуальная машина (VM): Программное обеспечение, создающее виртуальную среду для запуска программ независимо от ОС.

Для написания кода можно использовать любой редактор. Для Android Studio, IntelliJ IDEA и VS Code есть специальные плагины.

В этом курсе используется Visual Studio Code — скачать.

Примеры приложений и история

• DNS
• Яндекс Go
• Магнит
• Все сервисы Google

Историческая справка: Flutter был создан для повышения производительности веб-приложений. Язык Dart выбран за высокую производительность, строгую типизацию и поддержку ООП, реактивного и асинхронного программирования. Важную роль играет графический движок Skia (работает с GPU через Vulkan/Metal). Сейчас Flutter переходит на новый движок Impeller (по умолчанию на iOS с 3.10).

Установка Flutter SDK на Windows

1. Установка Git for Windows:

• Перейдите на сайт https://git-scm.com/download/win и скачайте Git for Windows.
• Установите Git, следуя инструкциям.

2. Установка Android SDK:

• Самый простой способ — установить Android Studio (ссылка), она включает все необходимые инструменты.

3. Загрузка Flutter SDK:

• Перейдите на официальную страницу и скачайте zip-архив Flutter SDK.
• Распакуйте архив в папку C:\flutter.

4. Добавление Flutter в переменные среды:

Путь до директории: C:\flutter\bin

Откройте “Изменение переменных среды текущего пользователя”, найдите переменную Path, нажмите “Изменить”, затем “Создать” и введите путь к папке bin Flutter SDK.

5. Проверка установки: Откройте командную строку и введите flutter. Если выводится справка — всё установлено правильно.

Обновление Flutter SDK: flutter upgrade — обновление Flutter.

Проверка окружения: flutter doctor

Настройка VS Code

Откройте пустой проект в VS Code. Установите расширения:

Flutter Dart Flutter Widget Snippets Awesome Flutter Snippets Pubspec Assist Error Lens

Редактор кода VS Code мы уже устанавливали в курсе по Dart. Если не устанавливали — вернитесь к гайду по установке и настройке VS Code.

Создание и запуск нового Flutter проекта

Через терминал

• Создайте папку для проектов, например Dev.
• Откройте терминал и перейдите в папку Dev с помощью cd.

• Создайте проект командой flutter create flutter_course

• Откройте проект в VS Code: cd flutter_course и code .

Через VS Code

• Выберите тип приложения, укажите папку и название, проект будет создан автоматически.

Первый запуск проекта

Выберите целевую платформу (например, Android эмулятор или Chrome).

Откройте файл main.dart в папке lib.

Запуск приложения

• Нажмите F5 или используйте меню Run.
• Можно также использовать flutter run в терминале.

Первый запуск на Android может занять время из-за настройки Gradle. Последующие запуски быстрее.

Можно запускать и в Chrome — сборка быстрее, проект откроется как web-приложение.

Демо-проект — это кликер: жмите на кнопку, счётчик увеличивается на 1.

Измените текст в Text(...) и сохраните файл — изменения появятся мгновенно благодаря Hot Reload!

Панель управления и документация

При запуске приложения появляется дебаг-панель для управления:

• Молния — HOT RELOAD
• Зелёная стрелка — HOT RESTART
• Красный квадрат — остановка приложения
• Синяя лупа — инспектор виджетов
• Первые четыре иконки — для дебага приложения

Документация:

• https://docs.flutter.dev/
• https://dart.dev/language

Структура Flutter проекта и работа с Git

Обзор структуры Flutter проекта:

• android, ios, linux, macos, web, windows — директории для запуска на разных платформах
• build — билды и кэш
• test — тесты
• lib — основной код на Dart
• pubspec.yaml — конфигурация и зависимости

Важно: для правильной работы pubspec.yaml используйте отступы в 2 пробела для вложенных элементов.

Работа с Git и GitFlic (или GitHub):

git config --global user.name "ТВОЙ USERNAME"
git config --global user.email "ТВОЙ EMAIL"
git init
git add .
git commit -m "Initial commit"
git remote add origin https://gitflic.ru/project/ТВОЙ_АККАУНТ/course_2025.git
git push -u origin master

Ссылку на репозиторий получите на сайте GitFlic или GitHub.