Creating a Side menu bar in flutter using rows and columns

Issue

Login Screen <- picture for the Login Screen

I am currently working on a GUI for a basic login screen using flutter/dart and am trying to understand how to create the menu bar as seen on the left side of the screen. Currently my thought process was to have a row which includes text fields for the username and password, which seems to be working correctly. Then using a column for the menu bar on the side. I am new to using flutter and understand the fundamentals for creating a basic app, although I'm having trouble understanding if I should use a column for the menu bar or if there may be a better approach.

  class LoginPage extends HookWidget {
  LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: Text(useL10n().loginTitle),
        actions: <Widget> [
          IconButton(
            icon: Icon(
              Icons.bluetooth,

            ), onPressed: () {
          },
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15),
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'USERNAME',
                  ),
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15),
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'PASSWORD',
                  ),
                ),
              ),
            ),
            Container(
              color: Colors.blue[800], // Should I use a container here to create the menu
                child: Column(
                  ),
                ),
          ],
        ),
      ),
        );
  }
} 

The problem I am having is that I have a nested column inside the row, so it does not even show up when I build and run the code. I only see the rows for username and password.

Solution

There is a widget called Drawer. use it to create a drawer, then add whatever widget you want as a child.

Scaffold widget has an attribute called drawer. Pass to it a Drawer() widget.

Scaffold(
  appBar:AppBar(),
  drawer:Drawer(), // this is the attribute for the drawer (left side menu)
  floatingActionButton:FloatingActionButton(),
  body:Container(),
)

Doing so, will create by default a menu button on the left side of the AppBar.

Answered By - Francis Nduba Numbi