如何在颤动中创建弯曲的底部导航栏答案

【问题标题】：How do I create curved bottom navigation bar in flutter如何在颤动中创建弯曲的底部导航栏
【发布时间】：2021-11-29 01:29:13
【问题描述】：

在我正在进行的项目中，我需要一个弯曲的底部导航栏。我试过curved_navigation_bar 包。我得到的结果符合我 80% 的要求。我面临的问题是我无法使 弯曲位置透明。

This is the picture what I'm getting

This is the picture that I need

这里我附上了两张图片，第一张图片是我自己尝试的我指出了我需要使透明的弯曲位置，并希望看到底部的列表视图，就像第二张图片一样。谁能帮我达到要求。

我的代码：

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

void main() => runApp(const App());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: BottomNavBar(),
    );
  }
}

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

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

class _BottomNavBarState extends State<BottomNavBar> {
  int _page = 0;
  final GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          index: 0,
          height: 60.0,
          items: <Widget>[
            bottomItem(
                title: "Wish List", index: 0, icon: Icons.favorite_border),
            bottomItem(title: "Home", index: 1, icon: Icons.home),
            bottomItem(title: "My Cart", index: 2, icon: Icons.shopping_cart),
          ],
          color: Colors.black,
          buttonBackgroundColor: Colors.white,
          backgroundColor: Colors.blue,
          animationCurve: Curves.easeInOut,
          animationDuration: const Duration(milliseconds: 600),
          onTap: (index) {
            setState(() {
              _page = index;
            });
          },
          letIndexChange: (index) => true,
        ),
        body: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return Container(
                height: 150,
                color: Colors.primaries[index % Colors.primaries.length],
                child: FittedBox(
                  child: Text(index.toString()),
                ),
              );
            }));
  }

  Widget bottomItem(
      {required int index, required String title, required IconData icon}) {
    if (index == _page) {
      return Icon(
        icon,
        size: 26,
        color: Colors.black,
      );
    } else {
      return Padding(
        padding: const EdgeInsets.only(top: 6.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 22,
              color: Colors.white,
            ),
            const SizedBox(height: 5),
            Text(
              title,
              style: const TextStyle(color: Colors.white),
            )
          ],
        ),
      );
    }
  }
}

【问题讨论】：

标签： flutter flutter-widget

【解决方案1】：

backgroundColor: Colors.transparent 适合您的用例吗？

【讨论】：

【解决方案2】：

嗨，请在您的代码中添加两个更改。

首先改变你CurvedNavigationBar的背景

backgroundColor: Colors.transparent

将此选项添加到您的Scaffold

extendBody: true,

【讨论】：

非常感谢！它正在工作。

【解决方案3】：

我使用了弯曲的导航栏。您可以使背景透明，但无法更改该动画区域之间的弯曲角度和空间。你可以试试fluid_bottom_nav_bar包。

【讨论】：