С момента выхода бета-версии сообщество Flutter неуклонно растет! Цель этого поста — продемонстрировать, как быстро вы можете разрабатывать приложения с помощью Flutter. Небольшой реальный проект Flutter не превратит вас в опытного разработчика Flutter, но он научит вас основам его разработки.
Содержание
Что такое Flutter?
Команда Google создала фреймворк для мобильной разработки Flutter, который является встроенным Dart. Он предназначен для пользователей мобильных операционных систем, таких как Android и iOS.
«Flutter — это пакет, который позволяет создавать нативные интерфейсы для iOS и Android с рекордной скоростью. Многие разработчики и организации используют Flutter, потому что он легко интегрируется в существующий код. Несмотря на то, что он все еще находится в альфа-версии, похоже, это никого не волнует».
Parse был известным бэкенд-сервисом Facebook, который был закрыт в 2017 году. Если вы создаете свой сервер или используете Back4App, вы все еще можете использовать их SDK и фреймворки для многих платформ, таких как Android и IOS, и это лишь некоторые из них.
Back4App, который использует фреймворк Parse, чтобы предложить бэкэнд.сервисы, будут использоваться в этом примере. В то время как у других платформ есть официальные SDK, у Flutter их нет. Поэтому Back4app предоставляет RESTful API для взаимодействия с нашим бэкендом.
Как начать использовать Back4App
- Пожалуйста, зарегистрируйте аккаунт Back4App.
- После регистрации аккаунта вы увидите опцию «Создать новое приложение». Чтобы дать своему приложению название, нажмите на эту кнопку (скажем, Todo App).
- После этого у вас появится окно, похожее на то, что показано на рисунке 3.
- Этот раздел, Database Browser, показывает вам все классы в вашей базе данных слева. Роль и Пользователь — это предустановленные классы. Настройте класс Todo для хранения данных для каждого создаваемого вами элемента Todo.
- Задача будет храниться в столбце с именем task в новом классе, который вы только что создали. Давайте начнем вечеринку с кодирования, не так ли?
Создайте новый проект Flutter, если вы его еще не создали.
Убедитесь, что ваш основной фокус ясен.
Чтобы убедиться, что мы на одной странице:
- Скопируйте и вставьте приведенный ниже код.
- В папке lib создайте новый пакет под названием UI.
- Создайте новый файл Dart под названием todo screen в пакете UI.
- Запустите Dart, вставив в программу начальный код, приведенный ниже. Для связи с нашим бэкендом нам понадобятся учетные данные ApplicationId и RestApiKey , объявленные в constant. Файл Dart в папке lib.
Model
Создайте пакет под названием model в папке lib и поместите его туда.
Создайте класс модели под названием Todo. Dart в этом пакете для хранения нашего «todo». Введите следующую кодировку в текстовое поле.
Для создания вышеуказанного модельного класса использовался Quicktype.io, который берет схему JSON и превращает ее в модельный класс на вашем любимом языке программирования.
Утилиты для сети
Наша модель и пакет пользовательского интерфейса теперь настроены. Чтобы делать HTTP-запросы во Flutter, нам нужно добавить зависимость HTTP. Теперь, когда она у нас есть, мы можем настроить наш пакет сетевых утилит. Для краткости и экономии времени я буду считать, что вы знаете, как добавлять зависимости в pubspec.YAML.
Теперь создайте пакет network utils в папке lib. Todo utils. Dart должен быть создан в этой папке для обработки всех сетевых вызовов.
Завершите каждую функцию, прежде чем переходить к пользовательскому интерфейсу. В конечном итоге мы будем вызывать эти функции из пользовательского интерфейса.
Включение списка Todo
Давайте поддерживать наш список addTodo() в актуальном состоянии для добавления новых элементов
Поскольку тот же формат будет использоваться для остальных функций, которые мы рассмотрим, я могу быстро описать эту.
Например, переменная __baseUrl хранит глобальный URL, а apiUrl — это конкретный URL для добавления элемента Todo в базу данных приложения.
Чтобы добавить запись в базу данных, мы используем [http](https://pub.dev/packages/http #-installing-tab-) метод post() пакета, предоставляя определенные заголовки, которые мы определили в наших константах. Dart и которые необходимы для аутентификации.
Данные, отправляемые от клиента к серверу, должны быть закодированы в JSON. Поэтому мы используем метод JSON.encode() библиотеки Dart: convert для кодирования карты, созданной Todo.toJson() .
Документацию по каждому запросу можно найти в консоли проекта Back4App в разделе API Reference.
Проделаем то же самое с оставшимися функциями, а именно
getTodoList()
updateTodo()
deleteTodo()
Завершение создания пользовательского интерфейса
В качестве последнего шага, мы создадим пользовательский интерфейс и вызовем функции, которые мы только что написали.
Давайте добавим код для отображения на экране списка всех дел из базы данных. Итак, перейдите к экрану списка дел и приступайте к работе. Dart и внесите следующие изменения в код:
В связи с этим мы ввели функцию getTodoList() , которая обрабатывает получение списков дел на стороне сервера и возвращает разобранные данные в нашу модель класса Todo через JSON.
UI построен с использованием FutureBuilder, поскольку элементы будут возвращены в будущем, когда запрос будет выполнен. До тех пор на экране должен отображаться индикатор выполнения.
Это означает, что экран todo теперь имеет еще две функции.
использовать showAddTodoDialog() и addTodo() соответственно для отображения AlertDialog, запрашивающего подтверждение перед добавлением элемента Todo в базу данных.
Используйте метод showAddTodoDialog() в нашей функции FloatingActionButton’sonPressed() .
Улучшение функциональности списка Todo
Пользователи должны иметь возможность обновлять Todo после их добавления. Для этого будет снова отображаться AlertDialog с текстовым полем , отображающим текущее значение Todo. Пользователь может внести любые изменения в Todo, а затем нажать кнопку Update, чтобы сделать изменения постоянными.
Показ AlertDialog при необходимости обновления существующего Todo и изменение данных Todo в базе данных потребует создания двух новых методов, showUpdateDialog(Todotodo) и updateTodo(), соответственно.
Удалите возможность удаления всех задач из списка.
Сохраним это эссе кратким и по существу, просто вызвав метод для удаления нашего Todo. Чтобы показать диалоговое окно подтверждения, сделайте это.
Используйте метод deleteTodo(String objectId) в обратном вызове onPressed() кнопки удаления, чтобы удалить задачу.
YouTube видео: Использование Parse с Flutter для создания приложения со списком дел
Вопросы и ответы по теме: “Использование Parse с Flutter для создания приложения со списком дел”
Что лучше учить Swift или Flutter?
Swift — отличная платформа, хотя и у Flutter есть ряд преимуществ, включая возможность разработки под множество платформ сразу. Нативная разработка безусловно хороша, но Flutter непрерывно развивается и, возможно, превзойдет Swift.
На каком языке пишутся Flutter приложения?
Какой язык программирования используется во Flutter? Flutter использует язык программирования с открытым исходным кодом Dart, который также разработан в Google. Dart оптимизирован для создания пользовательского интерфейса, и многие его преимущества используются во Flutter.
Какие приложения разработаны на Flutter?
Приложения, написанные на Flutter:* Google Ads.
- Alibaba.
- Square.
- Ebay.
- Hamilton Musical.
- Reflectly.
- Groupon.
- Cryptomaniac.
Что лучше react Native или Flutter?
iOS: По результатам теста Гаусса приложение на Flutter работает в 20 раз быстрее приложения на React Native. Android: приложение на Flutter работает в 15 раз быстрее, чем на React Native, и даже опережает нативное приложение на Swift. Производительность React Native vs. Flutter: Flutter побеждает.
Как долго учить Flutter?
Изучить Flutter с нуля — несложная задача, которая займет от силы 3-4 месяца. В основе платформы лежит язык программирования Dart — еще одна разработка Google. Синтаксис схож со знакомыми многим C#, Java и JavaScript, а значит опытному программисту будет легко обучиться Flutter.
Почему Flutter использует Dart?
В основном разработчиков на этом языке ищут в проектах по мобильной разработке. Дело в том, что на основе Dart написан Flutter — популярный фреймворк для создания мобильных приложений. Поэтому большинство вакансий по Dart — это работа с Flutter и с приложениями под iOS или Android. В этом нет ничего удивительного.
