Ufdjrw

Can someone help me achieve custom Header(AppBar) and footer(bottomNavigationBar). The Header height resize min:20 to max:50 and Footer pinned(show/hide) according to user scroll. In most case, the header should be very much like AppBar/SliverAppbar.

The reason custom Header/Footer is that I need to draw widget shape over AppBar and bottomNavigationBar. And with the default AppBar/bottomNavigationBar there is no way to customized the index, so whatever widget shape i have in the body is alway stay in the back.

This is the code I am working on, its seem a little bit acceptable, would you help me improve?

import 'package:flutter/material.dart';

class CustomScrollOne extends StatefulWidget 
 @override
 CustomScrollOneState createState() => new CustomScrollOneState();


class CustomScrollOneState extends State<CustomScrollOne> with SingleTickerProviderStateMixin
 GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
 ScrollController scrollController;
 double scrollOffset = 0.0;
 double scrollOffsetLast = 0.0;
 double upperSize = 50.0;

 @override
 initState() 
 scrollController = new ScrollController();
 scrollController.addListener(updateOffset);
 super.initState();
 

 @override
 dispose() 
 scrollController.removeListener(updateOffset);
 scrollController.dispose();
 super.dispose();
 

 void updateOffset() 
 setState(() 
 scrollOffset = scrollController.offset;
 );
 

 scrollNotificationListener(ScrollNotification scrollNotification) 
 if (scrollNotification is ScrollUpdateNotification) 
 double minTop = 20.0;
 double maxTop = 50.0;

 if (scrollNotification.scrollDelta < 0) 
 // NOTE forward to normal
 if (upperSize < maxTop) 
 double activePosition = scrollOffsetLast + upperSize - scrollOffset;
 upperSize = (activePosition).clamp(upperSize, maxTop);
 
 else if (scrollNotification.scrollDelta > 0) 
 // NOTE reverse to large
 if (upperSize > minTop)
 double activePosition = scrollOffsetLast + upperSize - scrollOffset;
 upperSize = (activePosition).clamp(minTop, upperSize);
 
 
 else if (scrollNotification is ScrollEndNotification) 
 scrollOffsetLast = scrollController.offset;
 
 

 @override
 Widget build(BuildContext context) 
 return Scaffold(
 key: scaffoldKey,
 backgroundColor: Colors.white,
 body: new SafeArea(
 child: Stack(
 alignment: AlignmentDirectional.topCenter,
 children: <Widget>[
 Positioned(
 top: upperSize,
 left: 14,
 right:14,
 bottom: 50,
 child: Container(
 color: Colors.grey[200],
 child: NotificationListener<ScrollNotification>(
 onNotification: (e)=>scrollNotificationListener(e),
 child: _listView(),
 )
 ),
 ),
 Positioned(
 top: 0,
 left: 50,
 right: 50,
 child: Container(
 width: 300,
 height: upperSize,
 color: Colors.grey[100],
 child: Text(upperSize.toString()),
 ),
 ),
 Positioned(
 top: 0,
 left: 1,
 bottom: 0,
 child: Container(
 width: 10,
 height: upperSize,
 color: Colors.red
 )
 )
 ]
 )
 )
 );
 

 Widget _listView() 
 return new ListView.builder(
 itemCount: 60,
 itemBuilder: _listViewItem,
 controller: scrollController
 );
 

 Widget _listViewItem(BuildContext context, int index) 
 return new Container(
 padding: EdgeInsets.all(10),
 margin: EdgeInsets.all(10),
 decoration: BoxDecoration(
 color: Colors.grey[50],
 // border: Border.all(width:0.2,color: Colors.grey)
 ),
 child: new Text('Item $index')
 );