底部导航栏中的曲线（颤动）答案

【问题标题】：curve in bottom navbar (flutter)底部导航栏中的曲线（颤动）
【发布时间】：2021-02-13 08:58:28
【问题描述】：

 bottomNavigationBar: BottomAppBar(
      //shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              flex: 4,
              child: IconButton(
                icon: Icon(Icons.home),
                onPressed: () async{

                  Navigator.pushAndRemoveUntil(
                      context,
                      MaterialPageRoute(builder: (context) => FeedScreen()),
                          (route) => false);
                },
              ),
            ),
            Expanded(
              flex: 14,
              child: IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                 FocusScope.of(context).requestFocus(myFocusNode);
                },
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Expanded(
              flex: 12,
              child: IconButton(
                icon: Icon(Icons.favorite),
                onPressed: () {
                  // Navigator.push(context,
                  //     MaterialPageRoute(builder: (context) => LikedFeed(widget.uid)));
                },
              ),
            ),
            Expanded(
              flex: 4,
              child: IconButton(
                icon: Icon(Icons.perm_identity),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => profilePage(widget.uid)));
                },
              ),
            ),
          ],
        ),
      ),
    ),

我想在底部导航栏中实现这条曲线，而不需要浮动操作按钮。

现在只有当我将 FAB 放在导航栏的中心时它才有效，但我根本不想要 FAB。

上面的代码显示了我的底部导航栏，里面有3个图标，我想给一个曲线（如图所示）作为插件设计。

【问题讨论】：

pub.dev/packages/curved_navigation_bar 看看这个
您可以在浮动操作按钮上添加一个圆形容器作为小部件
@JanviPatel 我的要求不同。
@ShubhamNarkhede 会阻止背景。我和图片一样，没有中心按钮

标签： flutter dart flutter-layout flutter-animation

【解决方案1】：

使用ClipPath从矩形容器顶部切出半圆形。考虑这个例子：

import 'package:flutter/material.dart';

void main() => runApp(MyContainer());

class CustomClipperImage extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    
    path.lineTo(size.width, size.height);
    path.lineTo(size.width,0.0);
    path.lineTo(2*size.width/3, 0.0);
    var firstEnd = Offset(size.width / 2, size.height/2);
    path.arcToPoint(Offset(size.width/3, 0),radius:Radius.circular(1));
      
  path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

class MyContainer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child:ClipPath(
   clipper: CustomClipperImage(),
   child: Container(height:100,
                    width: 300,
                    color:Colors.red,)
 )

        ),
      ),
    );
  }
}

【讨论】：