Урок 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'),
  );
}

Этот код изменяет внешний вид приложения:

1. Виджет метод build() – это точка входа для объединения других виджетов для создания нового виджета. Аннотация @override сообщает анализатору Dart, что этот метод должен заменить метод по умолчанию из StatelessWidget.
2. Тема определяет визуальные аспекты, такие как цвет. Значение ThemeData по умолчанию будет отображаться стандартный материал по умолчанию.
3. MaterialApp использует Material Design и является виджетом, который будет включен в RecipeApp.
4. Название приложения – это описание, которое устройство использует для идентификации приложения. Пользовательский интерфейс не будет отображать это.
5. Копирование темы и замена цветовой схемы обновленной копией позволяет изменить цвета приложения. Здесь основным цветом является Colors.grey и вторичный цвет Colors.black.
6. Мы всё еще используем то же 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
}

Быстрый взгляд на то, что это означает:

1. Scaffold обеспечивает высокоуровневую структуру экрана. В этом случае вы используете два свойства.
2. AppBar получает свойство title с помощью Text виджет, который имеет title переданный из home: MyHomePage(title: 'Recipe Calculator') на предыдущем шаге.
3. body имеет SafeArea, который удерживает приложение от слишком близкого приближения к интерфейсам операционной системы, таким как выемка экрана или интерактивные области, такие как индикатор Home в нижней части некоторых экранов iOS.
4. SafeArea имеет child виджет, который является пустым Container виджет.

Одна горячая перезагрузка позже, и вы останетесь с чистым приложением:

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

Продолжить изучение ➤➤➤ Урок 5. Создание списка рецептов