如何在 flutter 中获取渐变底部导航选项卡？

Question

pub 上有一个包 https://pub.dev/packages/gradient_bottom_navigation_bar

但是这个已经很久没有更新了。那么，有没有办法创建自己的带有渐变效果的自定义导航栏？

像这样...

Answer 1

Flutter 的所有可能，一个选项是在 BottomNavigationBar 中使用透明背景并将其放在带有 BoxDecoration 的容器中，尝试下一个：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Hello"),
        ),
        bottomNavigationBar: _createBottomNavigationBar(),
      ),
    );
  }

  Widget _createBottomNavigationBar() {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF00D0E1), Color(0xFF00B3FA)],
          begin: Alignment.topLeft,
          end: Alignment.topRight,
          stops: [0.0, 0.8],
          tileMode: TileMode.clamp,
        ),
      ),
      child: BottomNavigationBar(
        currentIndex: 0,
        onTap: (index) {},
        showUnselectedLabels: false,
        backgroundColor: Colors.transparent,
        type: BottomNavigationBarType.fixed,
        elevation: 0,
        unselectedItemColor: Colors.white,
        selectedIconTheme: IconThemeData(color: Colors.white),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(
              "Home",
              style: TextStyle(color: Colors.white),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text(
              "Business",
              style: TextStyle(color: Colors.white),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text(
              "School",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

我有一个更基本的解决方案。您可以查看 this DartPad.

最终结果：

诀窍是这样的：

将 BottomNavigationBar 的背景颜色设置为透明。
用Stack包裹起来。
将 Container 作为第一个 child 添加到 Stack。
将Container的装饰设置为渐变。
将其高度设置为 60。

如何在 flutter 中获取渐变底部导航选项卡？

How to get gradient bottom navigation tab in flutter?

flutter

flutter-layout

flutter-bottomnavigation