flutter_sticky_headers
flutter_sticky_headers copied to clipboard
EXAMPLE: how to do nesting with this plugin
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers/widget.dart';
//-----Start App
void main() => runApp(MyApp());
//-----Entry Point
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StatelessLink();
}
}
//-----Statless Link Required Between Entry Point And App
class StatelessLink extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Nested Picker Link',
home: Test(),
);
}
}
//-----Test Widget
class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
@override
Widget build(BuildContext context) {
double toolBarSize = 50;
double sectionSize = 45;
Widget toolBar = Container(
width: MediaQuery.of(context).size.width,
height: toolBarSize,
color: Colors.red.withOpacity(1),
child: Text("tool bar"),
);
Widget banner = Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Colors.white,
child: Text("banner"),
);
Widget subSection = StickyHeaderBuilder(
builder: (context, stuckAmount) {
stuckAmount = stuckAmount.clamp(0.0, 1.0);
return Padding(
padding: EdgeInsets.only(top: (toolBarSize + sectionSize) * (1.0 - stuckAmount)),
child: Container(
color: Colors.teal,
width: MediaQuery.of(context).size.width,
height: 26,
child: Text("subsection"),
),
);
},
content: Container(
color: Colors.grey,
width: MediaQuery.of(context).size.width,
height: 38,
child: Text("section body"),
),
);
Widget aSection = StickyHeaderBuilder(
builder: (context, stuckAmount) {
stuckAmount = stuckAmount.clamp(0.0, 1.0);
return Padding(
padding: EdgeInsets.only(top: toolBarSize * (1.0 - stuckAmount)),
child: Container(
color: Colors.pink,
width: MediaQuery.of(context).size.width,
height: sectionSize,
child: Text("section"),
),
);
},
content: Container(
color: Colors.yellow,
width: MediaQuery.of(context).size.width,
height: 500,
child: Container(
padding: EdgeInsets.all(32),
child: Column(
children: [
subSection,
subSection,
subSection,
]
),
),
),
);
return Scaffold(
backgroundColor: Theme.of(context).primaryColorDark,
body: SafeArea(
child: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
banner,
StickyHeaderBuilder(
builder: (context, stuckAmount) {
return toolBar;
},
content: Container(
padding: EdgeInsets.all(32),
child: Column(
children: [
aSection,
aSection,
aSection,
]
),
),
),
]),
),
]
),
),
);
}
}