test.dart

import 'package:flutter/material.dart';


class TestApp extends StatelessWidget {

	TestApp({
		Key key,
	}) : super(key: key);

	@override
	Widget build(BuildContext context) {
		return new MaterialApp(
			theme: ThemeData.dark(),
			home: new TestComponent(),
		);
	}

}

class TestComponent extends StatelessWidget {

	final _tabs = [
		'Test 1',
		'Test 2',
		'Test 3',
	];

	@override
	Widget build(BuildContext context) {
		return DefaultTabController(
			length: _tabs.length, // This is the number of tabs.
			child: NestedScrollView(
				headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
					// These are the slivers that show up in the "outer" scroll view.
					return <Widget>[
						SliverOverlapAbsorber(
							// This widget takes the overlapping behavior of the SliverAppBar,
							// and redirects it to the SliverOverlapInjector below. If it is
							// missing, then it is possible for the nested "inner" scroll view
							// below to end up under the SliverAppBar even when the inner
							// scroll view thinks it has not been scrolled.
							// This is not necessary if the "headerSliverBuilder" only builds
							// widgets that do not overlap the next sliver.
							handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
							child: SliverAppBar(
								pinned: true,
								expandedHeight: 150.0,
								// The "forceElevated" property causes the SliverAppBar to show
								// a shadow. The "innerBoxIsScrolled" parameter is true when the
								// inner scroll view is scrolled beyond its "zero" point, i.e.
								// when it appears to be scrolled below the SliverAppBar.
								// Without this, there are cases where the shadow would appear
								// or not appear inappropriately, because the SliverAppBar is
								// not actually aware of the precise position of the inner
								// scroll views.
								forceElevated: innerBoxIsScrolled,
								flexibleSpace: FlexibleSpaceBar(
									centerTitle: true,
									title: Text("Collapsing Toolbar",
										style: TextStyle(
											color: Colors.white,
										)),
									titlePadding: EdgeInsets.only(bottom: 66.0), // TODO: do not use hardcoded value here
									background: Image.network(
										"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
										fit: BoxFit.cover,
									)),
								bottom: TabBar(
									// These are the widgets to put in each tab in the tab bar.
									tabs: _tabs.map((String name) => Tab(text: name)).toList(),
								),

							),
						),
					];
				},
				body: TabBarView(
					// These are the contents of the tab views, below the tabs.
					children: _tabs.map((String name) {
						return SafeArea(
							top: false,
							bottom: false,
							child: Builder(
								// This Builder is needed to provide a BuildContext that is "inside"
								// the NestedScrollView, so that sliverOverlapAbsorberHandleFor() can
								// find the NestedScrollView.
								builder: (BuildContext context) {
									return CustomScrollView(
										// The "controller" and "primary" members should be left
										// unset, so that the NestedScrollView can control this
										// inner scroll view.
										// If the "controller" property is set, then this scroll
										// view will not be associated with the NestedScrollView.
										// The PageStorageKey should be unique to this ScrollView;
										// it allows the list to remember its scroll position when
										// the tab view is not on the screen.
										key: PageStorageKey<String>(name),
										slivers: <Widget>[
											SliverOverlapInjector(
												// This is the flip side of the SliverOverlapAbsorber above.
												handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
											),
											SliverPadding(
												padding: const EdgeInsets.all(8.0),
												// In this example, the inner scroll view has
												// fixed-height list items, hence the use of
												// SliverFixedExtentList. However, one could use any
												// sliver widget here, e.g. SliverList or SliverGrid.
												sliver: SliverFixedExtentList(
													// The items in this example are fixed to 48 pixels
													// high. This matches the Material Design spec for
													// ListTile widgets.
													itemExtent: 48.0,
													delegate: SliverChildBuilderDelegate(
															(BuildContext context, int index) {
															// This builder is called for each child.
															// In this example, we just number each list item.
															return Text('Item $index');
														},
														// The childCount of the SliverChildBuilderDelegate
														// specifies how many children this inner list
														// has. In this example, each tab has a list of
														// exactly 30 items, but this is arbitrary.
														childCount: 30,
													),
												),
											),
										],
									);
								},
							),
						);
					}).toList(),
				),
			),
		);
	}

}