BottomAppBar Плавающая кнопка действия, надрез / вставка не прозрачны

Question

Я добавил BottomAppBar на эшафот в материале приложения, и к этому я добавил фабрику со вставкой в ​​центре.Код выглядит примерно так:

Scaffold(
    bottomNavigationBar: BottomAppBar(
        color: Theme.of(context).accentColor,
        shape: CircularNotchedRectangle(),
        child: _buildBottomBar(context),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Center(
        child: Icon(
            Icons.add,
            size: 32.0,
        ),
        ),
        onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CreateEvent()),
        );
        },
    ),
)

И вот что я получаю после рендеринга:

Зубне прозрачный, а содержимое, стоящее за ним, скрывается.

Есть ли способ исправить это?Что-то, что я мог пропустить?

Answer 1

Вам просто нужно быть на канале флаттера: master , а затем добавить в Scaffold:

Scaffold(
   extendBody: true
);

и оно должно быть прозрачным:)

Привет

Арматура

Answer 2

Проблема в том, что если вы поместите свой контент в body из Scaffold, он не будет перекрывать размер ваших AppBar, BottomAppBar.

Вы можете попытаться использовать Stack, указать свое тело как первого ребенка, затем поставить Scaffold, изменить backgroundColor на Прозрачный.

        @override
          Widget build(BuildContext context) {
            return Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.network(
                      "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"),
                ),
                Scaffold(
                  backgroundColor: Colors.transparent,
                  bottomNavigationBar: BottomAppBar(
                    color: Theme.of(context).accentColor,
                    shape: CircularNotchedRectangle(),
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Icons.access_alarm),
                          onPressed: () => null,
                        ),
                        IconButton(
                          icon: Icon(Icons.sms_failed),
                          onPressed: () => null,
                        ),
                      ],
                    ),
                  ),
                  floatingActionButtonLocation:
                      FloatingActionButtonLocation.centerDocked,
                  floatingActionButton: FloatingActionButton(
                    backgroundColor: Theme.of(context).primaryColor,
                    child: Center(
                      child: Icon(
                        Icons.add,
                        size: 32.0,
                      ),
                    ),
                    onPressed: () {
                      /*
                    Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => CreateEvent()),
                    );*/
                    },
                  ),
                ),
              ],
            );