Skip to content

Instantly share code, notes, and snippets.

@Piinks
Created September 29, 2020 17:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Piinks/f832420f7aa0f191c2cfd53ac8734852 to your computer and use it in GitHub Desktop.
Save Piinks/f832420f7aa0f191c2cfd53ac8734852 to your computer and use it in GitHub Desktop.
NestedScrollView Example
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (c, i) => [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(c),
sliver: SliverAppBar(
pinned: true,
backgroundColor: Colors.black,
expandedHeight: 250,
flexibleSpace: Column(
children: [
Expanded(
flex: 1,
child: Container(
child: Center(child: Text('Some Title')),
color: Colors.black,
),
),
Expanded(
flex: 5,
child: Container(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Center(child: Text("SomeContainer")),
Center(child: Text("SomeContainer2")),
]
)
),
),
],
),
bottom: TabBar(
labelColor: Colors.black,
indicatorSize: TabBarIndicatorSize.label,
controller: _tabController,
tabs: <Widget>[
Tab(text: "Tab1"),
Tab(text: "Tab2"),
],
),
),
),
], // outer
body: TabBarView(
controller: _tabController,
children: <Widget>[
Builder(
builder: (c) => CustomScrollView(
slivers: [
SliverOverlapInjector(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(c)),
SliverFillRemaining(
child: Container(
color: Colors.green,
child: Center(child: Text("SomeTextView")),
),
),
],
),
),
Builder(
builder: (c) => CustomScrollView(
slivers: [
SliverOverlapInjector(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(c)),
SliverPadding(
padding: const EdgeInsets.all(15.0),
sliver: SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(c, i) => Container(child: Text('list item $i')),
),
),
),
],
),
),
],
),
),
)
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment