Во второй части нашей FlutterIn5Series мы собираемся создавать виджеты за 5 простых шагов. В частности, мы собираемся создать информационную панель в AppBar вместе с простой нижней навигационной панелью, как показано на изображении ниже:
Поскольку мы уже создали список карт в прошлом, в этом посте предполагается, что у читателей уже есть код, необходимый для отображения списка карт. Если нет, ознакомьтесь с нашим постом, который поможет вам его создать:
Предпосылки:
- Код списка флаттер-карт из урок 1.
typicons_flutter: ^0.2.1 dependencyбудет добавлен в pubspec.yaml. Мы собираемся использовать этот пакет для рендеринга значков, отображаемых на панели навигации внизу.
5 шагов по созданию панели инструментов Flutter ™ App Bar
›› Шаг 1. Создание базовой панели приложений
На этом этапе мы собираемся создать панель приложений и нижнюю панель навигации как два виджета.
Преимущества использования их в качестве виджетов:
- Возможность повторного использования
- Легко читаемый код
Сначала создайте пакет / папку с именем «widgets» в папке «lib». Создайте два файла с дротиками под виджетами -
- custom_app_bar.dart
- custom_bottom_bar.dart
Откройте custom_app_bar.dart и создайте виджет без сохранения состояния под названием «CustomAppBar» и импортируйте необходимые пакеты. Добавьте в виджет примесь, чтобы использовать класс PreferredStateWidget. Мы делаем это, потому что мы будем вызывать этот виджет в атрибуте appBar Scaffold.
Добавьте эту строку вне метода сборки виджета. Используя это, мы можем установить высоту нашего CustomAppBar.
@override // TODO: implement preferredSize Size get preferredSize => Size.fromHeight(100.0);
Поскольку мы стремимся создать повторно используемую панель приложений, мы позволяем параметризовать несколько основных вещей, таких как t itle, ведущий значок и ab oolean value для отображения или скрыть приборную панель. Это дает нам возможность повторно использовать один и тот же AppBar, передав некоторые значения.
Затем мы объявляем три переменные подходящего типа и добавляем их в качестве параметров в CustomAppBar конструктор.
Ниже приведен код, включающий все вышеперечисленное:
Примечание. Мы объявили значения по умолчанию для title и bottomBar в конструкторе. Если мы передадим другое значение при вызове этого виджета, новое значение переопределит старое значение.
import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;
class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
String title;
IconData icon;
bool bottomBar;
//constructor
CustomAppBar(
{this.title = ‘Crypto Currency Dashboard’,
this.icon = Icons.menu,
this.bottomBar = true});
@override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.white,
elevation: 5,
leading: IconButton(icon: Icon(icon)),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.settings,
color: Colors.black,
),
),
],
);
}
@override
// TODO: implement preferredSize
Size get preferredSize => Size.fromHeight(100.0);
}
›› Шаг 2. Добавьте заголовок и значки в нашу панель приложений.
На этом этапе мы добавим заголовок, ведущий значки и значки действий.
Добавьте приведенный ниже код в класс AppBar -
title: Text( title, style: TextStyle(color: Colors.black), ), leading: IconButton( icon: Icon(icon), color: Colors.black, ), actions: <Widget>[ IconButton( icon: Icon( Icons.settings, color: Colors.black, ), ), ],
›› Шаг 3. Добавьте контент в AppBar
На этом этапе мы добавляем содержимое панели мониторинга, создавая строку с FlatButtons в качестве дочерних элементов.
Почему именно FlatButtons?
Преимущество использования FlatButtons заключается в том, что нам не нужно явно добавлять для него границу. Мы можем просто добавить цвет фона и добавить текст в дочерний элемент. Я пока не добавлял цвет фона. При желании они могут добавить этот код в FlatButton:
onPressed: (){},
color: Color(0xFFE7EAED),
Без использования onPressed кнопка будет отключена. Следовательно, любой добавленный цвет не будет отображаться на кнопке.
Дополнительным преимуществом использования FlatButton является то, что в сценарии, когда необходимо создавать отдельные экраны, отображающие подробные данные о каждом виджете, мы просто добавляем код навигации в метод onPressed.
Затем мы добавляем приведенный ниже код в раздел dashboard.dart:
Widget moneyValues() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
child: RichText(
text: TextSpan(
text: ‘\$6091.12’,
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.black,),
children: [
TextSpan(
text: ‘\nTotal Value’,
style: TextStyle(
color: Colors.grey, fontWeight: FontWeight.bold))
]),
),
),
FlatButton(
child: RichText(
text: TextSpan(
text: ‘+13.18’,
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.green),
children: [
TextSpan(
text: ‘\n24 Hour’,
style: TextStyle(
color: Colors.grey, fontWeight: FontWeight.bold))
]),
),
),
FlatButton(
child: RichText(
text: TextSpan(
text: ‘+676.25%’,
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.green),
children: [
TextSpan(
text: ‘\nTotal Gain’,
style: TextStyle(
color: Colors.grey, fontWeight: FontWeight.bold))
]),
),
)
],
);
}
Теперь вызовите этот метод из AppBar. Добавьте приведенный ниже код в класс AppBar. Вот как это выглядит:
bottom: PreferredSize( child: Column( children: <Widget>[ bottomBar == true ? moneyValues() : SizedBox( height: 20, ) ], )),
«Bottom» используется для добавления содержимого в нижнюю часть панели приложений.
За этим следует вызов CustomAppBar из Scaffold в dashboard.dart, как показано ниже:
home: Scaffold( appBar: CustomAppBar(), body: Container( … ); … );
›› Шаг 4. Создание виджета нижней панели
Чтобы создать виджет BottomBar, мы сначала открываем custom_bottom_bar..dart и создаем statelessWidget с именем CustomBottomBar и импортируем необходимые пакеты, показанные в приглашениях.
Затем верните виджет BottomBar в «методе сборки виджета» и добавьте «row» в качестве его дочернего элемента. Давайте посмотрим, как выглядит код для этого:
import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;
class BottomNavBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
],
),
color: Colors.white,
);
}
}
›› Шаг 5. Добавьте IconButtons в дочерние элементы.
На этом последнем шаге мы собираемся использовать пакет «Typicons» для добавления значков под дочерними элементами. Импортируйте то же самое в этом классе.
Приведенный ниже код отображает четыре значка:
IconButton(
iconSize: 30.0,
color: Colors.pinkAccent, //set color to mock active page color
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.wb_sunny),
onPressed: () {},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Typicons.arrow_shuffle),
onPressed: () {},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.explore),
onPressed: () {},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.account_balance_wallet),
onPressed: () {},
),
За этим следует вызов CustomBottomBar из виджета Scaffold в dashboard.dart.
Для этого добавьте строку ниже в разделе Scaffold:
bottomNavigationBar: CustomBottomBar(),
Вот как выглядит результат:
Теперь мы успешно создали многоразовый AppBar с базовой панелью мониторинга и BottomBar.
Давай, попробуй себя и обязательно рассчитай время!
DLT Labs является товарным знаком DLT Global, Inc. Flutter ™ является товарным знаком Google LLC, и его использование здесь не означает одобрения или принадлежности.
Автор - Арун Кашьяп Карри, DLT Labs ™
Об авторе: Арун Кашьяп Карри является активным учеником и увлеченным веб-разработчиком и разработчиком мобильных приложений. Он работал над Angular, Node.js, Flutter, RPA, Chatbots и еще несколькими технологиями. В DLT Labs Арун работал над такими приложениями, как Element DB, DL Certify (Mobile) и We Agree.
использованная литература
Https://dribbble.com/shots/3978619-Mobile-Cryptocurrency-Wallet
