Ios flutter中实现自定义底部导航栏

发布于09月16日

I am trying to achieve the design for the bottom navigation bar attached to this message in flutter but it is really stressing me out. I have tried different packages and solutions but i haven't made any progress yet. If anyone can be of help, i will be very delighted.

推荐答案

我找不到任何完全预先准备好的解决方案来解决这个问题，但有一个包提供了一个很好的起点:https://pub.dev/packages/convex_bottom_bar

安装后，您将需要编辑程序包中的...\src\convex_shape.dart，因为默认情况下，RADIUS选项仅适用于左上角和右上角.

在上面的文件中，更改为

return radius > 0
    ? (Path()
      ..moveTo(host.left, host.top + radius)
      ..arcToPoint(Offset(host.left + radius, host.top), radius: Radius.circular(radius))
      ..lineTo(p[0].dx, p[0].dy)
      ..quadraticBezierTo(p[1].dx, p[1].dy, p[2].dx, p[2].dy)
      ..arcToPoint(
        p[3],
        radius: Radius.circular(notchRadius + 10),
        clockwise: true,
      )
      ..quadraticBezierTo(p[4].dx, p[4].dy, p[5].dx, p[5].dy)
      ..lineTo(host.right - radius, host.top)
      ..arcToPoint(Offset(host.right, host.top + radius), radius: Radius.circular(radius))
      ..lineTo(host.right, host.bottom - radius)
      ..arcToPoint(Offset(host.right - radius, host.bottom), radius: Radius.circular(radius))
      ..lineTo(host.left + radius, host.bottom)
      ..arcToPoint(Offset(host.left, host.bottom - radius), radius: Radius.circular(radius))
      ..close())
    : (Path()
      ..moveTo(host.left, host.top)
      ..lineTo(p[0].dx, p[0].dy)
      ..quadraticBezierTo(p[1].dx, p[1].dy, p[2].dx, p[2].dy)
      ..arcToPoint(
        p[3],
        radius: Radius.circular(notchRadius + 10),
        clockwise: true,
      )
      ..quadraticBezierTo(p[4].dx, p[4].dy, p[5].dx, p[5].dy)
      ..lineTo(host.right, host.top)
      ..lineTo(host.right, host.bottom)
      ..lineTo(host.left, host.bottom)
      ..close());

从这个开始

    return radius > 0
    ? (Path()
      ..moveTo(host.left, host.top + radius)
      ..arcToPoint(Offset(host.left + radius, host.top), radius: Radius.circular(radius))
      ..lineTo(p[0].dx, p[0].dy)
      ..quadraticBezierTo(p[1].dx, p[1].dy, p[2].dx, p[2].dy)
      ..arcToPoint(
        p[3],
        radius: Radius.circular(notchRadius),
        clockwise: true,
      )
      ..quadraticBezierTo(p[4].dx, p[4].dy, p[5].dx, p[5].dy)
      ..lineTo(host.right - radius, host.top)
      ..arcToPoint(Offset(host.right, host.top + radius), radius: Radius.circular(radius))
      ..lineTo(host.right, host.bottom)
      ..lineTo(host.left, host.bottom)
      ..close())
    : (Path()
      ..moveTo(host.left, host.top)
      ..lineTo(p[0].dx, p[0].dy)
      ..quadraticBezierTo(p[1].dx, p[1].dy, p[2].dx, p[2].dy)
      ..arcToPoint(
        p[3],
        radius: Radius.circular(notchRadius),
        clockwise: true,
      )
      ..quadraticBezierTo(p[4].dx, p[4].dy, p[5].dx, p[5].dy)
      ..lineTo(host.right, host.top)
      ..lineTo(host.right, host.bottom)
      ..lineTo(host.left, host.bottom)
      ..close());

之后，只需提供填充、高程和BorderRadius即可根据您的喜好进行定制

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Custom  bottom nav bar',
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        padding: const EdgeInsets.all(24.0),
        child: ConvexAppBar(
          elevation: 5,
          height: 80,
          cornerRadius: 12,
          style: TabStyle.fixedCircle,
          items: const [
            TabItem(icon: Icons.home, title: 'Home'),
            TabItem(icon: Icons.map, title: 'Discovery'),
            TabItem(icon: Icons.add, title: 'Add'),
            TabItem(icon: Icons.message, title: 'Message'),
            TabItem(icon: Icons.people, title: 'Profile'),
          ],
        ),
      ),
    );
  }
}

Here is the result of the above page个