Как размыть BottomNavigationBar во флаттере?

Question

Я хочу размыть фон BottomNavigationBar скаффолда, чтобы он мог дать эффект крутого размытия объектов позади него. Как я могу это сделать?

Дополнительная информация: Я попытался добавить непрозрачность в canvasColor, создав новую тему для BottomNaviagtionBar. Это мой код:

bottomNavigationBar: new Theme( data: Theme.of(context).copyWith( canvasColor: Color(0xff424242).withOpacity(0.5), ), child: new BottomNavigationBar( onTap: navigationTapped, currentIndex: _page, items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text('Home') ), new BottomNavigationBarItem( icon: new Icon(Icons.dashboard), title: new Text('Menu') ), new BottomNavigationBarItem( icon: new Icon(Icons.date_range), title: new Text('Dates') ) ], ), )

И это вывод, который я получаю: Изображение

Удивительно, но, как вы видите, непрозрачность вообще не применяется. Я на самом деле не хочу, чтобы BottomNavigationBar был непрозрачным. Я хочу, чтобы он был размытым, чтобы содержимое позади него могло быть размыто на панели BottomNaviagtionBar. Я также пытался обернуть BottomNavigationBar внутри ImageFilter.blur (), но это также не сработало.

Answer 1

** just set a transparent backgroundColor .**
@override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        backgroundColor: Colors.transparent,
        border: Border.all(
          width: 0.0,
          style: BorderStyle.none,
        ),
      ),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(
                    left: 20.0,
                    top: 0.0,
                    right: 20.0,
                  ),
                  height: 280.0,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: Const.color.linearColors,
                    ),
//                    image: DecorationImage(
//                      image: AssetImage('assets/image/bac.png'),
//                    ),
                  ),
                  child: Row(
                    children: <Widget>[Text('Hello')],
                  ),
                ),
              ),

              /// end of Expanded
            ],
          ),
        ],
      ),
    );