contacts_demo.dart 12.4 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5
// 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({ this.icon, this.children });
10

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

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.titleMedium!,
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 46
  const _ContactItem({ this.icon, required this.lines, this.tooltip, this.onPressed })
    : assert(lines.length > 1);
47

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

53
  @override
54
  Widget build(BuildContext context) {
55
    final ThemeData themeData = Theme.of(context);
56 57
    return MergeSemantics(
      child: Padding(
58
        padding: const EdgeInsets.symmetric(vertical: 16.0),
59
        child: Row(
60
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
61 62 63 64 65 66
          children: <Widget>[
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  ...lines.sublist(0, lines.length - 1).map<Widget>((String line) => Text(line)),
67
                  Text(lines.last, style: themeData.textTheme.bodySmall),
68 69 70 71 72 73 74 75 76 77 78 79 80
                ],
              ),
            ),
            if (icon != null)
              SizedBox(
                width: 72.0,
                child: IconButton(
                  icon: Icon(icon),
                  color: themeData.primaryColor,
                  onPressed: onPressed,
                ),
              ),
          ],
81
        ),
82
      ),
83 84 85 86
    );
  }
}

87
class ContactsDemo extends StatefulWidget {
88
  const ContactsDemo({super.key});
89

90
  static const String routeName = '/contacts';
91

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

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

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