Блог

В моем текущем проекте мне нужна изогнутая нижняя панель навигации. Я пробовал использовать пакет curved_navigation_bar. Результат, который я получил, соответствует 80% моих требований. Проблема, с которой я столкнулся, заключается в том, что я не могу сделать изогнутое положение прозрачным.

Вот такая картина, которую я получаю

Это та фотография, которая мне нужна

Здесь я прикрепил две картинки, первая картинка-это то, что я попробовал сам, я указываю изогнутое положение, которое мне нужно сделать прозрачным, и хочу видеть вид нижнего списка, как на второй прикрепленной картинке. Может ли кто-нибудь помочь мне выполнить требования.

мой код:

 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),
            )
          ],
        ),
      );
    }
  }
}
 

backgroundColor: Colors.transparent Подходит ли ваш случай использования?

привет, пожалуйста, добавьте два изменения в Свой код.

• сначала измените фон вашего CurvedNavigationBar

 backgroundColor: Colors.transparent
 

• добавьте эту опцию в свой Scaffold

 extendBody: true,