Я хочу сделать нижнюю панель навигации прозрачной

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

скриншот

не обращайте внимания на кнопки на панели навигации, мне просто нужна прозрачность, мой код следует

return Scaffold(
  body: Column(
    .......
  bottomNavigationBar: Container(
    color: Colors.white,
    padding: EdgeInsets.all(20),
    child: Text(
      'SUIVANT',
      textAlign: TextAlign.center,
      style: TextStyle(
          fontFamily: 'Karla', fontSize: 20, fontWeight: FontWeight.bold),
    ),
  ),
);

Любая помощь будет принята с благодарностью. Спасибо заранее.


flutter dart bottomnavigationview
person Fahad Hussain    schedule 10.04.2020    source источник
comment
Отвечает ли это на ваш вопрос? ​​Прозрачный фон BottomNavigationBar   -  person Morez    schedule 10.04.2020
comment
можешь добавить то, что хочешь? вы хотите, чтобы bottomNavigationBar была прозрачной, чтобы вид сверху (при условии) мог быть виден позади?   -  person Viren V Varasadiya    schedule 10.04.2020
comment
да ... это именно то, что я хочу ...   -  person Fahad Hussain    schedule 10.04.2020

Ответы (3)


arrow_upward
1
arrow_downward

Наконец, после долгих размышлений и применения необычных способов я смог сделать это совершенно по-другому. Пришлось доработать свойство BottomNavigationBar:, так как оно не позволяет изменять. Мне пришлось обернуть основной столбец в виджет Stack ()

return Scaffold(
  body: Stack(
    children: <Widget>[
      Column(
        children: <Widget>[
          //.......
          /*this is the Container() I had to add in stack after finishing the bottomnavbar*/
          Container(
            height: MediaQuery.of(context).size.height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(),
                Container(
                  color: Colors.white.withOpacity(0.9),
                  width: MediaQuery.of(context).size.width,
                  padding: EdgeInsets.all(20),
                  child: Text(
                    'SUIVANT',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontFamily: 'Karla',
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ],
  ),
);

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

Вот как выглядит результат

person Fahad Hussain    schedule 13.04.2020

arrow_upward
0
arrow_downward

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

пожалуйста, попробуйте добавить этот цветовой код фона: # ffffff00 это должно быть так в css

цвет фона: # ffffff00

person OUSSAMA BEY GAHAR    schedule 10.04.2020
comment
не получилось, после добавления цветового кода показывает желтый фон, кстати его Flutter (дротик). - person Fahad Hussain; 10.04.2020
comment
хорошо, я не знаю о флаттере, чтобы быть честным, но предоставленный код предназначен для белого трансперанта в css, извините, я не смог помочь - person OUSSAMA BEY GAHAR; 10.04.2020

arrow_upward
0
arrow_downward

Попробуйте установить цвет контейнера на Colors.transparent.

Нравится

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(

      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.all(20),
        color: Colors.transparent,
        child: Text("Bottom Nav is Transparent", style: TextStyle(color: Colors.white),),
      ),
    );
  }

ОБНОВЛЕНИЕ

А если вы хотите использовать BottomNavigationBar, установите для высоты значение 0.

Например

class Trans extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(

      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        items: [
          BottomNavigationBarItem(title: Text("1",style: TextStyle(color: Colors.white),), icon: Icon(Icons.message)),
          BottomNavigationBarItem(title: Text("2",style: TextStyle(color: Colors.white),), icon: Icon(Icons.message))
        ],
      ),
    );
  }
}
person Josteve    schedule 10.04.2020
comment
bottomNavigationBar имеет прозрачный цвет как сплошной белый. не помогает с Colors.transparent. - person Fahad Hussain; 10.04.2020
comment
@FahadHussain Я тебя не понимаю - person Josteve; 10.04.2020
comment
не помогает брат ... это не становится прозрачным - person Fahad Hussain; 10.04.2020
comment
Что именно вы имеете в виду «Прозрачная нижняя навигация»? Вы не хотите, чтобы отображалась нижняя панель навигации? - person Josteve; 10.04.2020