[英]Sliver App Bar not displaying correctly - Flutter
I'm trying to display a SliverAppBar as shown on my design我正在尝试显示一个 SliverAppBar,如我的设计所示
but I'm not sure it can be done in Flutter但我不确定它可以在 Flutter 中完成
here is my code so far到目前为止,这是我的代码
SliverAppBar(
// title: ,
backgroundColor: Colors.grey[200],
expandedHeight: 300,
centerTitle: true,
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100))),
actions: <Widget>[
CircleAvatar(
radius: 20,
// foregroundColor: Colors.red,
backgroundImage: AssetImage(
'assets/img/categories/player.png',
),
),
],
flexibleSpace: FlexibleSpaceBar(
background: Container(),
centerTitle: true,
title: Container(
height: 40,
child: Column(
children: [
Text("Mrs Surname Name",
style: TextStyle(
fontFamily: 'Kannada Sangam MN',
fontWeight: FontWeight.w500,
fontSize: 20,
// color: AppTheme.high_emphasis,
)),
],
),
),
),
pinned: true,
floating: false,
elevation: 0,
),
I'd like for the name & Motif to show even when scrolled up also the Avatar but smaller我希望名称和主题即使在向上滚动时也能显示头像但更小
But the "Constantes" to hide when scrolled up但是向上滚动时要隐藏的“Constantes”
We can use SliverAppBar title
to hold name & Motif
because it will be always visible to the UI.我们可以使用SliverAppBar title
来保存name & Motif
,因为它对 UI 总是可见的。 on Next part avatar image also be always visible but will reduce the size based on scroll, in this case putting it inside flexibleSpace:FlexibleSpaceBar(title: Avatar)
will be better choice.在下一部分头像图像也始终可见,但会根据滚动减小尺寸,在这种情况下将其放在flexibleSpace:FlexibleSpaceBar(title: Avatar)
中将是更好的选择。 For others, info that will be vanished based on scroll, so we can use FlexibleSpaceBar( background:)
for that and to populate it using column
.对于其他人,信息将基于滚动消失,因此我们可以为此使用FlexibleSpaceBar( background:)
并使用column
填充它。 But there will be overlap, and we can trick it using const SizedBox(height: kToolbarHeight,),
at 1st child of Column
.但是会有重叠,我们可以在Column
的第一个孩子处使用const SizedBox(height: kToolbarHeight,),
来欺骗它。
Result结果
Here is a sample that can help to produce the UI, you can tweak the decoration the way like.这是一个可以帮助生成 UI 的示例,您可以按照喜欢的方式调整装饰。
SliverAppBar(
pinned: true,
backgroundColor: Colors.grey[200],
expandedHeight: 300,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Mrs, Surname Name",
style: TextStyle(
fontSize: 16,
),
),
Text(
"Mrs, Surname Name",
style: TextStyle(
fontSize: 26,
),
),
],
),
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
flexibleSpace: FlexibleSpaceBar(
background: Container(
color: Colors.grey[200],
padding: const EdgeInsets.only(left: 16),
child: Column(
///* however we can use sizedBox to handle upperSpaces
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.end,
children: [
///* like this
const SizedBox(
height: kToolbarHeight,
),
...List.generate(
4,
(index) => Text("others info"),
)
],
),
),
title: Row(
///* not sure why i cant avoid using Row here
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(),
Align(
alignment: Alignment.center,
child: Container(
height: 70,
width: 70,
alignment: Alignment.center,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.deepOrange,
),
child: Text("img"),
),
),
],
),
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.