Flutter – 自定义BottomBar

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),
      ),

第 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 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！