How to use scrollable widget to draw one UI with complex header? - flutter

Question

I am the new learner on Flutter. Now I have to implement one UI (Link) for one project. I think I should use CustomerScrollView or NestedScrollView to finish it. I tried my best but I sucked at implementing the header SliverAppBar and ADBar. Could anyone help to give some suggestions for it?
I tried to use NestedScrollView, and put all items into SliverAppBar, I encountered one problem. If I used FlexibleSpaceBar, all items were all zoomed out of the phone when initializing, you could see nothing until you scrolled up over a distance. If I gave up FlexibleSpaceBar and use normal Widget, it seemed OK, but if I tried to scroll up and once Ad Bar overlapped the text item, Error "BOTTOM OVERFLOWED XX PIXELS" would be disappeared.
class _MyPageState extends State<MyPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appbar: AppBar(/*build my AppBar*/),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
...,
expandedHeight: 180,
flexibleSpace: FlexibleSpaceBar( //if use, all texts are out of phone when initializing
//if not use, Error('BOTTOM OVERFLOWED xx PIXELS') while scrolling up
title: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Text 1'),
Text('Text 2'),
Text('Text 3'),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Text 4'),
Text('Text 5'),
Text('Text 6'),
],
),
],
)
),
),
//implement AD Bar
SliverPersistentHeader(
delegate: _SliverPersistentHeaderDelegate(_buildADBar())
),
)
];
},
body: //build body
GridView.count(
crossAxisCount: 2,
children: ...
),
),
);
}
}

Answer 1

as an option
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('App Bar'),
centerTitle: true,
elevation: 0,
),
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 180,
floating: false,
elevation: 0,
backgroundColor: Colors.green,
flexibleSpace: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Text 1'),
Text('Text 2'),
Text('Text 3'),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Text 4'),
Text('Text 5'),
Text('Text 6'),
],
),
],
),
),
),
),
SliverAppBar(
pinned: true,
elevation: 0,
flexibleSpace: Container(
alignment: Alignment.center,
height: kToolbarHeight,
color: Colors.redAccent,
child: Text('AD Bar'),
),
),
SliverGrid.count(
crossAxisCount: 2,
children: List.generate(20, (index) {
return Card(
color: Colors.white,
);
}),
),
],
),
),
);
}
}

Answer 2

This is what you need to do:
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Collapsing List Demo')),
body: CollapsingList(),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
#required this.minHeight,
#required this.maxHeight,
#required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
#override
double get minExtent => minHeight;
#override
double get maxExtent => math.max(maxHeight, minHeight);
#override
Widget build(
BuildContext context,
double shrinkOffset,
bool overlapsContent)
{
return new SizedBox.expand(child: child);
}
#override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
class CollapsingList extends StatelessWidget {
SliverPersistentHeader makeHeader(String headerText) {
return SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 60.0,
maxHeight: 200.0,
child: Container(
color: Colors.lightBlue, child: Center(child:
Text(headerText))),
),
);
}
#override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
makeHeader('Header Section 1'),
SliverGrid.count(
crossAxisCount: 3,
children: [
Container(color: Colors.red, height: 150.0),
Container(color: Colors.purple, height: 150.0),
Container(color: Colors.green, height: 150.0),
Container(color: Colors.orange, height: 150.0),
Container(color: Colors.yellow, height: 150.0),
Container(color: Colors.pink, height: 150.0),
Container(color: Colors.cyan, height: 150.0),
Container(color: Colors.indigo, height: 150.0),
Container(color: Colors.blue, height: 150.0),
],
),
makeHeader('Header Section 2'),
SliverFixedExtentList(
itemExtent: 150.0,
delegate: SliverChildListDelegate(
[
Container(color: Colors.red),
Container(color: Colors.purple),
Container(color: Colors.green),
Container(color: Colors.orange),
Container(color: Colors.yellow),
],
),
),
makeHeader('Header Section 3'),
SliverGrid(
gridDelegate:
new SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 20,
),
),
makeHeader('Header Section 4'),
// Yes, this could also be a SliverFixedExtentList. Writing
// this way just for an example of SliverList construction.
SliverList(
delegate: SliverChildListDelegate(
[
Container(color: Colors.pink, height: 150.0),
Container(color: Colors.cyan, height: 150.0),
Container(color: Colors.indigo, height: 150.0),
Container(color: Colors.blue, height: 150.0),
],
),
),
],
);
}
}
I'll definitely recommend that you read this Slivers Demystified
Hope this helps.