drawer_demo.dart 8.27 KB
Newer Older
1 2 3 4 5 6
// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

7 8 9
const String _kAsset0 = 'people/square/trevor.png';
const String _kAsset1 = 'people/square/stella.png';
const String _kAsset2 = 'people/square/sandra.png';
10
const String _kGalleryAssetsPackage = 'flutter_gallery_assets';
11 12

class DrawerDemo extends StatefulWidget {
13
  static const String routeName = '/material/drawer';
14 15 16 17 18 19 20 21

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

class _DrawerDemoState extends State<DrawerDemo> with TickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

22
  static const List<String> _drawerContents = <String>[
23 24 25 26 27
    'A', 'B', 'C', 'D', 'E',
  ];

  AnimationController _controller;
  Animation<double> _drawerContentsOpacity;
28
  Animation<Offset> _drawerDetailsPosition;
29 30 31 32 33 34 35 36 37 38 39 40 41
  bool _showDrawerContents = true;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );
    _drawerContentsOpacity = new CurvedAnimation(
      parent: new ReverseAnimation(_controller),
      curve: Curves.fastOutSlowIn,
    );
42 43 44
    _drawerDetailsPosition = new Tween<Offset>(
      begin: const Offset(0.0, -1.0),
      end: Offset.zero,
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
    ).animate(new CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  IconData _backIcon() {
    switch (Theme.of(context).platform) {
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        return Icons.arrow_back;
      case TargetPlatform.iOS:
        return Icons.arrow_back_ios;
    }
    assert(false);
    return null;
  }

  void _showNotImplementedMessage() {
70
    Navigator.pop(context); // Dismiss the drawer.
71
    _scaffoldKey.currentState.showSnackBar(const SnackBar(
72
      content: Text("The drawer's items don't do anything")
73 74 75 76 77 78 79 80 81 82
    ));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(_backIcon()),
83
          alignment: Alignment.centerLeft,
84 85 86 87 88
          tooltip: 'Back',
          onPressed: () {
            Navigator.pop(context);
          },
        ),
89
        title: const Text('Navigation drawer'),
90 91
      ),
      drawer: new Drawer(
92
        child: new Column(
93 94
          children: <Widget>[
            new UserAccountsDrawerHeader(
95 96
              accountName: const Text('Trevor Widget'),
              accountEmail: const Text('trevor.widget@example.com'),
97
              currentAccountPicture: const CircleAvatar(
98
                backgroundImage: AssetImage(
99 100 101 102
                  _kAsset0,
                  package: _kGalleryAssetsPackage,
                ),
              ),
103
              otherAccountsPictures: <Widget>[
104 105 106 107 108 109 110
                new GestureDetector(
                  onTap: () {
                    _onOtherAccountsTap(context);
                  },
                  child: new Semantics(
                    label: 'Switch to Account B',
                    child: const CircleAvatar(
111
                      backgroundImage: AssetImage(
112 113 114 115
                        _kAsset1,
                        package: _kGalleryAssetsPackage,
                      ),
                    ),
116 117
                  ),
                ),
118 119 120 121 122 123 124
                new GestureDetector(
                  onTap: () {
                    _onOtherAccountsTap(context);
                  },
                  child: new Semantics(
                    label: 'Switch to Account C',
                    child: const CircleAvatar(
125
                      backgroundImage: AssetImage(
126 127 128 129
                        _kAsset2,
                        package: _kGalleryAssetsPackage,
                      ),
                    ),
130 131
                  ),
                ),
132
              ],
133
              margin: EdgeInsets.zero,
134 135 136 137 138 139 140 141
              onDetailsPressed: () {
                _showDrawerContents = !_showDrawerContents;
                if (_showDrawerContents)
                  _controller.reverse();
                else
                  _controller.forward();
              },
            ),
142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
            new MediaQuery.removePadding(
              context: context,
              // DrawerHeader consumes top MediaQuery padding.
              removeTop: true,
              child: new Expanded(
                child: new ListView(
                  padding: const EdgeInsets.only(top: 8.0),
                  children: <Widget>[
                    new Stack(
                      children: <Widget>[
                        // The initial contents of the drawer.
                        new FadeTransition(
                          opacity: _drawerContentsOpacity,
                          child: new Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: _drawerContents.map((String id) {
                              return new ListTile(
                                leading: new CircleAvatar(child: new Text(id)),
                                title: new Text('Drawer item $id'),
                                onTap: _showNotImplementedMessage,
                              );
                            }).toList(),
165
                          ),
166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187
                        ),
                        // The drawer's "details" view.
                        new SlideTransition(
                          position: _drawerDetailsPosition,
                          child: new FadeTransition(
                            opacity: new ReverseAnimation(_drawerContentsOpacity),
                            child: new Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: <Widget>[
                                new ListTile(
                                  leading: const Icon(Icons.add),
                                  title: const Text('Add account'),
                                  onTap: _showNotImplementedMessage,
                                ),
                                new ListTile(
                                  leading: const Icon(Icons.settings),
                                  title: const Text('Manage accounts'),
                                  onTap: _showNotImplementedMessage,
                                ),
                              ],
                            ),
188
                          ),
189 190
                        ),
                      ],
191
                    ),
192 193
                  ],
                ),
194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209
              ),
            ),
          ],
        ),
      ),
      body: new Center(
        child: new InkWell(
          onTap: () {
            _scaffoldKey.currentState.openDrawer();
          },
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new Container(
                width: 100.0,
                height: 100.0,
210
                decoration: const BoxDecoration(
211
                  shape: BoxShape.circle,
212 213
                  image: DecorationImage(
                    image: AssetImage(
214 215 216
                      _kAsset0,
                      package: _kGalleryAssetsPackage,
                    ),
217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
                  ),
                ),
              ),
              new Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: new Text('Tap here to open the drawer',
                  style: Theme.of(context).textTheme.subhead,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
232 233

  void _onOtherAccountsTap(BuildContext context) {
234
    showDialog<void>(
235
      context: context,
236 237 238 239 240 241 242
      builder: (BuildContext context) {
        return new AlertDialog(
          title: const Text('Account switching not implemented.'),
          actions: <Widget>[
            new FlatButton(
              child: const Text('OK'),
              onPressed: () {
243
                Navigator.pop(context);
244 245 246 247 248
              },
            ),
          ],
        );
      },
249 250
    );
  }
251
}