Question 209930 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Drawer and Appbar side by side

How can place scaffold and AppBar side by side on flutter ?
something like this :

+-----------+ +--------------------+
|           | |      Appbar        |
|           | +--------------------+
|           |
|  Drawer   |             
|           |
|           |
|           |
+-----------+

NOTE : with Drawer collapse button on AppBar .
I can not found any documentation or any example code for this .

UPDATE like this : (note: this is html & css)
Drawer menu (side by side)

Tags:

2

Answers


  1. 0

    Try below code refer drawer

    return Scaffold(
  appBar: AppBar(title: const Text('Drawer with Appbar')),
  body: const Center(
    child: Text('Drawer Demo'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: const [
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Drawer Header'),
        ),
        ListTile(
          title: Text('Home'),
        ),
        ListTile(
          title: Text('Business'),
        ),
        ListTile(
          title: Text('School'),
        ),
      ],
    ),
  ),
);

    Result with Not click menu button- image

    Result with click menu button (Colapse drawer)-image2

    Login or Signup to reply.
  2. 0

    You can play with this widget where red container will be your Drawer. You can use differernt animation with AnimatedBuilder if neeeded.

    class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<bool> isAppbarExpanded = ValueNotifier(false);

    return Scaffold(
      body: SafeArea(
        child: Row(
          children: [
            ValueListenableBuilder(
              valueListenable: isAppbarExpanded,
              builder: (context, value, child) {
                return AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  width: value ? 200 : 0,
                  child: child,
                );
              },
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
                child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                IconButton(
                  onPressed: () {
                    isAppbarExpanded.value = !isAppbarExpanded.value;
                  },
                  icon: Icon(Icons.menu),
                ),
              ],
            ))
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search