Прозрачная нижняя панель навигации в флаттере

Question

Я новичок, чтобы трепетать.Я пытаюсь добиться этого пользовательского интерфейса

Я не нашел полноценного решения для создания прозрачной нижней панели навигации в флаттере.

Я пытался использовать

BottomNavigationBarItem(
        backgroundColor: Colors.transparent,
        icon: e,
        activeIcon: _activeIcons[_index],
        title: Text(
          title[_index],
          style: AppStyle.tabBarItem,
        ),
      )

Но, похоже, это не работает.Пожалуйста помоги.

Answer 1

В новой версии флаттера (1.2.1) есть параметр для высоты, вы можете просто поставить высота: 0.0

Answer 2

Нашел решение для прозрачного BottomNavigationBar.

1. Откройте исходный код BottomNavigationBar, используя ярлык Ctrl + B .
2. Прокрутив файл, вы найдете метод с именем Widget build.
3. На этом вы можете найти Stack widget, где вы можете найти виджет материала.
4. Добавить shadowColor:Colors.transparent

Теперь вы получаете прозрачный BottomNavigationBar

Answer 3

Вот мой подход:

Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage("https://cdn.pixabay.com/photo/2018/09/17/16/24/cat-3684184_960_720.jpg")
            )
          ),
        ),
        Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Theme(
              data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
              child: BottomNavigationBar(
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.photo_camera), title: Text("Test")),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.photo_camera), title: Text("Test")),
                ],
              ),
            )
          ],
        )
      ],
    );

Это заполнит весь экран (изображение чисто тривиальное, но вы его понимаете) фоновым изображением (нижний слой) и нижней панелью навигации внутри столбца, содержимое которого выровнено по end.

В целях завершения я приведу ниже объяснение, которое я дал в комментариях к исходному вопросу.

Думая глубже, я понимаю, что это не будет доставлять то же самое результат как желаемый, так как изображение двух девушек будет выше панель навигации. Предлагаю использовать стэк с изображением двух девушек в качестве нижнего слоя (нижней части стопки) и полноэкранного столбца с MainAxisSize, установленным в MainAxisSize.max, и MainAxisAlignment, установленным в MainAxisAlignment.end. Я мог бы написать это в ответе, но я не могу проверить это прямо сейчас, поэтому я предпочитаю написать комментарий. Надеюсь, это поможет

UPDATE В предыдущем решении все еще была тень navbar. Этот метод сборки для экрана (виджета) отсутствует, поскольку я реализовал свой собственный BottomNavigationBar с Row:

@override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: NetworkImage(
                      "https://media.idownloadblog.com/wp-content/uploads/2016/04/macinmac-portrat-splash.jpg"))),
        ),
        Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                GestureDetector(
                    onTap: () {
                      print("Tap!");
                    },
                    child: Icon(
                      Icons.photo_camera,
                      size: 50,
                    )),
                GestureDetector(
                    onTap: () {
                      print("Tap!");
                    },
                    child: Icon(
                      Icons.photo_camera,
                      size: 50,
                    )),
                GestureDetector(
                    onTap: () {
                      print("Tap!");
                    },
                    child: Icon(
                      Icons.photo_camera,
                      size: 50,
                    )),
                GestureDetector(
                    onTap: () {
                      print("Tap!");
                    },
                    child: Icon(
                      Icons.photo_camera,
                      size: 50,
                    )),
              ],
            )
          ],
        )
      ],
    );

Вот скриншот с моего телефона:

Бонус

Вы можете получить полный экран, позвонив

SystemChrome.setEnabledSystemUIOverlays([]);

источник: здесь

Answer 4

Мое решение на высоком уровне:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          SingleChildScrollView(
            child: Center(
              child: Column(
                children: <Widget>[
                  child(),
                  child(),
                  child(),
                  child(),
                  child(),
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Opacity(opacity: showBottomBar ? 1 : 0, child: bottomBar()),
          )
        ],
      ),
    );

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

Answer 5

Моя попытка использования метода стека обсуждалась в комментариях:

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/background.jpg'),
                    fit: BoxFit.cover),
              ),
            ),
            Align(
                alignment: Alignment.bottomCenter,
                child: Theme(
                    data: Theme.of(context)
                        .copyWith(canvasColor: Colors.transparent),
                    child: BottomNavigationBar(
                      currentIndex: 0,
                      items: [
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home')),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home')),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home'))
                      ],
                    ))),
          ],
        ),
      ),
    );
  }

Редактировать: BottomNavigationBar имеет встроенную высоту 8.0, который вы не можете изменить, и вызывает этот странный эффект тени.Если вы хотите удалить его, вы можете просто реализовать свой собственный вид нижней панели, например:

Align(
                alignment: Alignment.bottomCenter,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                ],)),