Создание приложения для заметок на Flutter/Dart

0
2165
Добавить в избранное

Хотите изучить новый язык – пожалуйста. Мы подготовили для вас туториал по созданию приложения для заметок на Dart и Flutter.

Flutter – это мобильный кроссплатформенный SDK с открытым исходным кодом от Google. Приложения, написанные на Dart и Flutter, по умолчанию включают в себя Material Design компоненты, что придает привлекательный внешний вид и юзабилити.

Создание приложения для заметок на Flutter/Dart

Инструкция по установке Flutter на официальном сайте.

Во-первых, давайте настроим проект:

  • создадим проект Flutter в Android Studio или в terminal/cmd с помощью команды «flutter create notes«;
  • в dart удалим класс homePage и создадим новый файл с нашим собственным классом homePage, содержащий наш Scaffold (набор виджетов);
  • реализуем stateful класс StaggeredGridPage. Это позволит сделать макет приложения для заметок, содержащий элементы в шахматном порядке.

В приложении для создания шахматной сетки используем Staggered grid, а SQLite – для хранения данных.

Ниже приведен код из pubspec.yaml с необходимыми зависимостями. Добавьте их, сохранитесь и с помощью команды «flutter packages get» инициализируйте новые зависимости:

Создайте класс для заметок. Вам нужна функция toMap для запросов к БД:

В итоге получаем домашнюю страницу HomePage.dart с телом StaggeredGridView. В AppBar поместите кнопку, чтобы пользователь мог переключаться между шахматным и list представлением. А еще, оберните тело в SafeArea для «дружественности» к телефонам.

StaggeredGridView требует четкого указания количества заметок в ряду. В горизонтальном формате на экране телефона или планшета будет организовано по три заметки и две для телефона в портретном формате.

Для отображения заметок используйте плитки. Плитка должна содержать предварительный просмотр заголовка и содержимого заметки. В обработке текста разной длины поможет библиотека авто-разворачивания текста.

Для постраничной навигации у Flutter есть Navigator (как segue в iOS или Intent в Android).

Плитка выглядит примерно так:

Создание приложения для заметок на Flutter/Dart

Теперь реализуйте вьюху для редактирования/создания заметки, обладающую различными функциями в AppBar, например: отмена, архивирование и т. д. Больше дополнительных действий можно вызвать в модальном блоке: поделиться, копировать, удалить и вызов горизонтально-прокручиваемого выбора цвета для смены фона конкретной заметки.

Виджеты NotePage, BottomSheet и ColorSlider разнесите по разным классам и файлам для чистого управляемого кода. Чтобы изменить цвет, выбранный пользователем из ColorSlider, нужно обновить состояние объекта. Подключите виджеты через callback-функции, чтобы они реагировали на изменения, и могли самостоятельно обновляться.

Создание приложения для заметок на Flutter/Dart

Создание приложения для заметок на Flutter/Dart

Понравилось приложение? Поделитесь своими впечатлениями 😉

Интересуетесь мобильной разработкой?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий