How to implement a side menu that swipes from the left?

后端 未结 3 1148
刺人心
刺人心 2021-02-07 16:39

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

3条回答
  •  离开以前
    2021-02-07 16:42

    Here is an example for a simple Drawer (I just adapted the default project setup 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 {
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('TestProject'),
          ),
          drawer: new Drawer(
            child: new ListView(
              children:  [
                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',
            ),
          ),
        );
      }
    }
    

    The docs are a good place to start ;)

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

提交回复
热议问题