如何在flutter中制作这种类型的底部导航栏？

如何解决如何在flutter中制作这种类型的底部导航栏？

Flutter bottom navigation bar

我需要在Flutter中制作这种类型的底部导航栏，其中所选项目将像主页按钮一样突出显示。任何人都可以帮忙吗？

解决方法

使用这个plugin

并将此代码放入您的脚手架小部件中。

bottomNavigationBar: CurvedNavigationBar(
  backgroundColor: Colors.blueAccent,items: <Widget>[
    Icon(Icons.add,size: 30),Icon(Icons.list,Icon(Icons.compare_arrows,],onTap: (index) {
    setState(() {
      _page = index;
    });
  },),

如果您想以编程方式更改页面（如导航到另一个页面的按钮）。

添加这些变量，

int _page = 0;
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

然后将此属性添加到将导航到另一个页面的按钮中

ElevatedButton(
  child: Text('Your Button'),onPressed: () {
    final CurvedNavigationBarState? navBarState =
      _bottomNavigationKey.currentState;
    navBarState?.setPage(1);//this will navigate to page at index 1
  },)

你的代码应该是这样的

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

void main() {
  runApp(Home());
}

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

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

class _HomeState extends State<Home> {
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
  int _page = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,items: <Widget>[
          Icon(Icons.add,onTap: (index) {
          setState(() {
            _page = index;
          });
        },body: Center(
        child: ElevatedButton(
          child: Text('Your Button'),onPressed: () {
            final CurvedNavigationBarState? navBarState =
                _bottomNavigationKey.currentState;
            navBarState?.setPage(1);
          },)
    );
  }
}

有关详细信息，请查看 plugin's page