Flutter comes with a bunch of so-called “sliver” widgets that can be used to achieve different effects based on the user's scroll actions. By default, it's fairly easy to achieve a similar effect from the Material Design guidelines ¹, where the title starts off rather large at the bottom of the hero image and then animates up to the top when the user scrolls down on the page.
To achieve this effect, you can use a CustomScrollView
with a SliverAppBar
at the top and some other sliver components under it, like this:
new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: new FlexibleSpaceBar(
title: new Text(_shortTitle),
background: new Image.network(_imageUrl),
),
),
new SliverPadding(
padding: new EdgeInsets.all(16.0),
sliver: new SliverList(
delegate: new SliverChildListDelegate([
new Text(_longTitle),
new Text(_body),
new Text(_author),
new Text(_body),
]),
),
),
],
);
¹ Scroll down to “Flexible space with image” in the Material Design guidelines
Appbar has leading, title, action, flexible space and bottom. By using all these we can design the appbar by adding icon , image , heading and title in it. the bottom code demonstrate costume appbar with icon, heading, title and image. enter image description here
AppBar(
elevation: 0.0,
actions: <Widget>[
Container(
padding: EdgeInsets.only(right: 5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'JIMMY FELLON',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black87,
),
),
Text(
'PROJECT OWNER',
style: TextStyle(
fontSize: 12.0,
color: Colors.black54,
),
)
],
)),
Container(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
CircleAvatar(
backgroundImage: new NetworkImage(
'https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&h=350'),
radius: 24.0,
),
]),
),
IconButton(
icon: new Icon(Icons.more_vert),
onPressed: () {},
),
],
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.