Я хочу сделать мой bottomNavBar прозрачным

Question

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

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

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

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

Answer 1

Попробуйте установить цвет Контейнер на 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))
        ],
      ),
    );
  }
}

Answer 2

Наконец, после долгих размышлений и применения странных способов, я смог сделать это совершенно по-другому. Мне пришлось финишировать sh 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),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ],
  ),
);

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

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

Answer 3

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

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

цвет фона: # ffffff00