How to create a working sidebar in Flutter

Question

Recently I was following a speedcode of a guy and finish it.

And then I see that the code "appBar" is using a class the screenshot of the code. It's different than any tutorial I found, so I modified the class to add the sidebar(drawer), its working fine but there's a problem.

The sidebar is on bottom floor, the body is on second floor. You will understand with screenshot below

this is before I click the sidebar button

this is after I click the button

This is the main screen code:

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _country = 'ID';

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: CustomAppBar(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildPreventionTips(screenHeight),
          _buildYourOwnTest(screenHeight),
        ],
      ),
    );
  }

And this is the custombarapp code

import 'package:flutter/material.dart';
import 'package:covid_19_master/config/palette.dart';

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('this is appbar'),
        backgroundColor: Palette.primaryColor,
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(child: Text('ini header ya')),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

Answer 1

The problem is with your CustomAppBar(), it has its own Scaffold(), which comes under another Scaffold() in your parent Class that is HomeScreen(). Avoid this type of thing, because Flutter StatefulWidget cannot have nested Scaffolds.

Do not make things complex. Rather use your AppBar() and Drawer() in the same HomePage itself, with a property AppBar() and Drawer() respectively. Then use it inside your view.

MainPage

Look at the comments as well to get the full picture, and you will be good :)

class _HomeScreenState extends State<HomeScreen> {
  String _country = 'ID';

  // Appbar code with Appbar Data Type
  Appbar _customAppBar() => AppBar(
    title: Text('this is appbar'),
    backgroundColor: Palette.primaryColor,
    elevation: 0.0,
  );

  // Drawer widget with Drawer property
  Drawer _customDrawer() => Drawer(
     child: ListView(
       children: <Widget>[
         DrawerHeader(child: Text('ini header ya')),
         ListTile(
           title: Text('ini listnya'),
         ),
         ListTile(
           title: Text('ini listnya'),
         ),
         ListTile(
           title: Text('ini listnya'),
         ),
         ListTile(
           title: Text('ini listnya'),
         )
       ]
     )
  );

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      // use it here with Preferred size
      appBar: PreferredSizeWidget(
         preferredSize: Size.fromHeight(kToolbarHeight),
         child: _customAppBar() // your appabr
      ),
      // your drawer
      drawer: _customDrawer(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildPreventionTips(screenHeight),
          _buildYourOwnTest(screenHeight),
        ],
      ),
    );
  }
}