Flutter不规则底部导航

目录

实现效果

实现代码

import 'package:bottomnav/pages/HomePage.dart';
import 'package:bottomnav/pages/MinePage.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var pages = [HomePage(),MinePage()];
  var currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("自定义底部导航"),
        ),
        body: pages[currentIndex],
        floatingActionButton: FloatingActionButton(onPressed: null,child: Icon(Icons.adb),),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞
          child: Row(
            children: [
              IconButton(icon: Icon(Icons.home , color: currentIndex == 0?Colors.blue:Colors.grey),onPressed: ()=>changePage(0)),
              SizedBox(), //中间位置空出
              IconButton(icon: Icon(Icons.person, color: currentIndex == 1?Colors.blue:Colors.grey),onPressed: ()=>changePage(1)),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部导航栏横向空间
          ),
        ));
  }

  void changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

这里主要就是将bottomNavigationBar设置为BottomAppBar，并通过shape属性将FloatingActionButton所在位置的下方打一个圆形的洞，然后通过指定floatingActionButtonLocation为FloatingActionButtonLocation.centerDocked让FloatingActionButton显示在中间

案例源码

https://gitee.com/itfitness/circle-bottom-nav