[英]Custom Sliver app bar with background and tab bar
I need to create a custom sliver app bar that will shrink when the user starts scrolling.我需要创建一个自定义条子应用栏,当用户开始滚动时它会缩小。 The extended app bar will have two distinct features:
扩展的应用栏将具有两个不同的功能:
Expected sliverappbar before scroll:滚动前预期的 sliverappbar:
As, the user starts to scroll the appbar will become the default AppBar
provided by flutter因为,用户开始滚动appbar将成为flutter提供的默认
AppBar
This is what I have done till now.这就是我到目前为止所做的。 And the code is:
代码是:
class _MerchantSliverAppbarState extends State<MerchantSliverAppbar> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return SliverAppBar(
expandedHeight: 200.0,
pinned: true,
floating: false,
snap: false,
leading: CustomBackButton(
greyBackground: false,
),
flexibleSpace: FlexibleSpaceBar(
background: Stack(
children: [
Container(
height: 200,
width: size.width,
child: Image.asset(
"assets/images/mock_background.png",
fit: BoxFit.cover,
),
),
],
),
),
);
}
}
As you can see I tried to make the background Image take up the entire space, but for some reason I still have a little extra space(the blue zone).正如你所看到的,我试图让背景图像占据整个空间,但由于某种原因,我仍然有一点额外的空间(蓝色区域)。
I also have the red zone where the tab bar will be placed.我也有将放置标签栏的红色区域。
First of all your image is not fitted with your container, instead of that you use it as a background image:首先,您的图像不适合您的容器,而是将其用作背景图像:
Container(
height: 200,
width: size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
image: DecorationImage(
image: AssetImage(
'assets/images/test.jpg'),
fit: BoxFit.fill,
),
),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.