contacts_demo.dart 12.4 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 Container(
18
      padding: const EdgeInsets.symmetric(vertical: 16.0),
19 20
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: themeData.dividerColor))
21
      ),
22
      child: DefaultTextStyle(
23
        style: Theme.of(context).textTheme.subhead,
24
        child: SafeArea(
25 26
          top: false,
          bottom: false,
27
          child: Row(
28 29
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
30
              Container(
31 32
                padding: const EdgeInsets.symmetric(vertical: 24.0),
                width: 72.0,
33
                child: Icon(icon, color: themeData.primaryColor),
34
              ),
35
              Expanded(child: Column(children: children)),
36 37 38 39
            ],
          ),
        ),
      ),
40 41 42 43
    );
  }
}

44
class _ContactItem extends StatelessWidget {
45
  const _ContactItem({ Key key, this.icon, this.lines, this.tooltip, this.onPressed })
46 47
    : 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 58
    return MergeSemantics(
      child: Padding(
59
        padding: const EdgeInsets.symmetric(vertical: 16.0),
60
        child: Row(
61
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
          children: <Widget>[
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  ...lines.sublist(0, lines.length - 1).map<Widget>((String line) => Text(line)),
                  Text(lines.last, style: themeData.textTheme.caption),
                ],
              ),
            ),
            if (icon != null)
              SizedBox(
                width: 72.0,
                child: IconButton(
                  icon: Icon(icon),
                  color: themeData.primaryColor,
                  onPressed: onPressed,
                ),
              ),
          ],
82
        ),
83
      ),
84 85 86 87
    );
  }
}

88 89
class ContactsDemo extends StatefulWidget {
  static const String routeName = '/contacts';
90

91
  @override
92
  ContactsDemoState createState() => ContactsDemoState();
93 94
}

95
enum AppBarBehavior { normal, pinned, floating, snapping }
96

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

101
  AppBarBehavior _appBarBehavior = AppBarBehavior.pinned;
102

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