Добро пожаловать!

Это первая часть моего девлога «100 Days of Flutter», в котором я с нуля изучаю все тонкости разработки приложений на Flutter. Конечной целью является развертывание приложения в магазинах iOS App Store и Google Play в 2023 году.

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

Моя повседневная жизнь относительно несложная. Я работаю инженером по обеспечению надежности сайта, в настоящее время занимаюсь развертыванием инструментов мониторинга производительности приложений на нашем предприятии, поэтому, хотя я провожу много времени, работая напрямую с разработчиками, я не погружаюсь в код, ориентированный на клиента. что часто.

Код, который я пишу, в основном представляет собой Terraform HCL, который я использую для программного развертывания облачных ресурсов для моей команды, а также некоторые легкие сценарии PowerShell для управления этими ресурсами. Время от времени у меня появляется возможность собрать REST API с использованием .NET и C#, и я погружаюсь в различные среды разработки для .NET. такие как Blazor, Xamarin, .NET MAUI и старый добрый ASP.NET Core. Однако, если говорить откровенно, мне очень хотелось заняться чем-то другим.

Флаттер?

Если вы никогда раньше не слышали о Flutter, вы не одиноки — я был в той же лодке, что и на прошлой неделе, и до сих пор имею лишь поверхностное представление о том, что здесь происходит.

Проще говоря, Flutter — это кроссплатформенная среда разработки пользовательского интерфейса, которая использует язык программирования Dart для создания приложений, предназначенных для различных типов устройств из >одна кодовая база. Есть много подобных инструментов; Я специально изучил React Native, .NET MAUI и Ionic; однако, проведя некоторые исследования, я склоняюсь к изучению Flutter из-за его компиляции в собственный машинный код, а не использования javascript для работы на клиентских устройствах. Теоретически это должно повысить производительность приложения после добавления дополнительных расширенных функций.

Вы можете ознакомиться с официальной Документацией по Flutter здесь или, если у вас есть всего несколько минут, посмотреть Видео Flutter за 100 секунд на Fireship.io.

Можете быть немного техническим хипстером, но я верю в технологию и искренне стремлюсь изучить платформу во всей ее полноте.

Ресурсы

Вот ресурсы, за которыми я следил вместе с:

Курс Flutter Firebase v2 от Fireship.io — изначально это был единственный ресурс, за которым я следил, однако, похоже, он использует значительно более старую версию Flutter. Поэтому, прежде чем перейти к более сложным темам, связанным с развертыванием Firebase и магазина приложений, я добавил следующее:

Изучите Flutter и Dart для создания приложений для iOS и Android (2022 г.) — этот курс ведет Максимилиан Шварцмюллер, он гораздо более глубокий и не предполагает наличия опыта программирования. Я пропускал вводные уроки и переходил к мясу и картошке с Флаттером (в настоящее время заканчиваю главу 2).

Оба курса платные. Я склонен считать, что оплата курса требует от меня ответственности (или, по крайней мере, моего кошелька), и считаю, что более дорогие курсы, как правило, предоставляют значительно лучшие инструкции, чем что-то бесплатное на YouTube, и проходят через вещи гораздо более прагматично, чем проектная документация.

1 день

Вот список всего, что я рассмотрел в День 1, замалчивая скучные вещи, такие как установка и настройка моей среды разработки, и уделяя гораздо больше внимания настоящим внутренностям фреймворка.

  1. Установка — Зашел вместе с https://docs.flutter.dev/get-started/install и был честно поражен простотой установки. Есть несколько ключевых моментов, о которых мне нужно было позаботиться в отношении установки инструментов командной строки флаттера и очистки достаточного места на диске для запуска виртуальных устройств Android. Но этот инструмент действительно проведет вас через все, что вам нужно, с помощью команды flutter doctor.
  2. Добавлен в закладки dartpad.dev, чтобы поэкспериментировать с синтаксисом dart вне реальной среды разработки.
  3. Создал новый проект с помощью команды flutter create. Опять же, очень легко начать новый проект, который компилируется сразу после запуска. Сначала структура проекта была для меня немного ошеломляющей, так как мы работаем с папками, соответствующими каждой платформе, на которую вы ориентируетесь, однако, сделав шаг назад, вы понимаете, что есть только две части, о которых нужно беспокоиться разработчику. Это: /lib/main.dart — это точка входа приложения. И pubspec.yaml — где живут все основные и сторонние зависимости. Полная разбивка выглядит следующим образом:
  • Папка .idea — для Android Studio
  • Папка Android — это полноценный проект Android, в который будет скомпилирован наш код флаттера. Очень редко нужно вносить изменения в это
  • Папка сборки — содержит выходные данные нашего флаттер-приложения. Генерируется и управляется flutter sdk, все изменения выполняются автоматически sdk
  • Папка iOS — полный проект iOS, в который будет скомпилирован и внедрен наш код флаттера. Содержит проект xCode
  • папка lib — папка, в которой мы будем делать 99% нашей работы. Куда мы добавим все наши файлы .dart и напишем код дротика
  • папка с тестами — позволяет нам писать автоматические тесты для нашего проекта.
  • файл .metadata — автоматически управляется флаттером
  • Файл .packages — автоматически управляется флаттером для управления внутренними зависимостями.
  • Файл .iml — автоматически управляется Flutter для управления настройками проектов.
  • pubspec.lock — автоматически управляется флаттером. сгенерированный файлом pubspec.yaml с более подробной информацией о зависимостях
  • pubspec.yaml — позволяет нам управлять нашими зависимостями для нашего проекта. управлять шрифтами, статическими изображениями и сторонними пакетами

Анализ приложения по умолчанию

Как упоминалось ранее, файл main.dart является точкой входа для приложения. Я удалил весь шаблонный код и нашел пример «Hello world!» фрагмент на сайте flutter.dev, который выглядит так (у среды нет возможности использовать линтер Dart в разделе фрагментов кода, поэтому я пока буду использовать C#):

import 'package:flutter/material.dart';

void main() {
 rumApp(
  const Center(
   child: Text(
    'Hello, world!',
    textDirection: TextDirection.ltr,
   ),
  ),
 ),
};

Самое интересное здесь то, что приложение Flutter — это просто приложение Dart, которое использует виджеты для создания пользовательского интерфейса. Это такой ключевой момент, во Flutter все — просто виджет!

Кроме того, каждый виджет — это просто класс дротика! С моим опытом работы с языками ООП, такими как C #, это упрощает понимание. Мы создаем экземпляры виджетов (объектов) из пакета flutter/material.dart и переопределяем их внешний вид, который нам нужен. Супер просто!

Есть виджеты для кнопок, изображений, списков и вообще всего, что вам может понадобиться в клиентском приложении. Мы также можем создавать собственные виджеты, чтобы создавать новые виджеты из встроенных виджетов. Вау, сколько виджетов.

Здравствуй, Мир!

Пройдя несколько модулей курса O’Reilly, я узнал действительно ключевую информацию о том, как структурированы эти проекты. Вот более продвинутая реализация с использованием виджетов:

import 'package:flutter/material.dart';

// this is provided in material.dart
// shorthand for functions with explicitely one expression
void main() =>  runApp(MyApp());


// extends is the way to perform inheritance in dart
class MyApp extends StatelessWidget {
 // Widget is the return type for this function
 // every widget in flutter extends Stateless or Stateful widget 
 // which have a build method that is called, and flutter provides the context
 Widget build(BuildContext context) {
  return MaterialApp(
   home: Text("Hello, world"),
  ); // MaterialApp
 }
}

Вот мои ключевые выводы:

  • Material.dart предоставляет нам доступ к API-интерфейсам Flutter, которые являются ключевыми для создания нашего приложения. Нам не нужно беспокоиться о рисовании отдельных пикселей на экране, а только о бизнес-логике, лежащей в основе вызовов API, чтобы структурировать наше приложение так, как мы хотим, чтобы оно выглядело.
  • Каждый класс, который мы собираемся выводить на экран, должен наследоваться от StatelessWidget или StatefulWidget. Они предоставлены в material.dart и предоставляют нам метод build(), который возвращает виджет. Нам необходимо переопределить этот метод логикой нашего приложения, так как он вызывается при создании экземпляра MyApp(). Flutter SDK предоставит BuildContext.
  • build() возвращает виджет, поэтому здесь мы возвращаем экземпляр MaterialApp. Поскольку MaterialApp — это объект, мы возвращаем его конструктор, который переопределяется параметрами, которые мы передаем (в том числе виджетами).
  • Сначала я не был уверен в том, как мы должны передавать параметры нашим конструкторам, поэтому я немного поигрался с конструкторами и обнаружил, что следующий фрагмент кода позволяет передавать именованные аргументы в конструктор класса Dart.
class Person {
 int age = 0;
 String name = "asdf";

 Person({@required this.name, @required this.age});
 // this is called like var Jordan = Person(name: "Jordan", age: 24);
}

Это примерно то, что я получил в День 1! Спасибо, что присоединились ко мне в первый день 100 Days of Flutter. Я очень рад видеть, что будет дальше, и приступить к созданию более эстетичных приложений.