fluttercommunity / fluttercommunity/flutter_sticky_headers

EXAMPLE: how to do nesting with this plugin

Open
#22 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
Dart
Stars
1.2k
Forks
130
PR merge metrics
No merged PRs in 30d

Description

```
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 {
@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: [
SliverList(
delegate: SliverChildListDelegate([
banner,
StickyHeaderBuilder(
builder: (context, stuckAmount) {
return toolBar;
},
content: Container(
padding: EdgeInsets.all(32),
child: Column(
children: [
aSection,
aSection,
aSection,
]
),
),
),
]),
),
]
),
),
);
}
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.