Добро пожаловать!
Это первая часть моего девлога «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, замалчивая скучные вещи, такие как установка и настройка моей среды разработки, и уделяя гораздо больше внимания настоящим внутренностям фреймворка.
- Установка — Зашел вместе с https://docs.flutter.dev/get-started/install и был честно поражен простотой установки. Есть несколько ключевых моментов, о которых мне нужно было позаботиться в отношении установки инструментов командной строки флаттера и очистки достаточного места на диске для запуска виртуальных устройств Android. Но этот инструмент действительно проведет вас через все, что вам нужно, с помощью команды flutter doctor.
- Добавлен в закладки dartpad.dev, чтобы поэкспериментировать с синтаксисом dart вне реальной среды разработки.
- Создал новый проект с помощью команды 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. Я очень рад видеть, что будет дальше, и приступить к созданию более эстетичных приложений.