Flutter: использование пакетов

Не все йогурты одинаково полезны (с)

Иногда стандартных библиотек поставляемых с Fllutter не хватает, а самому что-то писать затруднительно — выходом может служить использование уже написанного и опакеченого кода. Все пакеты Flutter находятся на pub.dev, для добавления любого из пакетов с этого сайта в проект, достаточно добавить в pubspec.ymal проекта зависимость. Например:

После чего Android Studio предложит обновить зависимости. Далее добавим в main.dart импортируемую библиотеку:

Далее непосредственное использование:

Flutter: переход между экранами

Продолжаем работать с приложением из предыдущей статьи.

А что если логика работы приложения не ограничивается одним экраном? Создадим файл /lib/pages/about.dart

А в файл page1.dart добавим связку со страницей:

В результате получим переход на другую страницу:

Можно заметить, что срелка «назад» добавилась автоматичеки. Программно это вызов:

Navigator – виджет-класс, позволяющий управлять стеком дочерних виджетов, т.е. открывать, закрывать и переключать окна или страницы. Когда мы используем MaterialApp, то экземпляр класса Navigator уже создан

Второй способ переключения между экранами

Существует второй штатный способ переключения между экранами. Особой разницы между ними нет, каждый использует по своему усмотрению. Flutter позволяет переключаться между экранами при помощи «маршрутов». Для этого в главном файле вместо вызова home: Page1() добавим маршруты:

И соответственно тогда вызов перехода будет теперь осуществлять вот так:

Flutter: диалоговое окно

В предыдущей статье, мы нарисовали меню. Теперь нужно начинать реализовывать какую-то реакцию на действия в этом меню. Например показать диалоговое окно закрытия приложения. Это правило хорошего тона у приложений — спросить прежде чем окончательно выйти.

Во Flutter за показ диалогов отвечают две фунции, которые работают непосредственно друг с другом в связке:

AlertDialog — подготовка данных для отображения

showDialog — непосредственные вывод диалога пользователю

Оформим диалог в виде отдельно функции:

Добавим вызов диалога из нажатия кнопки выхода:

Результат:

Для любителей диалоговых окон во весь экран (что актуально для мобильных, вот еще вариант:

Результат:

Flutter: реализуем выплывающее меню слева

Меню слева в Flutter реализуется при помощи виджета drawer. Заголовок меню отображается при помощи виджета DrawerHeader, а пункты меню при помощи ListTiles.

В результате добавления к предыдущему примеру (удалите leading: new Icon(Icons.menu), ) кода:

Получим нечто вроде:

Обработка выбора пункта меню происходит в onTap(){} Например закрыть список можно:

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

Разделение пунктов меню:

Добавить фото в заголовок меню:

Может выйти ошибка:

The following assertion was thrown resolving an image codec:
Unable to load asset: ./lib/resources/logo_1200_630.jpg

Для того чтобы исправить, нужно в pubspec.yaml добавить:

В результате получится что-то вроде:

P.S. Открыл для себя https://app.flutterflow.io где UI можно рисовать «визульно», и на выходе получать код.Это таки несколько удобнее и быстрее. Далее буду пытаться использовать этот сервис

Flutter: учимся создавать AppBar

Любое приложение чаще всего запускается с главного экрана, на котором расположено некое меню. С него и начнем. Возьмём приложение из предыдущей статьи, и продолжим «стругать»:

Здесь мы добавили иконку развертываемого меню в левом углу и виджет-кнопку «Выхода» из приложения.

Чтобы реализовать выход из приложения, нужно добавить импорт библиотеки и в OnPressed собственно команду выхода:

Как видите, тут мы уже подобрались к толике кросплатформенности. Что работает на одной платформе, может не работать на другой. И функционал «выхода» в одной из этих специфик.

1 7 8 9 10