Flutter - 如何制作弯曲类型的自定义底部导航栏答案

【问题标题】：Flutter - How to make curved type of custom bottom navigation barFlutter - 如何制作弯曲类型的自定义底部导航栏
【发布时间】：2021-03-23 09:39:00
【问题描述】：

enter image description here

我想做这种底部导航栏，谁能帮忙？

【问题讨论】：

标签： flutter

【解决方案1】：

您可以使用Scaffold 的floatingActionButtonLocation 属性停靠您的FloatingActionButton。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: const Center(child: const Text('asdfasdfasdf')),
        floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
        floatingActionButton: Container(
          margin: const EdgeInsets.only(right: 55),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 5),
          ),
          child: FloatingActionButton(
            onPressed: () {},
            elevation: 0,
            backgroundColor: Colors.red,
            child: const Icon(Icons.star_purple500_sharp),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          onTap: (int i) {},
          backgroundColor: Colors.red,
          currentIndex: 0,
          type: BottomNavigationBarType.fixed,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

我想要可移动的图标，不固定在末端，，，将图标移动到当前选定的索引
当所选索引发生变化时，您可以只调整margin。

【解决方案2】：

你可以试试bottomNavigationBar中的curved_navigation_bar包。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
我是新人，下次我会努力的