Hello. There was this thing in Android called collapsing toolbar. In flutter it is called Sliver AppBar. You probably want to have something like this in your app:
SliverAppBar( expandedHeight: 250.0, pinned: true, flexibleSpace: new FlexibleSpaceBar( background: Image.network('https://placeimg.com/500/370/any'), ), ),
The length is set to be close to Android native collapsing toolbar, it is pinned to represent a regular AppBar when scrolled up and we have an image inside of it when it is scrolled down and widened to maximum.
Notice how much easier is to set an image from internet than in native Android.
We usually want to have our SliverAppBar in CustomScrollView widget and if we have a list of items in our application body, we can’t use ListView in CustomScrollView.
That is why we need to use SliverList. There’s almost no difference.
ListView is a SliverList. Same with GridView, which is a SliverGrid.
They are doing exactly the same thing. The only difference between them is that SliverList is a sliver, not a widget. Which means it’s used inside a ScrollView, usually CustomScrollView.
ListView is nothing else but a biding of SliverList to transform it into a Widget to make it usable alongside other widgets such as Row for example
Here is the simple usage of SliverAppBar which is easy to adjust for your needs:
import 'package:flutter/material.dart'; import 'login.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widgetbuild(BuildContext context) { // TODO: implement build returnMaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override State<StatefulWidget>createState() { // TODO: implement createState return_MyHomePageState(); } } class _MyHomePageState extends State<MyHomePage> { @override Widgetbuild(BuildContext context) { // TODO: implement build returnScaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( expandedHeight: 250.0, pinned: true, flexibleSpace: new FlexibleSpaceBar( background: Image.network('https://placeimg.com/500/370/any'), ), ), newSliverList( delegate: newSliverChildBuilderDelegate((context, index) =>newCard( child: new Container( padding: EdgeInsets.all(10.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ CircleAvatar( backgroundColor: Colors.brown, backgroundImage: new NetworkImage( "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR17d21Bvtz-Ua1w5v8MLQEop69a5XTZcr-jk0ukfTbupRw-g1P"), ), SizedBox( width: 10.0, ), Text("Description of the list item") ], ), ), )), ) ], ), ); } }Share with your friends