Nikita
Nikita

Reputation: 765

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

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();
  }
}

enter image description here

Upvotes: 0

Views: 509

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63689

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. enter image description here

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();
  }
}


Upvotes: 1

Related Questions