Как сделать 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.