如何制作真正的自定义 BottomNavigationBar

Question

我正在尝试像这样在 flutter 中设计一个非常自定义的 BottomNavigationBar：

是否可以在栏的顶部中心做这种 lump/growth？

我准确地说我不想要一个圆形的 FloatingActionButton，我用这个方法得到的最好结果并不完全是预期的：

Answer 1

MyFab 按钮 更改大小并用 ClipOval 包裹

比如你可以看看我的project.

Answer 2

您可以使用 CustomPaint 小部件 和 CustomPainter class 来准确绘制您需要的内容。在您的情况下，您可以使用 path.LineTo 和 path.arcToPoint 函数绘制自定义路径。然后使用 stack 将 IconButtons 放在任何你想要的地方 . This video 解释如何使用自定义绘画。

更新

我添加了示例代码，您可以编辑数字并实现您需要的。此代码将为您提供此图像上的橙色小部件：

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

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Stack(
      children: [
        CustomPaint(
          size: Size(size.width, 110),
          painter: MyCustomPainter(),
        )
      ],
    );
  }
}

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.fill;
    Path path = Path()..moveTo(0, 50);
    path.lineTo(size.width * 0.4, 50);
    path.quadraticBezierTo(size.width * 0.5, 5, size.width * 0.6, 50);
    path.lineTo(size.width, 50);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Answer 3

我有这张图片和代码，请修改后使用。

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

class MyPlugin extends StatefulWidget {
  static const routeName = '/FancyBottomNavigationPage';

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

class _MyPluginState extends State<MyPlugin> {
  int currentPage = 0;

  GlobalKey bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: Center(
          child: _getPage(currentPage),
        ),
      ),
      bottomNavigationBar: FancyBottomNavigation(
        tabs: [
          TabData(
            iconData: Icons.home,
            title: "Home",
            onclick: () {},
          ),
          TabData(iconData: Icons.person, title: "Profile"),
          TabData(iconData: Icons.more_vert, title: "More")
        ],
        initialSelection: 1,
        key: bottomNavigationKey,
        onTabChangedListener: (position) {
          setState(
            () {
              currentPage = position;
            },
          );
        },
      ),
    );
  }

  _getPage(int page) {
    switch (page) {
      case 0:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the home page"),
          ],
        );
      case 1:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the Profile page"),
          ],
        );
      default:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the More page"),
          ],
        );
    }
  }
}

如何制作真正的自定义 BottomNavigationBar

How to make really Custom BottomNavigationBar

flutter

dart