Как сделать фиксированное наложение размытия во флаттере? - PullRequest
Новая
       22

Как сделать фиксированное наложение размытия во флаттере?

0 голосов
/ 06 апреля 2020

Я хотел бы реализовать эту панель наложения

Это то, чего я достиг в последнее время (я просто хочу размыть часть ниже части панели наложения, все остальное не проблема)

Важнейшей частью является то, что он должен размыть часть экрана ниже самого себя. Я понятия не имею, как мне это сделать, я попробовал все (например, настроить прозрачный контейнер и размыть его, но прозрачный цвет оказывается черным: /).

Вот так я сейчас реализую панель навигации с контейнером над ней: 

Widget _navigationBarAndOverlay() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        OverlayBarWidget(),
        _navigationBar(),
      ],
    );
  }

И это код OverlayBarWidget: 

  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      height: 85,
      width: MediaQuery.of(context).size.width,
      child: Center(child: Text("Nothing to do"),),
    );
  }

Заранее спасибо за Ваша помощь!

РЕДАКТИРОВАТЬ :

В конце концов мне удалось сделать это всего несколько минут спустя, поэтому я не буду назначать лучший ответ. Решением является использование стека вместо столбца: наложенная часть будет фактически перекрывать интерфейс, а не помещаться ниже. Чтобы сделать это, вам нужно дать вашему bottomAppBar точный размер (используйте SizeBox, как показано ниже) и использовать Positioned для позиционирования панели наложения 

Stack(
          children: <Widget>[
            Scaffold(
              body: TabBarView(
                controller: tabController,
                ...
              ),
              bottomNavigationBar: SizedBox(
                height: 57,
                child: _navigationBar(),
              ),
            ),
            Positioned(
              bottom: 57,
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaY: 16, sigmaX: 16),
                  child: OverlayBarWidget(),
                ),
              ),
            )
)

Окончательный результат

1 Ответ

1 голос
/ 06 апреля 2020

Вы можете попробовать BackDropFilter

Этот тип эффектов относительно дорогой , используйте их с осторожностью!

Важно : оберните контейнер с виджетом ClipRect, в противном случае весь экран примет эффект BackDropFilter. 

ClipRect(
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/your-image.png'),
      ),
    ),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
      child: Container(
        color: Colors.black.withOpacity(0.0),
      ),
    ),
  ),
)

Поиграйте со значениями, чтобы получить различные эффекты 

sigmaX: 5.0
sigmaY: 5.0
withOpacity: 0.0

Производя сравнение, на данный момент вы получите что-то вроде этого:

enter image description here

Теперь, если вы хотите отображать информацию поверх этого изображения , вы можете просто использовать предыдущий код в Stack() и добавьте немного Positioned() Text() 

Stack(   
  children: <Widget>[
    ClipRect( ... ),
    Positioned(top: 30, left: 30, child: Text("Some Info"),
    Positioned(top: 60, left: 30, child: Text("Some more Info"),
  ], )

Вы можете получить что-то вроде этого

enter image description here

Документация BackDropFilter

Флаттер видео о BackDropFilter -> https://youtu.be/dYRs7Q1vfYI

...