Как сделать SliverAppBar похожим на Новости Google?

Мне нужна стандартная панель приложений при запуске приложения, однако, когда пользователь начинает прокрутку, я хочу, чтобы панель приложения сдвигалась вверх и за пределы экрана. Однако в этом случае в строке состояния (на iOS) не будет фона. Я не хочу устанавливать постоянный фон непосредственно в строку состояния, используя что-то вроде https://pub.dev/packages/flutter_statusbarcolor, потому что это оставляет сплошной цвет, а не виджет.

Единственное решение, которое у меня есть прямо сейчас, - это просто оставить AppBar приглушенным.

Однако то, что я действительно хочу делать, - это то, что делают Новости Google. Панель приложений сдвигается вверх почти полностью, однако остается под панелью приложения с некоторой непрозрачностью.

Как это делают Новости Google:

Есть ли способ сделать это с Flutter и SliverAppBar, не делая это хакерским способом? Единственное, о чем я думаю, - это делать это со стеком, однако, как мне узнать, как сохранить его под строкой состояния, поскольку Android уже имеет некоторую непрозрачность под строкой состояния.

2 ответа

Я использовал OrientationBuilder виджет для прослушивания изменений ориентации, так как при изменении ориентации высота строки состояния может измениться.

Затем я использовал FlutterStatusbarManager package, чтобы получить высоту строки состояния. FlutterStatusbarManager.getHeight это future поэтому его нужно было обернуть FutureBuilder

Вот полный пример кода

import 'package:flutter/material.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

class FixedStatusbarBackground extends StatelessWidget {
  final Widget child;

  const FixedStatusbarBackground({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        OrientationBuilder(
          builder: (context, Orientation orientation) => FutureBuilder<double>(
              future: FlutterStatusbarManager.getHeight,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Container(
                      height: snapshot.data,
                      color: Theme.of(context)
                          .appBarTheme
                          .color
                          .withOpacity(.7) //Colors.white.withOpacity(.7),
                      );
                } else {
                  return Container();
                }
              }),
        ),
      ],
    );
  }
}

В child переданный виджет - это весь CustomScrollView.

У виджетов прокрутки во флаттере есть контроллеры, которые информируют о том, что происходит с прокруткой. Вы можете узнать, насколько полоска была прокручена, и соответственно изменить ее прозрачность, содержимое и размер. Это будет непросто, но взгляните на ScrollController, используемый CustomScrollView.

Другие вопросы по тегам