cards_demo.dart 13.1 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
Hans Muller's avatar
Hans Muller committed
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'package:flutter/foundation.dart';
Hans Muller's avatar
Hans Muller committed
6 7
import 'package:flutter/material.dart';

8 9
import '../../gallery/demo.dart';

10 11
const String _kGalleryAssetsPackage = 'flutter_gallery_assets';

12 13 14 15 16 17
enum CardDemoType {
  standard,
  tappable,
  selectable,
}

Hans Muller's avatar
Hans Muller committed
18
class TravelDestination {
19
  const TravelDestination({
20 21 22 23 24 25 26 27 28 29 30 31 32
    @required this.assetName,
    @required this.assetPackage,
    @required this.title,
    @required this.description,
    @required this.city,
    @required this.location,
    this.type = CardDemoType.standard,
  }) : assert(assetName != null),
       assert(assetPackage != null),
       assert(title != null),
       assert(description != null),
       assert(city != null),
       assert(location != null);
Hans Muller's avatar
Hans Muller committed
33 34

  final String assetName;
35
  final String assetPackage;
Hans Muller's avatar
Hans Muller committed
36
  final String title;
37 38 39 40
  final String description;
  final String city;
  final String location;
  final CardDemoType type;
Hans Muller's avatar
Hans Muller committed
41 42
}

43 44
const List<TravelDestination> destinations = <TravelDestination>[
  TravelDestination(
45
    assetName: 'places/india_thanjavur_market.png',
46
    assetPackage: _kGalleryAssetsPackage,
47
    title: 'Top 10 Cities to Visit in Tamil Nadu',
48 49 50
    description: 'Number 10',
    city: 'Thanjavur',
    location: 'Thanjavur, Tamil Nadu',
Hans Muller's avatar
Hans Muller committed
51
  ),
52
  TravelDestination(
53
    assetName: 'places/india_chettinad_silk_maker.png',
54
    assetPackage: _kGalleryAssetsPackage,
55
    title: 'Artisans of Southern India',
56 57 58 59 60 61 62 63 64 65 66 67 68
    description: 'Silk Spinners',
    city: 'Chettinad',
    location: 'Sivaganga, Tamil Nadu',
    type: CardDemoType.tappable,
  ),
  TravelDestination(
    assetName: 'places/india_tanjore_thanjavur_temple.png',
    assetPackage: _kGalleryAssetsPackage,
    title: 'Brihadisvara Temple',
    description: 'Temples',
    city: 'Thanjavur',
    location: 'Thanjavur, Tamil Nadu',
    type: CardDemoType.selectable,
69
  ),
Hans Muller's avatar
Hans Muller committed
70 71
];

72
class TravelDestinationItem extends StatelessWidget {
73 74
  const TravelDestinationItem({ Key key, @required this.destination, this.shape })
    : assert(destination != null),
75
      super(key: key);
Hans Muller's avatar
Hans Muller committed
76

77 78
  // This height will allow for all the Card's content to fit comfortably within the card.
  static const double height = 338.0;
Hans Muller's avatar
Hans Muller committed
79
  final TravelDestination destination;
Hans Muller's avatar
Hans Muller committed
80
  final ShapeBorder shape;
Hans Muller's avatar
Hans Muller committed
81

82
  @override
Hans Muller's avatar
Hans Muller committed
83
  Widget build(BuildContext context) {
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
    return SafeArea(
      top: false,
      bottom: false,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            const SectionTitle(title: 'Normal'),
            SizedBox(
              height: height,
              child: Card(
                // This ensures that the Card's children are clipped correctly.
                clipBehavior: Clip.antiAlias,
                shape: shape,
                child: TravelDestinationContent(destination: destination),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Hans Muller's avatar
Hans Muller committed
107

108 109 110 111 112 113 114 115 116 117 118 119
class TappableTravelDestinationItem extends StatelessWidget {
  const TappableTravelDestinationItem({ Key key, @required this.destination, this.shape })
    : assert(destination != null),
      super(key: key);

  // This height will allow for all the Card's content to fit comfortably within the card.
  static const double height = 298.0;
  final TravelDestination destination;
  final ShapeBorder shape;

  @override
  Widget build(BuildContext context) {
120
    return SafeArea(
121 122
      top: false,
      bottom: false,
123
      child: Padding(
124
        padding: const EdgeInsets.all(8.0),
125 126 127 128 129 130 131 132 133 134 135 136 137
        child: Column(
          children: <Widget>[
            const SectionTitle(title: 'Tappable'),
            SizedBox(
              height: height,
              child: Card(
                // This ensures that the Card's children (including the ink splash) are clipped correctly.
                clipBehavior: Clip.antiAlias,
                shape: shape,
                child: InkWell(
                  onTap: () {
                    print('Card was tapped');
                  },
138 139 140 141
                  // Generally, material cards use onSurface with 12% opacity for the pressed state.
                  splashColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.12),
                  // Generally, material cards do not have a highlight overlay.
                  highlightColor: Colors.transparent,
142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
                  child: TravelDestinationContent(destination: destination),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class SelectableTravelDestinationItem extends StatefulWidget {
  const SelectableTravelDestinationItem({ Key key, @required this.destination, this.shape })
    : assert(destination != null),
      super(key: key);

  final TravelDestination destination;
  final ShapeBorder shape;

  @override
  _SelectableTravelDestinationItemState createState() => _SelectableTravelDestinationItemState();
}

class _SelectableTravelDestinationItemState extends State<SelectableTravelDestinationItem> {

  // This height will allow for all the Card's content to fit comfortably within the card.
  static const double height = 298.0;
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
173 174
    final ColorScheme colorScheme = Theme.of(context).colorScheme;

175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
    return SafeArea(
      top: false,
      bottom: false,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            const SectionTitle(title: 'Selectable (long press)'),
            SizedBox(
              height: height,
              child: Card(
                // This ensures that the Card's children (including the ink splash) are clipped correctly.
                clipBehavior: Clip.antiAlias,
                shape: widget.shape,
                child: InkWell(
                  onLongPress: () {
                    print('Selectable card state changed');
                    setState(() {
                      _isSelected = !_isSelected;
                    });
                  },
196 197 198 199
                  // Generally, material cards use onSurface with 12% opacity for the pressed state.
                  splashColor: colorScheme.onSurface.withOpacity(0.12),
                  // Generally, material cards do not have a highlight overlay.
                  highlightColor: Colors.transparent,
200 201 202 203
                  child: Stack(
                    children: <Widget>[
                      Container(
                        color: _isSelected
204 205 206
                          // Generally, material cards use primary with 8% opacity for the selected state.
                          // See: https://material.io/design/interaction/states.html#anatomy
                          ? colorScheme.primary.withOpacity(0.08)
207
                          : Colors.transparent,
208
                      ),
209 210 211 212
                      TravelDestinationContent(destination: widget.destination),
                      Align(
                        alignment: Alignment.topRight,
                        child: Padding(
213
                          padding: const EdgeInsets.all(8.0),
214 215
                          child: Icon(
                            Icons.check_circle,
216
                            color: _isSelected ? colorScheme.primary : Colors.transparent,
217
                          ),
218
                        ),
219
                      ),
220
                    ],
221
                  ),
222
                ),
223
              ),
224 225 226 227 228 229 230 231 232 233 234
            ),
          ],
        ),
      ),
    );
  }
}

class SectionTitle extends StatelessWidget {
  const SectionTitle({
    Key key,
235
    this.title,
236 237 238 239 240 241 242 243 244 245
  }) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(4.0, 4.0, 4.0, 12.0),
      child: Align(
        alignment: Alignment.centerLeft,
246
        child: Text(title, style: Theme.of(context).textTheme.subtitle1),
247 248 249 250 251 252 253 254 255 256 257 258 259 260 261
      ),
    );
  }
}

class TravelDestinationContent extends StatelessWidget {
  const TravelDestinationContent({ Key key, @required this.destination })
    : assert(destination != null),
      super(key: key);

  final TravelDestination destination;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
262 263
    final TextStyle titleStyle = theme.textTheme.headline5.copyWith(color: Colors.white);
    final TextStyle descriptionStyle = theme.textTheme.subtitle1;
264

265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        // Photo and title.
        SizedBox(
          height: 184.0,
          child: Stack(
            children: <Widget>[
              Positioned.fill(
                // In order to have the ink splash appear above the image, you
                // must use Ink.image. This allows the image to be painted as part
                // of the Material and display ink effects above it. Using a
                // standard Image will obscure the ink splash.
                child: Ink.image(
                  image: AssetImage(destination.assetName, package: destination.assetPackage),
                  fit: BoxFit.cover,
                  child: Container(),
282 283
                ),
              ),
284 285 286 287 288 289 290 291 292 293 294
              Positioned(
                bottom: 16.0,
                left: 16.0,
                right: 16.0,
                child: FittedBox(
                  fit: BoxFit.scaleDown,
                  alignment: Alignment.centerLeft,
                  child: Text(
                    destination.title,
                    style: titleStyle,
                  ),
295
                ),
296
              ),
297 298
            ],
          ),
299
        ),
300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320
        // Description and share/explore buttons.
        Padding(
          padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
          child: DefaultTextStyle(
            softWrap: false,
            overflow: TextOverflow.ellipsis,
            style: descriptionStyle,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                // three line description
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    destination.description,
                    style: descriptionStyle.copyWith(color: Colors.black54),
                  ),
                ),
                Text(destination.city),
                Text(destination.location),
              ],
321
            ),
322
          ),
323
        ),
324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341
        if (destination.type == CardDemoType.standard)
          // share, explore buttons
          ButtonBar(
            alignment: MainAxisAlignment.start,
            children: <Widget>[
              FlatButton(
                child: Text('SHARE', semanticsLabel: 'Share ${destination.title}'),
                textColor: Colors.amber.shade500,
                onPressed: () { print('pressed'); },
              ),
              FlatButton(
                child: Text('EXPLORE', semanticsLabel: 'Explore ${destination.title}'),
                textColor: Colors.amber.shade500,
                onPressed: () { print('pressed'); },
              ),
            ],
          ),
      ],
Hans Muller's avatar
Hans Muller committed
342 343 344 345
    );
  }
}

Hans Muller's avatar
Hans Muller committed
346
class CardsDemo extends StatefulWidget {
347
  static const String routeName = '/material/cards';
348

Hans Muller's avatar
Hans Muller committed
349
  @override
350
  _CardsDemoState createState() => _CardsDemoState();
Hans Muller's avatar
Hans Muller committed
351 352 353 354 355
}

class _CardsDemoState extends State<CardsDemo> {
  ShapeBorder _shape;

356
  @override
Hans Muller's avatar
Hans Muller committed
357
  Widget build(BuildContext context) {
358 359
    return Scaffold(
      appBar: AppBar(
360
        title: const Text('Cards'),
Hans Muller's avatar
Hans Muller committed
361
        actions: <Widget>[
362
          MaterialDemoDocumentationButton(CardsDemo.routeName),
363
          IconButton(
364 365 366 367
            icon: const Icon(
              Icons.sentiment_very_satisfied,
              semanticLabel: 'update shape',
            ),
Hans Muller's avatar
Hans Muller committed
368 369 370
            onPressed: () {
              setState(() {
                _shape = _shape != null ? null : const RoundedRectangleBorder(
371 372 373 374 375
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(16.0),
                    topRight: Radius.circular(16.0),
                    bottomLeft: Radius.circular(2.0),
                    bottomRight: Radius.circular(2.0),
Hans Muller's avatar
Hans Muller committed
376 377 378 379 380 381
                  ),
                );
              });
            },
          ),
        ],
Hans Muller's avatar
Hans Muller committed
382
      ),
383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405
      body: Scrollbar(
        child: ListView(
          padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
          children: destinations.map<Widget>((TravelDestination destination) {
            Widget child;
            switch (destination.type) {
              case CardDemoType.standard:
                child = TravelDestinationItem(destination: destination, shape: _shape);
                break;
              case CardDemoType.tappable:
                child = TappableTravelDestinationItem(destination: destination, shape: _shape);
                break;
              case CardDemoType.selectable:
                child = SelectableTravelDestinationItem(destination: destination, shape: _shape);
                break;
            }

            return Container(
              margin: const EdgeInsets.only(bottom: 8.0),
              child: child,
            );
          }).toList(),
        ),
406
      ),
Hans Muller's avatar
Hans Muller committed
407 408 409
    );
  }
}