CustomScrollView + slivers + SliverAppBar

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 body: CustomScrollViewTestRoute(),
 ),
 );
 }
}

class CustomScrollViewTestRoute extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return CustomScrollView(
 slivers: <Widget>[
 SliverAppBar(
 pinned: true,
 expandedHeight: 250.0,
 flexibleSpace: FlexibleSpaceBar(
 title: const Text('Demo'),
 background: Image.network('http://www.ecobentech.com/img/a.jpg',fit: BoxFit.cover,),
 ),
 ),

 SliverPadding(
 padding: const EdgeInsets.all(8.0),
 sliver: SliverGrid( //Grid
 gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
 crossAxisCount: 2, //Grid按两列显示
 mainAxisSpacing: 10.0,
 crossAxisSpacing: 10.0,
 childAspectRatio: 4.0,
 ),
 delegate: new SliverChildBuilderDelegate(
 (BuildContext context, int index) {
 //创建子widget
 return new Container(
 alignment: Alignment.center,
 color: Colors.cyan[100 * (index % 9)],
 child: new Text('grid item $index'),
 );
 },
 childCount: 20,
 ),
 ),
 ),
 //List
 SliverFixedExtentList(
 itemExtent: 50.0,
 delegate: new SliverChildBuilderDelegate(
 (BuildContext context, int index) {
 //创建列表项
 return new Container(
 alignment: Alignment.center,
 color: Colors.lightBlue[100 * (index % 9)],
 child: new Text('list item $index'),
 );
 },
 childCount: 50 //50个列表项
 ),
 ),
 ],
 );
 }
}

来源：oschina

链接：https://my.oschina.net/u/4257651/blog/4301645