flexible_space_demo.dart 6.17 KB
Newer Older
1 2 3 4 5 6 7
// 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';

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

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

14
  @override
15 16
  Widget build(BuildContext context) {
    return new Container(
17
      padding: const EdgeInsets.symmetric(vertical: 16.0),
18 19 20 21
      decoration: new BoxDecoration(
        border: new Border(bottom: new BorderSide(color: Theme.of(context).dividerColor))
      ),
      child: new DefaultTextStyle(
22
        style: Theme.of(context).textTheme.subhead,
23 24 25 26 27 28 29 30 31 32 33 34 35 36
        child: new Row(
          children: <Widget>[
            new SizedBox(
              width: 72.0,
              child: new Icon(icon: icon, color: Theme.of(context).primaryColor)
            ),
            new Flexible(child: new Column(children: children))
          ]
        )
      )
    );
  }
}

37
class _ContactItem extends StatelessWidget {
38 39 40 41
  _ContactItem({ Key key, this.icon, this.lines }) : super(key: key) {
    assert(lines.length > 1);
  }

42
  final IconData icon;
43 44
  final List<String> lines;

45
  @override
46 47
  Widget build(BuildContext context) {
    List<Widget> columnChildren = lines.sublist(0, lines.length - 1).map((String line) => new Text(line)).toList();
48
    columnChildren.add(new Text(lines.last, style: Theme.of(context).textTheme.caption));
49 50 51

    List<Widget> rowChildren = <Widget>[
      new Column(
52
        crossAxisAlignment: CrossAxisAlignment.start,
53 54 55 56 57 58 59 60 61 62
        children: columnChildren
      )
    ];
    if (icon != null) {
      rowChildren.add(new SizedBox(
        width: 72.0,
        child: new Icon(icon: icon, color: Theme.of(context).disabledColor)
      ));
    }
    return new Padding(
63
      padding: const EdgeInsets.symmetric(vertical: 16.0),
64
      child: new Row(
65
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
66 67 68 69 70 71
        children: rowChildren
      )
    );
  }
}

72
class FlexibleSpaceDemo extends StatefulWidget {
73 74
  static const String routeName = '/flexible-space';

75
  @override
76 77 78 79
  FlexibleSpaceDemoState createState() => new FlexibleSpaceDemoState();
}

class FlexibleSpaceDemoState extends State<FlexibleSpaceDemo> {
80 81
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  final double _appBarHeight = 256.0;
82
  AppBarBehavior _appBarBehavior = AppBarBehavior.scroll;
83

84
  @override
85
  Widget build(BuildContext context) {
86
    final double statusBarHeight = MediaQuery.of(context).padding.top;
87 88 89 90 91 92
    return new Theme(
      data: new ThemeData(
        brightness: ThemeBrightness.light,
        primarySwatch: Colors.indigo
      ),
      child: new Scaffold(
93
        key: _scaffoldKey,
94
        appBarBehavior: _appBarBehavior,
95
        appBar: new AppBar(
96
          expandedHeight: _appBarHeight,
97
          actions: <Widget>[
98
            new IconButton(
99
              icon: Icons.create,
100 101
              tooltip: 'Search',
              onPressed: () {
102
                _scaffoldKey.currentState.showSnackBar(new SnackBar(
103 104 105
                  content: new Text('Not supported.')
                ));
              }
106
            ),
107 108 109 110 111 112
            new PopupMenuButton<AppBarBehavior>(
              onSelected: (AppBarBehavior value) {
                setState(() {
                  _appBarBehavior = value;
                });
              },
113
              itemBuilder: (BuildContext context) => <PopupMenuItem<AppBarBehavior>>[
114 115
                new PopupMenuItem<AppBarBehavior>(
                  value: AppBarBehavior.scroll,
116
                  child: new Text('Toolbar scrolls away')
117 118 119
                ),
                new PopupMenuItem<AppBarBehavior>(
                  value: AppBarBehavior.under,
120
                  child: new Text('Toolbar stays put')
121 122
                )
              ]
123 124
            )
          ],
125 126
          flexibleSpace: new FlexibleSpaceBar(
            title : new Text('Ali Connors'),
127
            background: new AssetImage(
128 129 130 131 132
              name: 'packages/flutter_gallery_assets/ali_connors.png',
              fit: ImageFit.cover,
              height: _appBarHeight
            )
          )
133 134
        ),
        body: new Block(
135
          padding: new EdgeInsets.only(top: _appBarHeight + statusBarHeight),
136 137
          children: <Widget>[
            new _ContactCategory(
138
              icon: Icons.call,
139 140
              children: <Widget>[
                new _ContactItem(
141
                  icon: Icons.message,
142 143 144 145 146 147
                  lines: <String>[
                    '(650) 555-1234',
                    'Mobile'
                  ]
                ),
                new _ContactItem(
148
                  icon: Icons.message,
149 150 151 152 153 154 155 156
                  lines: <String>[
                    '(323) 555-6789',
                    'Work'
                  ]
                )
              ]
            ),
            new _ContactCategory(
157
              icon: Icons.email,
158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
              children: <Widget>[
                new _ContactItem(
                  lines: <String>[
                    'ali_connors@example.com',
                    'Personal'
                  ]
                ),
                new _ContactItem(
                  lines: <String>[
                    'aliconnors@example.com',
                    'Work'
                  ]
                )
              ]
            ),
            new _ContactCategory(
174
              icon: Icons.location_on,
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
              children: <Widget>[
                new _ContactItem(
                  lines: <String>[
                    '2000 Main Street',
                    'San Francisco, CA',
                    'Home'
                  ]
                ),
                new _ContactItem(
                  lines: <String>[
                    '1600 Amphitheater Parkway',
                    'Mountain View, CA',
                    'Work'
                  ]
                ),
                new _ContactItem(
                  lines: <String>[
                    '126 Severyns Ave',
                    'Mountain View, CA',
                    'Jet Travel'
                  ]
                )
              ]
            )
          ]
        )
      )
    );
  }
}