Давайте сделаем отличное навигационное меню с флаттером. Навигация - важный аспект большинства приложений. Как и в прошлых статьях, сегодня я выбрал дизайн с pinterest.com.
Я предполагаю, что у вас настроена среда разработки, иначе вы можете следовать инструкциям здесь. Откройте свой терминал и введите следующие команды, чтобы создать приложение и перейти в каталог.
$ flutter create texty_navigation $ cd texty_navigation
Откройте папку с помощью вашего любимого текстового редактора. Весь код будет записан внутри файла lib / main.dart. Откройте этот файл, удалите его содержимое и добавьте следующие строки кода
Во-первых, мы импортировали упаковку материалов, так как внедряем материальный дизайн. Затем мы определяем основную функцию, единственной целью которой является запуск приложения путем вызова виджета runApp. RunApp () раздувает любой переданный ему виджет, прикрепляет его и заполняет виджетом весь экран устройства. Добавьте следующие фрагменты кода ниже в качестве параметра в виджет runApp .
Виджет MaterialApp определяет приложение, использующее материальный дизайн. Он включает в себя несколько свойств: свойство title используется устройством для идентификации приложения для пользователя, свойство theme определяет цвета, которые будут использоваться для виджетов приложения, здесь мы определил свойство primaryColor со значением rgba (55, 113, 170, 1); а свойство home определяет виджет для маршрута по умолчанию для приложения.
Мы не определили TextyNavigation (), затем создайте statefulWidget, как показано ниже. (Прочтите о виджетах с отслеживанием и без сохранения состояния в первом выпуске). Он возвращает виджет Scaffold.
Scaffold реализует базовый макет материального дизайна, он используется для создания виджетов, таких как панель приложения, ящик (боковое меню / навигация), нижний лист и т. Д. Для этой статьи нам нужны только AppBar и Drawer. Измените приведенный выше код, чтобы он выглядел как фрагмент ниже:
Виджет AppBar отображает горизонтальную полосу в верхней части каркаса, и мы устанавливаем для свойств title значение Text (Текстовая навигация). Свойство drawer принимает виджет Drawer; Выдвижной ящик - это горизонтальная панель, которая отображается слева от корпуса строительных лесов. Обычно он скрыт на мобильных устройствах, и вы можете провести пальцем, чтобы открыть его. У Контейнера есть дочерний элемент, цвет мы устанавливаем с помощью виджета BoxDecoration. BoxDecoration используется для раскрашивания или украшения коробки, например: для определения границ, добавления изображений, рисования фигур и т. д.
Сохраните изменения, запустите эмулятор и запустите приложение.
$ open -a Simulator $ flutter run
Ваше приложение должно выглядеть так:
Дизайн состоит из двух разделов: раздела профиля и элементов навигации. Сначала мы создадим раздел профиля. Он содержит картинку, которую вы добавите в свой проект. Для этого создайте папку под названием assets внутри папки приложения (вы можете называть ее как угодно) и добавьте изображение своего профиля. Откройте файл pubspec.yaml и добавьте следующие строки кода под ключ флаттера, как показано ниже. Это необходимо для доступа и использования только что добавленного изображения:
flutter: assets: - image-name.png
Создадим виджет для отображения раздела профиля. Назовем его makeProfileAvatar ().
Итак, наш виджет возвращает столбец со списком дочерних элементов. К дочерним элементам относятся виджет CircleAvatar для отображения изображения профиля, виджет SizedBox высотой 10,0 и два виджета Center для централизованного отображения имени и местоположения профиля.
Далее мы создадим каждый пункт меню. Создайте виджет, который принимает в качестве параметров изображение значка и текст; и он возвращает виджет столбца. Каждый вызов виджета создает пункт меню для навигации.
Приведенный выше код довольно прост. Виджет возвращает список дочерних элементов: по центру для отображения значка меню, SizedBox и по центру для отображения метки меню. Мы применили размеры и стили шрифта к значку и тексту соответственно.
Нам нужно разместить пункты меню в сетке. Для этого у Flutter есть виджет GridView. Мы создадим новый виджет menuGrid (), который будет возвращать GridView.count пунктов меню. Вот код для этого:
Мы устанавливаем crossAxisCount на значение 2, чтобы отобразить сетку из двух столбцов. Свойство children принимает список пунктов меню путем вызова makeMenuItem (Icon, text).
Наконец, нам нужно добавить makeProfileAvatar () и menuGrid () в Drawer. Давайте еще раз вернемся к нашему виджету Scaffold, на этот раз дочернему свойству для контейнера внутри ящика и установим для него значение столбца, который, в свою очередь, вернет список дочерних элементов. Мы использовали виджет Expanded, который расширяет дочерний элемент строки, столбца или Flex и использует коэффициент гибкости для разделения доступного пространства между дочерними элементами. Мы установим дочерние элементы на makeProfileAvatar () и menuGrid (). См. код ниже
Сохраните изменения и протестируйте свой дизайн
$ flutter run
Ваше приложение должно выглядеть примерно так:
В будущих доработках мы попытаемся исправить текстовые шрифты для пунктов меню и фонового изображения ящика. На момент написания этой статьи у меня их нет. Кроме того, на момент написания этой статьи Flutter не поддерживает наброски значков материального дизайна.
ЗДЕСЬ ИСХОДНЫЙ КОД ДЛЯ ЭТОГО ПРИМЕРА https://github.com/shubie/texty-navigation
Вы можете связаться со мной в твиттере https://twitter.com/@afegbuas
Спасибо, что прочитали, и продолжайте волноваться .. !!!
