user_accounts_drawer_header.dart 5.56 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
// Copyright 2015 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';
import 'package:flutter/widgets.dart';

import 'debug.dart';

/// A material design [Drawer] header that identifies the app's user.
///
/// The top-most region of a material design drawer with user accounts. The
/// header's [decoration] is used to provide a background.
/// [currentAccountPicture] is the main account picture on the left, while
/// [otherAccountsPictures] are the smaller account pictures on the right.
/// [accountName] and [accountEmail] provide access to the top and bottom rows
/// of the account details in the lower part of the header. When touched, this
/// area triggers [onDetailsPressed] and toggles the dropdown icon on the right.
///
/// Requires one of its ancestors to be a [Material] widget.
///
/// See also:
///
///  * [Drawer]
25
///  * [DrawerHeader], for a drawer header that doesn't show user acounts
26
///  * <https://material.google.com/patterns/navigation-drawer.html>
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
class UserAccountsDrawerHeader extends StatefulWidget {
  /// Creates a material design drawer header.
  ///
  /// Requires one of its ancestors to be a [Material] widget.
  UserAccountsDrawerHeader({
    Key key,
    this.decoration,
    this.currentAccountPicture,
    this.otherAccountsPictures,
    this.accountName,
    this.accountEmail,
    this.onDetailsPressed
  }) : super(key: key);

  /// A callback that gets called when the account name/email/dropdown
  /// section is pressed.
  final VoidCallback onDetailsPressed;

45 46
  /// The background to show in the drawer header.
  final Decoration decoration;
47 48 49 50 51

  /// A widget placed in the upper-left corner representing the current
  /// account picture. Normally a [CircleAvatar].
  final Widget currentAccountPicture;

52 53
  /// A list of widgets that represent the user's accounts. Up to three of will
  /// be arranged in a row in the header's upper-right corner. Normally a list
54 55 56
  /// of [CircleAvatar] widgets.
  final List<Widget> otherAccountsPictures;

57 58
  /// A widget placed on the top row of the account details representing the
  /// account's name.
59 60
  final Widget accountName;

61 62
  /// A widget placed on the bottom row of the account details representing the
  /// account's e-mail address.
63 64 65
  final Widget accountEmail;

  @override
66
  _UserAccountsDrawerHeaderState createState() => new _UserAccountsDrawerHeaderState();
67 68 69
}

class _UserAccountsDrawerHeaderState extends State<UserAccountsDrawerHeader> {
70
  bool _isOpen = false;
71 72 73 74

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));
75
    final List<Widget> otherAccountsPictures = config.otherAccountsPictures ?? <Widget>[];
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
    return new DrawerHeader(
      decoration: config.decoration,
      child: new Column(
        children: <Widget>[
          new Flexible(
            child: new Stack(
              children: <Widget>[
                new Positioned(
                  top: 0.0,
                  right: 0.0,
                  child: new Row(
                    children: otherAccountsPictures.take(3).map(
                      (Widget picture) {
                        return new Container(
                          margin: const EdgeInsets.only(left: 16.0),
                          width: 40.0,
                          height: 40.0,
                          child: picture
                        );
                      }
                    ).toList()
                  )
                ),
                new Positioned(
                  top: 0.0,
                  child: new Container(
                    width: 72.0,
                    height: 72.0,
                    child: config.currentAccountPicture
                  )
                )
              ]
            )
          ),
          new Container(
            height: 56.0,
            child: new InkWell(
              onTap: () {
                setState(() {
115
                  _isOpen = !_isOpen;
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
                });
                if (config.onDetailsPressed != null)
                  config.onDetailsPressed();
              },
              child: new Container(
                margin: const EdgeInsets.symmetric(vertical: 8.0),
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    new DefaultTextStyle(
                      style: const TextStyle(
                        fontWeight: FontWeight.w500,
                        color: Colors.white
                      ),
                      child: config.accountName
                    ),
                    new Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        new DefaultTextStyle(
                          style: const TextStyle(color: Colors.white),
                          child: config.accountEmail
                        ),
                        new Flexible(
                          child: new Align(
                            alignment: FractionalOffset.centerRight,
                            child: new Icon(
144
                              _isOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down,
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
                              color: Colors.white
                            )
                          )
                        )
                      ]
                    )
                  ]
                )
              )
            )
          )
        ]
      )
    );
  }
}