Problem: Drawer Icon doesnt show in connection with sliver app bar - flutter

Question

So I have following problem. I dont seem to be able to show the drawer
Icon in connection with my code. Although its a Scaffold property, it just isnt depicted. Below is working code where you can reproduce the problem. I just dont understand why it isnt working & couldnt fix it. I tried to add the drawer in all parts of my Scaffold at the top, middle bottom, but nothing seems to work. Any suggestions?
import 'package:flutter/material.dart';
import 'package:flutter/rendering.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: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
DateTime? lastPressed;
final HideNavbar hiding = HideNavbar();
int _selectedIndex = 1;
List<Widget> _widgetOptions = <Widget>[
Text("Favorites()"),
Text("BodyHomeScreen()"),
Text("Kontakt()"),
];
void _onItemTap(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFF6F6F6),
body: WillPopScope(
onWillPop: () async {
final now = DateTime.now();
final maxDuration = Duration(seconds: 2);
final isWarning =
lastPressed == null || now.difference(lastPressed!) > maxDuration;
if (isWarning) {
lastPressed = DateTime.now();
final snackBar = SnackBar(
content: Container(
//color: Colors.white,
decoration: BoxDecoration(
color: Color(0xFF03DAC6),
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.fromLTRB(0, 0, 0, 20),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Doppelklick zum verlassen',
textAlign: TextAlign.center,
),
),
),
backgroundColor: Colors.transparent,
elevation: 1000,
behavior: SnackBarBehavior.floating,
duration: maxDuration,
);
ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(snackBar);
return false;
} else {
return true;
}
},
child: CustomScrollView(
controller: hiding.controller,
slivers: [
SliverAppBar(
backgroundColor: Color(0xFF3FC1C9),
automaticallyImplyLeading: false,
elevation: 0,
title: Text(
"AutoTest",
style: TextStyle(color: Colors.white),
),
centerTitle: true,
expandedHeight: 120,
flexibleSpace: FlexibleSpaceBar(
title: _selectedIndex == 1
? Text("Marke auswählen")
: _selectedIndex == 2
? Text("Schreibe uns!")
: Text("Deine Modelle"),
centerTitle: true,
),
),
SliverToBoxAdapter(child: _widgetOptions.elementAt(_selectedIndex)),
],
),
),
bottomNavigationBar: ValueListenableBuilder(
valueListenable: hiding.visible,
builder: (context, bool value, child) => AnimatedContainer(
duration: Duration(milliseconds: 500),
height: value ? kBottomNavigationBarHeight : 0.0,
child: Wrap(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
boxShadow: [
BoxShadow(
color: Colors.black38, spreadRadius: 0, blurRadius: 10),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
iconSize: 30,
backgroundColor: Colors.white,
selectedItemColor: Color(0xFF3FC1C9),
unselectedItemColor: Color(0xff6B705C),
selectedFontSize: 15,
unselectedFontSize: 0,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: "Favorites",
),
BottomNavigationBarItem(
icon: Icon(Icons.home_rounded),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(Icons.contact_page_outlined),
label: "Contact",
),
],
currentIndex: _selectedIndex,
onTap: _onItemTap,
),
),
),
],
),
),
),
drawer: Drawer(
),
);
}
}
class HideNavbar {
final ScrollController controller = ScrollController();
final ValueNotifier<bool> visible = ValueNotifier<bool>(true);
HideNavbar() {
visible.value = true;
controller.addListener(
() {
if (controller.position.userScrollDirection ==
ScrollDirection.reverse) {
if (visible.value) {
visible.value = false;
}
}
if (controller.position.userScrollDirection ==
ScrollDirection.forward) {
if (!visible.value) {
visible.value = true;
}
}
},
);
}
void dispose() {
controller.dispose();
visible.dispose();
}
}

Answer 1

I added a icon at SliverAppBar so that you can open it from there, also it will open from left side of screen just by swapping . let me know is something else you needed to be modified.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
DateTime? lastPressed;
final HideNavbar hiding = HideNavbar();
int _selectedIndex = 1;
List<Widget> _widgetOptions = <Widget>[
Text("Favorites()"),
Text("BodyHomeScreen()"),
Text("Kontakt()"),
];
void _onItemTap(int index) {
setState(() {
_selectedIndex = index;
});
}
final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key
#override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
backgroundColor: Color(0xFFF6F6F6),
drawer: Drawer(
child: Text("Drawer here"),
),
body: WillPopScope(
onWillPop: () async {
final now = DateTime.now();
final maxDuration = Duration(seconds: 2);
final isWarning =
lastPressed == null || now.difference(lastPressed!) > maxDuration;
if (isWarning) {
lastPressed = DateTime.now();
final snackBar = SnackBar(
content: Container(
//color: Colors.white,
decoration: BoxDecoration(
color: Color(0xFF03DAC6),
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.fromLTRB(0, 0, 0, 20),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Doppelklick zum verlassen',
textAlign: TextAlign.center,
),
),
),
backgroundColor: Colors.transparent,
elevation: 1000,
behavior: SnackBarBehavior.floating,
duration: maxDuration,
);
ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(snackBar);
return false;
} else {
return true;
}
},
child: CustomScrollView(
controller: hiding.controller,
slivers: [
SliverAppBar(
backgroundColor: Color(0xFF3FC1C9),
automaticallyImplyLeading: false,
elevation: 0,
title: Text(
"AutoTest",
style: TextStyle(color: Colors.white),
),
leading: IconButton(
onPressed: () {
_key.currentState!.openDrawer();
// _key.currentState!.openEndDrawer();
},
icon: Icon(
Icons.home,
),
),
centerTitle: true,
expandedHeight: 120,
flexibleSpace: FlexibleSpaceBar(
title: _selectedIndex == 1
? Text("Marke auswählen")
: _selectedIndex == 2
? Text("Schreibe uns!")
: Text("Deine Modelle"),
centerTitle: true,
),
),
SliverToBoxAdapter(child: _widgetOptions.elementAt(_selectedIndex)),
],
),
),
bottomNavigationBar: ValueListenableBuilder(
valueListenable: hiding.visible,
builder: (context, bool value, child) => AnimatedContainer(
duration: Duration(milliseconds: 500),
height: value ? kBottomNavigationBarHeight : 0.0,
child: Wrap(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
boxShadow: [
BoxShadow(
color: Colors.black38, spreadRadius: 0, blurRadius: 10),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
iconSize: 30,
backgroundColor: Colors.white,
selectedItemColor: Color(0xFF3FC1C9),
unselectedItemColor: Color(0xff6B705C),
selectedFontSize: 15,
unselectedFontSize: 0,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: "Favorites",
),
BottomNavigationBarItem(
icon: Icon(Icons.home_rounded),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(Icons.contact_page_outlined),
label: "Contact",
),
],
currentIndex: _selectedIndex,
onTap: _onItemTap,
),
),
),
],
),
),
),
);
}
}
class HideNavbar {
final ScrollController controller = ScrollController();
final ValueNotifier<bool> visible = ValueNotifier<bool>(true);
HideNavbar() {
visible.value = true;
controller.addListener(
() {
if (controller.position.userScrollDirection ==
ScrollDirection.reverse) {
if (visible.value) {
visible.value = false;
}
}
if (controller.position.userScrollDirection ==
ScrollDirection.forward) {
if (!visible.value) {
visible.value = true;
}
}
},
);
}
void dispose() {
controller.dispose();
visible.dispose();
}
}