Урок 4. Создание нового Flutter приложения
Содержание статьи
Теперь, когда у вас было короткое введение, вы готовы начать свое погружение в Flutter разработку. Ваша первая задача – создать базовое приложение с нуля, что даст вам возможность освоить инструменты и базовую структуру приложения Flutter. Вы настроите приложение и узнаете, как использовать несколько популярных виджетов, таких как ListView
и Slider
обновлять его пользовательский интерфейс в ответ на изменения.
Создание простого приложения позволит вам увидеть, насколько быстро и легко создавать кросс-платформенные приложения с помощью Flutter — и это даст вам быстрый результат.
За несколько уроков мы создадим легкое приложение для рецептов. Поскольку вы только начинаете изучать Flutter, ваше приложение предложит жестко закодированный список рецептов и позволит вам использовать a Slider
для пересчета количеств в зависимости от количества порций.
Все, что вам нужно, чтобы начать этот урок, – это настроить Flutter. Если результаты flutter doctor
не показывают ошибок, вы готовы приступить к работе. В противном случае вернитесь к Урок 3. Приступаем к работе с SDK Flutter, чтобы настроить свою среду.
Создание нового приложения
Есть два простых способа запустить новое приложение Flutter. В последнем уроке вы создали новый проект приложения через IDE. Кроме того, вы можете создать приложение с помощью команды flutter. Вы будете использовать второй вариант здесь.
Откройте окно терминала, затем перейдите в папку, в которой вы хотите создать новую папку для проекта. Создание нового проекта очень просто. В терминале выполните:
flutter create recipes
Эта команда создает новое приложение в новой папке с именем recipes. Он имеет демо-код приложения, как вы видели в предыдущем уроке, с поддержкой работы на iOS и Android.
Используя IDE (Android Studio), откройте папку recipes как существующий проект.

Соберите и запустите, и вы увидите то же демо-приложение, что и в Урок 3. Приступаем к работе с SDK Flutter. Нажатие кнопки + увеличивает счетчик.
Кастомизируем приложение
Стартовый шаблон приложения – хороший вариант для начала, потому что команда flutter create
объединяет все шаблоны, чтобы вы могли начать работу сразу. Но это не совсем наше приложение. Это буквально MyApp, как вы можете видеть в верхней части main.dart:
class MyApp extends StatelessWidget {
Это определяет новый dart class
с именем MyApp
, который расширяет — или наследует — StatelessWidget
. В Flutter почти всё, что составляет пользовательский интерфейс, является виджетом (a Widget). A StatelessWidget
не меняется после того, как вы его построите. Вы узнаете гораздо больше о виджетах и состоянии в следующих уроках. А пока просто думайте о классе MyApp
, как о контейнере для приложения.
Поскольку вы создаете приложение для рецептов, вы не хотите, чтобы ваш основной class
был назван MyApp
— вы хотите, чтобы он был назван RecipeApp
.
Хотя вы можете изменить его вручную в нескольких местах, вы уменьшите вероятность ошибки копирования и вставки или опечатки, используя вместо этого действие переименования IDE. Это позволяет переименовать символ в его определении и всех его вызывающих одновременно.
В Android Studio вы найдете этот функционал либо в пункте меню Refactor ▸ Rename, либо щелкнув правой кнопкой мыши на MyApp
в class MyApp...
и перейдя к Refactor ▸ Rename. Переименуйте MyApp в RecipeApp. Результат будет выглядеть так:
void main() {
runApp(RecipeApp());
}
class RecipeApp extends StatelessWidget {
main()
является точкой входа для кода при запуске приложения. runApp()
сообщает Flutter, который является виджетом верхнего уровня для приложения.
Горячая перезагрузка (a hot reload) не будет включать изменения кода, которые вы только что сделали. Для запуска нового кода необходимо выполнить горячий перезапуск (a hot restart). В этом конкретном случае вы не заметите никаких изменений в пользовательском интерфейсе.

Примечание: Как упоминалось в Урок 3. Приступаем к работе с SDK Flutter, когда вы сохраняете изменения, hot reload автоматически запускает и обновляет пользовательский интерфейс. Если этого не происходит, проверьте настройки IDE для Flutter, чтобы убедиться, что он включен. Если вы не хотите, чтобы он запускался при сохранении изменений, вы можете запустить его вручную. Шорткат для Android Studio Command-\.
С помощью горячей перезагрузки вы можете быстро увидеть эффект изменений кода и сохранить состояние приложения. Например, если пользователь находился в состоянии “входа в систему” до изменения кода, горячая перезагрузка сохранит такое состояние, и вам не нужно будет снова входить в систему, чтобы проверить изменения.
Если вы внесли существенные изменения, например добавили новое свойство в состояние или изменили
main()
, как и в приведенном выше случае, вам нужно выполнить горячий перезапуск, чтобы новое изменение было обнаружено и включено в новую сборку.Для еще больших изменений, таких как добавление зависимостей или активов, вам необходимо выполнить полную сборку и запуск.
Стиль приложения
Чтобы продолжить превращение начального шаблона в новое приложение, вы настроите внешний вид своих виджетов. Заменить содержимое build()
в RecipeApp
на:
// 1
@override
Widget build(BuildContext context) {
// 2
final ThemeData theme = ThemeData();
// 3
return MaterialApp(
// 4
title: 'Recipe Calculator',
// 5
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
// 6
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
Этот код изменяет внешний вид приложения:
- Виджет метод
build()
– это точка входа для объединения других виджетов для создания нового виджета. Аннотация@override
сообщает анализатору Dart, что этот метод должен заменить метод по умолчанию изStatelessWidget
. - Тема определяет визуальные аспекты, такие как цвет. Значение
ThemeData
по умолчанию будет отображаться стандартный материал по умолчанию. MaterialApp
использует Material Design и является виджетом, который будет включен вRecipeApp
.- Название приложения – это описание, которое устройство использует для идентификации приложения. Пользовательский интерфейс не будет отображать это.
- Копирование темы и замена цветовой схемы обновленной копией позволяет изменить цвета приложения. Здесь основным цветом является
Colors.grey
и вторичный цветColors.black
. - Мы всё еще используем то же
MyHomePage
виджет как и раньше, но теперь вы обновили заголовок и отобразили его на устройстве.
Когда вы перезапустите приложение сейчас, вы увидите те же виджеты, но они имеют более сложный стиль.

Очистка приложения
Вы тематизировали приложение, но оно все еще отображает демо-версию счетчика. Очистка экрана – ваш следующий шаг. Для начала замените _MyHomePageState
класс:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// 1
return Scaffold(
// 2
appBar: AppBar(
title: Text(widget.title),
),
// 3
body: SafeArea(
// TODO: Replace child: Container()
// 4
child: Container(),
),
);
}
// TODO: Add buildRecipeCard() here
}
Быстрый взгляд на то, что это означает:
Scaffold
обеспечивает высокоуровневую структуру экрана. В этом случае вы используете два свойства.AppBar
получает свойство title с помощьюText
виджет, который имеетtitle
переданный изhome: MyHomePage(title: 'Recipe Calculator')
на предыдущем шаге.body
имеетSafeArea
, который удерживает приложение от слишком близкого приближения к интерфейсам операционной системы, таким как выемка экрана или интерактивные области, такие как индикатор Home в нижней части некоторых экранов iOS.SafeArea
имеетchild
виджет, который является пустымContainer
виджет.
Одна горячая перезагрузка позже, и вы останетесь с чистым приложением:

После подготовки базового шаблона Flutter-приложения можно приступить к непосредственному создание списка рецептов.
Продолжить изучение ➤➤➤ Урок 5. Создание списка рецептов