Question 127903 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Creating a Side menu bar in flutter using rows and columns

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    I think your code is correct. Your code, as you included, has nothing inside the column, so it won’t show up. If you add anything into it with size, it shows up. I’ve used your code and added a red square of size 200×200 to the column:

               Container(
            color: Colors.blue[800], // Should I use a container here to create the menu
            child: Column(
              children: [
                Container(width: 200, height: 200, color: Colors.red,),
              ],
            ),
          ),

    It looks like this:

    running Flutter app

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search