Clever Geek Handbook

How do I implement a sidebar that swipes to the left?

I am new to Flutter and just finished a getting started tutorial. I would like to create a side menu that will appear on the left side when you swipe (like Gmail on Android).

Unfortunately I cannot find such a layout in the documentation and the example from the flutter gallery is a little messy.

Can someone explain to me how to implement such a widget?

+6


source to share


3 answers


Here is a simple box example (I just adapted the default project setting from flutter create

):

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('TestProject'),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget> [
            new DrawerHeader(child: new Text('Header'),),
            new ListTile(
              title: new Text('First Menu Item'),
              onTap: () {},
            ),
            new ListTile(
              title: new Text('Second Menu Item'),
              onTap: () {},
            ),
            new Divider(),
            new ListTile(
              title: new Text('About'),
              onTap: () {},
            ),
          ],
        )
      ),
      body: new Center(
        child: new Text(
          'Center',
        ),
      ),
    );
  }
}


docs is a good place to start;)

Btw: including the drawer on your scaffold, also takes care of the menu button and left swipe gesture for you.

+16


source


The inventory example has slightly less complex uses Drawer

.



+3


source


In Scaffold, just specify drawer: Drawer()

Example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(   // this will set the drawer
        child: MyWidget // render your drawer Widget here
      ),
      ... // props hidden
    );
  }
}
0


source






More articles:


All Articles