contacts_demo.dart 12.7 KB
Newer Older
1 2 3 4 5
// 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';
6
import 'package:flutter/services.dart';
7

8
class _ContactCategory extends StatelessWidget {
9
  const _ContactCategory({ Key key, this.icon, this.children }) : super(key: key);
10

11
  final IconData icon;
12 13
  final List<Widget> children;

14
  @override
15
  Widget build(BuildContext context) {
16
    final ThemeData themeData = Theme.of(context);
17
    return new Container(
18
      padding: const EdgeInsets.symmetric(vertical: 16.0),
19
      decoration: new BoxDecoration(
20
        border: new Border(bottom: new BorderSide(color: themeData.dividerColor))
21
      ),
22
      child: new DefaultTextStyle(
23
        style: Theme.of(context).textTheme.subhead,
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
        child: new SafeArea(
          top: false,
          bottom: false,
          child: new Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Container(
                padding: const EdgeInsets.symmetric(vertical: 24.0),
                width: 72.0,
                child: new Icon(icon, color: themeData.primaryColor)
              ),
              new Expanded(child: new Column(children: children))
            ],
          ),
        ),
      ),
40 41 42 43
    );
  }
}

44
class _ContactItem extends StatelessWidget {
45 46 47
  _ContactItem({ Key key, this.icon, this.lines, this.tooltip, this.onPressed })
    : assert(lines.length > 1),
      super(key: key);
48

49
  final IconData icon;
50
  final List<String> lines;
51 52
  final String tooltip;
  final VoidCallback onPressed;
53

54
  @override
55
  Widget build(BuildContext context) {
56
    final ThemeData themeData = Theme.of(context);
57
    final List<Widget> columnChildren = lines.sublist(0, lines.length - 1).map((String line) => new Text(line)).toList();
58
    columnChildren.add(new Text(lines.last, style: themeData.textTheme.caption));
59

60
    final List<Widget> rowChildren = <Widget>[
61
      new Expanded(
Hans Muller's avatar
Hans Muller committed
62 63 64 65
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: columnChildren
        )
66 67 68 69 70
      )
    ];
    if (icon != null) {
      rowChildren.add(new SizedBox(
        width: 72.0,
71 72 73 74 75
        child: new IconButton(
          icon: new Icon(icon),
          color: themeData.primaryColor,
          onPressed: onPressed
        )
76 77
      ));
    }
78 79 80 81 82 83 84 85
    return new MergeSemantics(
      child: new Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0),
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: rowChildren
        )
      ),
86 87 88 89
    );
  }
}

90 91
class ContactsDemo extends StatefulWidget {
  static const String routeName = '/contacts';
92

93
  @override
94
  ContactsDemoState createState() => new ContactsDemoState();
95 96
}

97
enum AppBarBehavior { normal, pinned, floating, snapping }
98

99
class ContactsDemoState extends State<ContactsDemo> {
100
  static final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
101
  final double _appBarHeight = 256.0;
102

103
  AppBarBehavior _appBarBehavior = AppBarBehavior.pinned;
104

105
  @override
106 107 108
  Widget build(BuildContext context) {
    return new Theme(
      data: new ThemeData(
109
        brightness: Brightness.light,
110 111
        primarySwatch: Colors.indigo,
        platform: Theme.of(context).platform,
112 113
      ),
      child: new Scaffold(
114
        key: _scaffoldKey,
115 116 117 118 119
        body: new CustomScrollView(
          slivers: <Widget>[
            new SliverAppBar(
              expandedHeight: _appBarHeight,
              pinned: _appBarBehavior == AppBarBehavior.pinned,
120 121
              floating: _appBarBehavior == AppBarBehavior.floating || _appBarBehavior == AppBarBehavior.snapping,
              snap: _appBarBehavior == AppBarBehavior.snapping,
122 123
              actions: <Widget>[
                new IconButton(
124
                  icon: const Icon(Icons.create),
125
                  tooltip: 'Edit',
126
                  onPressed: () {
127
                    _scaffoldKey.currentState.showSnackBar(const SnackBar(
128
                      content: const Text("Editing isn't supported in this screen.")
129 130
                    ));
                  },
131
                ),
132 133 134 135 136
                new PopupMenuButton<AppBarBehavior>(
                  onSelected: (AppBarBehavior value) {
                    setState(() {
                      _appBarBehavior = value;
                    });
137
                  },
138
                  itemBuilder: (BuildContext context) => <PopupMenuItem<AppBarBehavior>>[
139
                    const PopupMenuItem<AppBarBehavior>(
140
                      value: AppBarBehavior.normal,
141
                      child: const Text('App bar scrolls away')
142
                    ),
143
                    const PopupMenuItem<AppBarBehavior>(
144
                      value: AppBarBehavior.pinned,
145
                      child: const Text('App bar stays put')
146
                    ),
147
                    const PopupMenuItem<AppBarBehavior>(
148
                      value: AppBarBehavior.floating,
149
                      child: const Text('App bar floats')
150
                    ),
151 152
                    const PopupMenuItem<AppBarBehavior>(
                      value: AppBarBehavior.snapping,
153
                      child: const Text('App bar snaps')
154
                    ),
155
                  ],
156
                ),
157 158
              ],
              flexibleSpace: new FlexibleSpaceBar(
159
                title: const Text('Ali Connors'),
160
                background: new Stack(
161
                  fit: StackFit.expand,
162 163
                  children: <Widget>[
                    new Image.asset(
164
                      'people/ali_landscape.png',
165
                      package: 'flutter_gallery_assets',
166
                      fit: BoxFit.cover,
167 168 169 170
                      height: _appBarHeight,
                    ),
                    // This gradient ensures that the toolbar icons are distinct
                    // against the background image.
171
                    const DecoratedBox(
172 173 174 175 176
                      decoration: const BoxDecoration(
                        gradient: const LinearGradient(
                          begin: const Alignment(0.0, -1.0),
                          end: const Alignment(0.0, -0.4),
                          colors: const <Color>[const Color(0x60000000), const Color(0x00000000)],
177 178 179 180
                        ),
                      ),
                    ),
                  ],
181
                ),
182
              ),
183
            ),
184 185
            new SliverList(
              delegate: new SliverChildListDelegate(<Widget>[
186
                new AnnotatedRegion<SystemUiOverlayStyle>(
187
                  value: SystemUiOverlayStyle.dark,
188 189 190 191 192 193 194 195
                  child: new _ContactCategory(
                    icon: Icons.call,
                    children: <Widget>[
                      new _ContactItem(
                        icon: Icons.message,
                        tooltip: 'Send message',
                        onPressed: () {
                          _scaffoldKey.currentState.showSnackBar(const SnackBar(
196
                            content: const Text('Pretend that this opened your SMS application.')
197 198 199 200 201 202 203 204 205 206 207 208
                          ));
                        },
                        lines: const <String>[
                          '(650) 555-1234',
                          'Mobile',
                        ],
                      ),
                      new _ContactItem(
                        icon: Icons.message,
                        tooltip: 'Send message',
                        onPressed: () {
                          _scaffoldKey.currentState.showSnackBar(const SnackBar(
209
                            content: const Text('A messaging app appears.')
210 211 212 213 214 215 216 217 218 219 220 221
                          ));
                        },
                        lines: const <String>[
                          '(323) 555-6789',
                          'Work',
                        ],
                      ),
                      new _ContactItem(
                        icon: Icons.message,
                        tooltip: 'Send message',
                        onPressed: () {
                          _scaffoldKey.currentState.showSnackBar(const SnackBar(
222
                            content: const Text('Imagine if you will, a messaging application.')
223 224 225 226 227 228 229 230 231
                          ));
                        },
                        lines: const <String>[
                          '(650) 555-6789',
                          'Home',
                        ],
                      ),
                    ],
                  ),
232
                ),
233 234 235 236 237 238 239
                new _ContactCategory(
                  icon: Icons.contact_mail,
                  children: <Widget>[
                    new _ContactItem(
                      icon: Icons.email,
                      tooltip: 'Send personal e-mail',
                      onPressed: () {
240
                        _scaffoldKey.currentState.showSnackBar(const SnackBar(
241
                          content: const Text('Here, your e-mail application would open.')
242 243
                        ));
                      },
244
                      lines: const <String>[
245 246 247 248 249 250 251 252
                        'ali_connors@example.com',
                        'Personal',
                      ],
                    ),
                    new _ContactItem(
                      icon: Icons.email,
                      tooltip: 'Send work e-mail',
                      onPressed: () {
253
                        _scaffoldKey.currentState.showSnackBar(const SnackBar(
254
                          content: const Text('Summon your favorite e-mail application here.')
255 256
                        ));
                      },
257
                      lines: const <String>[
258 259 260 261 262
                        'aliconnors@example.com',
                        'Work',
                      ],
                    ),
                  ],
263
                ),
264 265 266 267 268 269 270
                new _ContactCategory(
                  icon: Icons.location_on,
                  children: <Widget>[
                    new _ContactItem(
                      icon: Icons.map,
                      tooltip: 'Open map',
                      onPressed: () {
271
                        _scaffoldKey.currentState.showSnackBar(const SnackBar(
272
                          content: const Text('This would show a map of San Francisco.')
273 274
                        ));
                      },
275
                      lines: const <String>[
276 277 278 279 280 281 282 283 284
                        '2000 Main Street',
                        'San Francisco, CA',
                        'Home',
                      ],
                    ),
                    new _ContactItem(
                      icon: Icons.map,
                      tooltip: 'Open map',
                      onPressed: () {
285
                        _scaffoldKey.currentState.showSnackBar(const SnackBar(
286
                          content: const Text('This would show a map of Mountain View.')
287 288
                        ));
                      },
289
                      lines: const <String>[
290 291 292 293 294 295 296 297 298
                        '1600 Amphitheater Parkway',
                        'Mountain View, CA',
                        'Work',
                      ],
                    ),
                    new _ContactItem(
                      icon: Icons.map,
                      tooltip: 'Open map',
                      onPressed: () {
299
                        _scaffoldKey.currentState.showSnackBar(const SnackBar(
300
                          content: const Text('This would also show a map, if this was not a demo.')
301 302
                        ));
                      },
303
                      lines: const <String>[
304 305 306 307 308 309
                        '126 Severyns Ave',
                        'Mountain View, CA',
                        'Jet Travel',
                      ],
                    ),
                  ],
310
                ),
311 312 313 314
                new _ContactCategory(
                  icon: Icons.today,
                  children: <Widget>[
                    new _ContactItem(
315
                      lines: const <String>[
316 317 318 319 320
                        'Birthday',
                        'January 9th, 1989',
                      ],
                    ),
                    new _ContactItem(
321
                      lines: const <String>[
322 323 324 325 326
                        'Wedding anniversary',
                        'June 21st, 2014',
                      ],
                    ),
                    new _ContactItem(
327
                      lines: const <String>[
328 329 330 331 332
                        'First day in office',
                        'January 20th, 2015',
                      ],
                    ),
                    new _ContactItem(
333
                      lines: const <String>[
334
                        'Last day in office',
335
                        'August 9th, 2018',
336 337 338
                      ],
                    ),
                  ],
339
                ),
340 341 342 343 344
              ]),
            ),
          ],
        ),
      ),
345 346 347
    );
  }
}