App Bar 是我们在大多数应用程序中看到的最受欢迎的东西之一。此应用栏用于显示菜单、配置文件和设置以导航到不同屏幕等选项。这是与应用程序通信的最有效方式之一。在本文中,我们将看到如何在Flutter应用程序中实现自定义应用程序栏。
按照以下步骤在我们的应用Flutter应用中实现自定义应用栏:
第 1 步:导航到 main。 dart() 文件并返回 Material App()
首先,我们在 main函数的runApp 中声明了MyApp() 。然后我们为 MyApp 创建了StatelessWidget ,其中我们返回了MaterialApp()。在这个 MaterialApp() 中,我们给出了应用程序的标题,然后将主题声明为 primaryColorSwatch 并给出了绿色。然后我们在家里给出了我们的第一个屏幕或滑块应用程序: BottomBar()
Dart
import 'package:flutter/material.dart';
import 'package:todolistapp/CustomeBottomBar.dart';
void main() {
runApp(MyApp());
}
// stateless widget for my class app
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Geeks for Geeks',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
//first screen of app
home: BottomBar(),
);
}
}
class BottomBar extends StatefulWidget {
@override
_BottomBarState createState() => _BottomBarState();
}
class _BottomBarState extends State {
// given current index
int currentIndex = 0;
setBottomBarIndex(index){
setState(() {
currentIndex = index;
});
}
// Tabs created to display text on each screen
final tabs = [
Center(child: Text("Home",style: TextStyle(color: Colors.white))),
Center(child: Text("Cart",style: TextStyle(color: Colors.white))),
Center(child: Text("Profile",style: TextStyle(color: Colors.white))),
Center(child: Text("Folder",style: TextStyle(color: Colors.white))),
Center(child: Text("Add Items",style: TextStyle(color: Colors.white))),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Geeks for Geeks"),
),
backgroundColor: Colors.white10,
body: tabs[currentIndex],
// Floating action button
floatingActionButton: FloatingActionButton(
onPressed: (){
// given index yo screen
setBottomBarIndex(4);
},
child: Icon(Icons.add,color: Colors.white),
),
Dart
// Bottom Nav Bar
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Icon button 1
IconButton(
icon: Icon(Icons.home,
color: currentIndex == 0 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(0);
},
splashColor: Colors.white,
),
// Icon button 2
IconButton(
icon: Icon(Icons.add_shopping_cart,
color: currentIndex == 1 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(1);
}),
SizedBox.shrink(),
// Icon button 3
IconButton(
icon: Icon(Icons.person,
color: currentIndex == 2 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(2);
}),
// Icon button 4
IconButton(
icon: Icon(Icons.insert_drive_file,
color: currentIndex == 3 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(3);
}),
],
),
),
),
Dart
import 'package:flutter/material.dart';
import 'package:todolistapp/CustomeBottomBar.dart';
void main() {
runApp(MyApp());
}
// stateless widget
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'To Do List',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
// first screen of app
home: BottomBar(),
);
}
}
Dart
import 'package:flutter/material.dart';
// Stateful widget created
class BottomBar extends StatefulWidget {
@override
_BottomBarState createState() => _BottomBarState();
}
class _BottomBarState extends State {
// index given for tabs
int currentIndex = 0;
setBottomBarIndex(index){
setState(() {
currentIndex = index;
});
}
// Number of tabs
final tabs = [
Center(child: Text("Home",style: TextStyle(color: Colors.white))),
Center(child: Text("Cart",style: TextStyle(color: Colors.white))),
Center(child: Text("Profile",style: TextStyle(color: Colors.white))),
Center(child: Text("Folder",style: TextStyle(color: Colors.white))),
Center(child: Text("Add Items",style: TextStyle(color: Colors.white))),
];
@override
Widget build(BuildContext context) {
return Scaffold(
// appbar given
appBar: AppBar(
title: Text("Geeks for Geeks"),
),
backgroundColor: Colors.white10,
body: tabs[currentIndex],
// floating action button in center
floatingActionButton: FloatingActionButton(
onPressed: (){
setBottomBarIndex(4);
},
child: Icon(Icons.add,color: Colors.white),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
// bottom app bar
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// button 1
IconButton(
icon: Icon(Icons.home,
color: currentIndex == 0 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(0);
},
splashColor: Colors.white,
),
// button 2
IconButton(
icon: Icon(Icons.add_shopping_cart,
color: currentIndex == 1 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(1);
}),
SizedBox.shrink(),
// button 3
IconButton(
icon: Icon(Icons.person,
color: currentIndex == 2 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(2);
}),
// button 4
IconButton(
icon: Icon(Icons.insert_drive_file,
color: currentIndex == 3 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(3);
}),
],
),
),
),
);
}
}
第 2 步:设计底部导航栏
现在我们已经声明了底部导航栏,其中我们将颜色设置为白色。之后,我们创建了一个特定高度的容器。在那个容器中,我们提供了 4 个IconButtons()包裹在Row() Widget 中。并给出主轴对齐。在 state 类中,我们设置当前 Index 等于 index 的 state。现在对于每个图标按钮,我们已经声明了不同的图标,并为每个图标声明了onPressed方法。
Dart
// Bottom Nav Bar
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Icon button 1
IconButton(
icon: Icon(Icons.home,
color: currentIndex == 0 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(0);
},
splashColor: Colors.white,
),
// Icon button 2
IconButton(
icon: Icon(Icons.add_shopping_cart,
color: currentIndex == 1 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(1);
}),
SizedBox.shrink(),
// Icon button 3
IconButton(
icon: Icon(Icons.person,
color: currentIndex == 2 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(2);
}),
// Icon button 4
IconButton(
icon: Icon(Icons.insert_drive_file,
color: currentIndex == 3 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(3);
}),
],
),
),
),
完整的源代码:
Dart
import 'package:flutter/material.dart';
import 'package:todolistapp/CustomeBottomBar.dart';
void main() {
runApp(MyApp());
}
// stateless widget
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'To Do List',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
// first screen of app
home: BottomBar(),
);
}
}
第一屏的完整源代码:
Dart
import 'package:flutter/material.dart';
// Stateful widget created
class BottomBar extends StatefulWidget {
@override
_BottomBarState createState() => _BottomBarState();
}
class _BottomBarState extends State {
// index given for tabs
int currentIndex = 0;
setBottomBarIndex(index){
setState(() {
currentIndex = index;
});
}
// Number of tabs
final tabs = [
Center(child: Text("Home",style: TextStyle(color: Colors.white))),
Center(child: Text("Cart",style: TextStyle(color: Colors.white))),
Center(child: Text("Profile",style: TextStyle(color: Colors.white))),
Center(child: Text("Folder",style: TextStyle(color: Colors.white))),
Center(child: Text("Add Items",style: TextStyle(color: Colors.white))),
];
@override
Widget build(BuildContext context) {
return Scaffold(
// appbar given
appBar: AppBar(
title: Text("Geeks for Geeks"),
),
backgroundColor: Colors.white10,
body: tabs[currentIndex],
// floating action button in center
floatingActionButton: FloatingActionButton(
onPressed: (){
setBottomBarIndex(4);
},
child: Icon(Icons.add,color: Colors.white),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
// bottom app bar
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// button 1
IconButton(
icon: Icon(Icons.home,
color: currentIndex == 0 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(0);
},
splashColor: Colors.white,
),
// button 2
IconButton(
icon: Icon(Icons.add_shopping_cart,
color: currentIndex == 1 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(1);
}),
SizedBox.shrink(),
// button 3
IconButton(
icon: Icon(Icons.person,
color: currentIndex == 2 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(2);
}),
// button 4
IconButton(
icon: Icon(Icons.insert_drive_file,
color: currentIndex == 3 ? Colors.green : Colors.grey,
),
onPressed: (){
setBottomBarIndex(3);
}),
],
),
),
),
);
}
}
输出:
想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!