Customizing floating action button - flutter

Question

I am using sliver list and I want to use both floating action button and sliding_up_panel from pub with the following behaviour: when I scroll down my list, the floating action button disappears; when I scroll up the fab appears. Moreover, the fab should disappear when I slide up (open) the menu.
As you can see above, the floating action button is all on the sliding element, but I want it to be between the sliding element and the scrolling item list.
Also in above picture, the problem is that the floating button is actually visible but I want to hide it with a nice animation when I slide up the sliding menu.
I hope my question is clear!!!

Answer 1

Edit please do it with scroll controller
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SliverExample(
bodyWidgets: Text('Hello Body'),
backgroundWidget: Text('Hello Background'),
),
);
}
}
Widget listItem(Color color, String title) => Container(
height: 100.0,
color: color,
child: Center(
child: Text(
"$title",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),
);
class SliverExample extends StatefulWidget {
final Widget backgroundWidget;
final Widget bodyWidgets;
SliverExample({
this.backgroundWidget,
this.bodyWidgets,
});
#override
_SliverExampleState createState() => _SliverExampleState();
}
class _SliverExampleState extends State<SliverExample> {
// I need something like this
// To determine if SliverAppBar is expanded or not.
ScrollController _scrollController;
bool isAppBarExpanded = false;
#override
void initState() {
super.initState();
_scrollController = ScrollController()
..addListener(() => setState(() {
print('Scroll view Listener is called offset ${_scrollController.offset}');
}));
}
bool get _changecolor {
return _scrollController.hasClients
&& _scrollController.offset > (200-kToolbarHeight);
}
bool get _hideFAB {
return _scrollController.hasClients
&& _scrollController.offset > (200-kToolbarHeight);
}
#override
Widget build(BuildContext context) {
// To change the item's color accordingly
// To be used in multiple places in code
//Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;
// In my case PrimaryColor is white,
// and the background widget is dark
return Scaffold(
body: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverAppBar(
pinned: true,
leading: BackButton(
color: _changecolor? Colors.white: Colors.black, // Here
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: _changecolor? Colors.white: Colors.black, // Here
),
onPressed: () {},
),
],
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'title',
style: TextStyle(
fontSize: 18.0,
color: _changecolor? Colors.white: Colors.black, // Here
),
),
// Not affecting the question.
background: widget.backgroundWidget,
),
),
SliverList(
///Use SliverChildListDelegate and provide a list
///of widgets if the count is limited
///
///Lazy building of list
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
/// To convert this infinite list to a list with "n" no of items,
/// uncomment the following line:
/// if (index > n) return null;
return listItem(Colors.grey, "Sliver List item: $index");
},
/// Set childCount to limit no.of items
/// childCount: 100,
),
),
// Not affecting the question.
SliverToBoxAdapter(child: widget.bodyWidgets),
],
),
floatingActionButton: _hideFAB? Container() : FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add,),
),
);
}
}