preface
Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.
Nicholas Gaulbag, a famous IT expert, once said: The wheel is the ladder of IT progress! Popular frames are the same, with wheels pick one in a million! Flutter, a cross-platform development framework that has been on the rise for the last two years, has a smaller third-party ecosystem than other mature frameworks, but it has a lot of wheels. This series of articles select the wheels commonly used in daily APP development to share, so as to improve the efficiency of brick moving, and hope that the ecology of Flutter will become more and more perfect, with more and more wheels.
This series of articles has been prepared with over 50 wheel recommendations, working for reasons that try to produce an article every 1-2 days.
This series of articles is for those who already have some of the basics of FLUTTER
The body of the
The wheel
- Wheel name: sticky_headers
- Overview of wheels: Flutter adds a sticky header component to scrolling content.
- Wheels by Fluttercommunity.dev (official)
- ★★★★ ★
- ★★★★
- Effect preview:
If the original image fails to load, clickTo view the original image
The installation
dependencies:
sticky_headers: ^ 0.1.8 + 1
Copy the codeimport 'package:sticky_headers/sticky_headers.dart';
Copy the codeMethod of use
In the list item, use StickyHeader(). Basic usage :(default in GIF renderings)
ListView.builder(
itemCount: 12,
itemBuilder: (context, index) {
return StickyHeader(
header: Container( / / header component
height: 50.0,
color: Colors.blueGrey[700],
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
),
content: Container(// Content component
child: Image.network(imgs[index], fit: BoxFit.cover,width: double.infinity, height: 200.0),),); })Copy the codeUse StickyHeaderBuilder() to customize more header effects and events in the list item :(custom header effects in GIF renderings)
ListView.builder(
itemCount: 12,
itemBuilder: (context, index) {
return StickyHeaderBuilder(
builder: (BuildContext context, double stuckAmount) {
stuckAmount = 1.0 - stuckAmount.clamp(0.0.1.0);
return new Container(
height: 50.0,
color: Color.lerp(Colors.blue[700], Colors.red[700], stuckAmount),
padding: new EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: new Row(
children: <Widget>[
new Expanded(
child: new Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
),
new Offstage(
offstage: stuckAmount <= 0.0,
child: new Opacity(
opacity: stuckAmount,
child: new IconButton(
icon: new Icon(Icons.favorite, color: Colors.white),
onPressed: () =>
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text('Favorite #$index'(() (() (() [() (() [() }, content:new Container(
child: new Image.network(imgs[index], fit: BoxFit.cover,
width: double.infinity, height: 200.0),),); })Copy the codeIn the list item, use StickyHeaderBuilder() and overlapHeaders=true to levitate the header over the content :(header floats in GIF)
ListView.builder(
itemCount: 12,
itemBuilder: (context, index) {
return new StickyHeaderBuilder(
overlapHeaders: true,
builder: (BuildContext context, double stuckAmount) {
stuckAmount = 1.0 - stuckAmount.clamp(0.0.1.0);
return new Container(
height: 50.0,
color: Colors.grey[900].withOpacity(0.6 + stuckAmount * 0.4),
padding: new EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: new Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
);
},
content: new Container(
child: new Image.network(imgs[index], fit: BoxFit.cover,
width: double.infinity, height: 200.0),),); })Copy the codeGroup data, render sublists in content, and form rn-like SectionList (GIF SectionList effect)
class StickyHeadersDemo4 extends StatefulWidget {
StickyHeadersDemo4({Key key}) : super(key: key);
@override
_demoState createState() => _demoState();
}
class _demoState extends State<StickyHeadersDemo4> {
List data=[{
"latter":"A"."group": ["A group 1"."A group 1"."A group 1"."A group 1"."A group 1"."A group 1"] {},"latter":"B"."group": ["Group 1 B"."Group 1 B"."Group 1 B"."Group 1 B"."Group 1 B"."Group 1 B"] {},"latter":"C"."group": [Group 1 "C".Group 1 "C".Group 1 "C".Group 1 "C".Group 1 "C".Group 1 "C"] {},"latter":"D"."group": ["D group 1"."D group 1"."D group 1"."D group 1"."D group 1"."D group 1"] {},"latter":"E"."group": ["E group 1"."E group 1"."E group 1"."E group 1"."E group 1"."E group 1"]}];@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("sticky_headers"),
actions: <Widget>[
GoWeb(pluginName: 'sticky_headers')
],
),
body: ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return StickyHeader(
header: Container(
height: 50.0,
color: Colors.blueGrey[700],
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(data[index]['latter'],
style: const TextStyle(color: Colors.white),
),
),
content: Column(
children: buildGroup(data[index]['group']),),); })); }List<Widget> buildGroup(List group){
return group.map((item){
return Container(
height: 60,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20), child: Text(item), ); }).toList(); }}Copy the codeAt the end
- Address of wheel warehouse: pub.flutter-io.cn/packages/st…
- Series demo source: github.com/826327700/f…