dev/manual_tests/lib/card_collection.dart - mirrors/flutter - Git at Google

 // Copyright 2014 The Flutter 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 'dart:math';

 import 'package:flutter/material.dart';

 class CardModel {
   CardModel(this.value, this.height) :
     textController = TextEditingController(text: 'Item $value');

   int value;
   double height;
   int get color => ((value % 9) + 1) * 100;
   final TextEditingController textController;
   Key get key => ObjectKey(this);
 }

 class CardCollection extends StatefulWidget {
   const CardCollection({super.key});

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

 class CardCollectionState extends State<CardCollection> {

   static const TextStyle cardLabelStyle =
     TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.bold);

   // TODO(hansmuller): need a local image asset
   static const String _sunshineURL = 'http://www.walltor.com/images/wallpaper/good-morning-sunshine-58540.jpg';

   static const double kCardMargins = 8.0;
   static const double kFixedCardHeight = 100.0;
   static const List<double> _cardHeights = <double>[
     48.0, 63.0, 85.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
     48.0, 63.0, 85.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
     48.0, 63.0, 85.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
   ];

   MaterialColor _primaryColor = Colors.deepPurple;
   List<CardModel> _cardModels = <CardModel>[];
   DismissDirection _dismissDirection = DismissDirection.horizontal;
   TextAlign _textAlign = TextAlign.center;
   bool _editable = false;
   bool _fixedSizeCards = false;
   bool _sunshine = false;
   bool _varyFontSizes = false;

   void _updateCardSizes() {
     if (_fixedSizeCards) {
       return;
     }
     _cardModels = List<CardModel>.generate(
       _cardModels.length,
       (int i) {
         _cardModels[i].height = _editable ? max(_cardHeights[i], 60.0) : _cardHeights[i];
         return _cardModels[i];
       },
     );
   }

   void _initVariableSizedCardModels() {
     _cardModels = List<CardModel>.generate(
       _cardHeights.length,
       (int i) => CardModel(i, _editable ? max(_cardHeights[i], 60.0) : _cardHeights[i]),
     );
   }

   void _initFixedSizedCardModels() {
     const int cardCount = 27;
     _cardModels = List<CardModel>.generate(
       cardCount,
       (int i) => CardModel(i, kFixedCardHeight),
     );
   }

   void _initCardModels() {
     if (_fixedSizeCards) {
       _initFixedSizedCardModels();
     } else {
       _initVariableSizedCardModels();
     }
   }

   @override
   void initState() {
     super.initState();
     _initCardModels();
   }

   void dismissCard(CardModel card) {
     if (_cardModels.contains(card)) {
       setState(() {
         _cardModels.remove(card);
       });
     }
   }

   Widget _buildDrawer() {
     return Drawer(
       child: IconTheme(
         data: const IconThemeData(color: Colors.black),
         child: ListView(
           children: <Widget>[
             const DrawerHeader(child: Center(child: Text('Options'))),
             buildDrawerCheckbox('Make card labels editable', _editable, _toggleEditable),
             buildDrawerCheckbox('Fixed size cards', _fixedSizeCards, _toggleFixedSizeCards),
             buildDrawerCheckbox('Let the sun shine', _sunshine, _toggleSunshine),
             buildDrawerCheckbox('Vary font sizes', _varyFontSizes, _toggleVaryFontSizes, enabled: !_editable),
             const Divider(),
             buildDrawerColorRadioItem('Deep Purple', Colors.deepPurple, _primaryColor, _selectColor),
             buildDrawerColorRadioItem('Green', Colors.green, _primaryColor, _selectColor),
             buildDrawerColorRadioItem('Amber', Colors.amber, _primaryColor, _selectColor),
             buildDrawerColorRadioItem('Teal', Colors.teal, _primaryColor, _selectColor),
             const Divider(),
             buildDrawerDirectionRadioItem('Dismiss horizontally', DismissDirection.horizontal, _dismissDirection, _changeDismissDirection, icon: Icons.code),
             buildDrawerDirectionRadioItem('Dismiss left', DismissDirection.endToStart, _dismissDirection, _changeDismissDirection, icon: Icons.arrow_back),
             buildDrawerDirectionRadioItem('Dismiss right', DismissDirection.startToEnd, _dismissDirection, _changeDismissDirection, icon: Icons.arrow_forward),
             const Divider(),
             buildFontRadioItem('Left-align text', TextAlign.left, _textAlign, _changeTextAlign, icon: Icons.format_align_left, enabled: !_editable),
             buildFontRadioItem('Center-align text', TextAlign.center, _textAlign, _changeTextAlign, icon: Icons.format_align_center, enabled: !_editable),
             buildFontRadioItem('Right-align text', TextAlign.right, _textAlign, _changeTextAlign, icon: Icons.format_align_right, enabled: !_editable),
             const Divider(),
             ListTile(
               leading: const Icon(Icons.dvr),
               onTap: () { debugDumpApp(); debugDumpRenderTree(); },
               title: const Text('Dump App to Console'),
             ),
           ],
         ),
       ),
     );
   }

   String _dismissDirectionText(DismissDirection direction) {
     final String s = direction.toString();
     return "dismiss ${s.substring(s.indexOf('.') + 1)}";
   }

   void _toggleEditable() {
     setState(() {
       _editable = !_editable;
       _updateCardSizes();
     });
   }

   void _toggleFixedSizeCards() {
     setState(() {
       _fixedSizeCards = !_fixedSizeCards;
       _initCardModels();
     });
   }

   void _toggleSunshine() {
     setState(() {
       _sunshine = !_sunshine;
     });
   }

   void _toggleVaryFontSizes() {
     setState(() {
       _varyFontSizes = !_varyFontSizes;
     });
   }

   void _selectColor(MaterialColor? selection) {
     setState(() {
       _primaryColor = selection!;
     });
   }

   void _changeDismissDirection(DismissDirection? newDismissDirection) {
     setState(() {
       _dismissDirection = newDismissDirection!;
     });
   }

   void _changeTextAlign(TextAlign? newTextAlign) {
     setState(() {
       _textAlign = newTextAlign!;
     });
   }

   Widget buildDrawerCheckbox(String label, bool value, void Function() callback, { bool enabled = true }) {
     return ListTile(
       onTap: enabled ? callback : null,
       title: Text(label),
       trailing: Checkbox(
         value: value,
         onChanged: enabled ? (_) { callback(); } : null,
       ),
     );
   }

   Widget buildDrawerColorRadioItem(String label, MaterialColor itemValue, MaterialColor currentValue, ValueChanged<MaterialColor?> onChanged, { IconData? icon, bool enabled = true }) {
     return ListTile(
       leading: Icon(icon),
       title: Text(label),
       onTap: enabled ? () { onChanged(itemValue); } : null,
       trailing: Radio<MaterialColor>(
         value: itemValue,
         groupValue: currentValue,
         onChanged: enabled ? onChanged : null,
       ),
     );
   }

   Widget buildDrawerDirectionRadioItem(String label, DismissDirection itemValue, DismissDirection currentValue, ValueChanged<DismissDirection?> onChanged, { IconData? icon, bool enabled = true }) {
     return ListTile(
       leading: Icon(icon),
       title: Text(label),
       onTap: enabled ? () { onChanged(itemValue); } : null,
       trailing: Radio<DismissDirection>(
         value: itemValue,
         groupValue: currentValue,
         onChanged: enabled ? onChanged : null,
       ),
     );
   }

   Widget buildFontRadioItem(String label, TextAlign itemValue, TextAlign currentValue, ValueChanged<TextAlign?> onChanged, { IconData? icon, bool enabled = true }) {
     return ListTile(
       leading: Icon(icon),
       title: Text(label),
       onTap: enabled ? () { onChanged(itemValue); } : null,
       trailing: Radio<TextAlign>(
         value: itemValue,
         groupValue: currentValue,
         onChanged: enabled ? onChanged : null,
       ),
     );
   }

   AppBar _buildAppBar(BuildContext context) {
     return AppBar(
       actions: <Widget>[
         Text(_dismissDirectionText(_dismissDirection)),
       ],
       flexibleSpace: Container(
         padding: const EdgeInsets.only(left: 72.0),
         height: 128.0,
         alignment: const Alignment(-1.0, 0.5),
         child: Text('Swipe Away: ${_cardModels.length}', style: Theme.of(context).primaryTextTheme.titleLarge),
       ),
     );
   }

   Widget _buildCard(BuildContext context, int index) {
     final CardModel cardModel = _cardModels[index];
     final Widget card = Dismissible(
       key: ObjectKey(cardModel),
       direction: _dismissDirection,
       onDismissed: (DismissDirection direction) { dismissCard(cardModel); },
       child: Card(
         color: _primaryColor[cardModel.color],
         child: Container(
           height: cardModel.height,
           padding: const EdgeInsets.all(kCardMargins),
           child: _editable ?
             Center(
               child: TextField(
                 key: GlobalObjectKey(cardModel),
                 controller: cardModel.textController,
               ),
             )
           : DefaultTextStyle.merge(
               style: cardLabelStyle.copyWith(
                 fontSize: _varyFontSizes ? 5.0 + index : null
               ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   Text(cardModel.textController.text, textAlign: _textAlign),
                 ],
               ),
             ),
         ),
       ),
     );

     String backgroundMessage;
     switch (_dismissDirection) {
       case DismissDirection.horizontal:
         backgroundMessage = 'Swipe in either direction';
       case DismissDirection.endToStart:
         backgroundMessage = 'Swipe left to dismiss';
       case DismissDirection.startToEnd:
         backgroundMessage = 'Swipe right to dismiss';
       case DismissDirection.vertical:
       case DismissDirection.up:
       case DismissDirection.down:
       case DismissDirection.none:
         backgroundMessage = 'Unsupported dismissDirection';
     }

     // This icon is wrong in RTL.
     Widget leftArrowIcon = const Icon(Icons.arrow_back, size: 36.0);
     if (_dismissDirection == DismissDirection.startToEnd) {
       leftArrowIcon = Opacity(opacity: 0.1, child: leftArrowIcon);
     }

     // This icon is wrong in RTL.
     Widget rightArrowIcon = const Icon(Icons.arrow_forward, size: 36.0);
     if (_dismissDirection == DismissDirection.endToStart) {
       rightArrowIcon = Opacity(opacity: 0.1, child: rightArrowIcon);
     }

     final ThemeData theme = Theme.of(context);
     final TextStyle? backgroundTextStyle = theme.primaryTextTheme.titleLarge;

     // The background Widget appears behind the Dismissible card when the card
     // moves to the left or right. The Positioned widget ensures that the
     // size of the background,card Stack will be based only on the card. The
     // Viewport ensures that when the card's resize animation occurs, the
     // background (text and icons) will just be clipped, not resized.
     final Widget background = Positioned.fill(
       child: Container(
         margin: const EdgeInsets.all(4.0),
         child: SingleChildScrollView(
           child: Container(
             height: cardModel.height,
             color: theme.primaryColor,
             child: Row(
               children: <Widget>[
                 leftArrowIcon,
                 Expanded(
                   child: Text(backgroundMessage,
                     style: backgroundTextStyle,
                     textAlign: TextAlign.center,
                   ),
                 ),
                 rightArrowIcon,
               ],
             ),
           ),
         ),
       ),
     );

     return IconTheme(
       key: cardModel.key,
       data: const IconThemeData(color: Colors.white),
       child: Stack(children: <Widget>[background, card]),
     );
   }

   Shader _createShader(Rect bounds) {
     return const LinearGradient(
         begin: Alignment.topCenter,
         end: Alignment.bottomCenter,
         colors: <Color>[Color(0x00FFFFFF), Color(0xFFFFFFFF)],
         stops: <double>[0.1, 0.35],
     )
     .createShader(bounds);
   }

   @override
   Widget build(BuildContext context) {
     Widget cardCollection = ListView.builder(
       itemExtent: _fixedSizeCards ? kFixedCardHeight : null,
       itemCount: _cardModels.length,
       itemBuilder: _buildCard,
     );

     if (_sunshine) {
       cardCollection = Stack(
         children: <Widget>[
           Column(children: <Widget>[Image.network(_sunshineURL)]),
           ShaderMask(shaderCallback: _createShader, child: cardCollection),
         ],
       );
     }

     final Widget body = Container(
       padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
       color: _primaryColor.shade50,
       child: cardCollection,
     );

     return Theme(
       data: ThemeData(
         primarySwatch: _primaryColor,
       ),
       child: Scaffold(
         appBar: _buildAppBar(context),
         drawer: _buildDrawer(),
         body: body,
       ),
     );
   }
 }

 void main() {
   runApp(const MaterialApp(
     title: 'Cards',
     home: CardCollection(),
   ));
 }
	// Copyright 2014 The Flutter 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 'dart:math';

	import 'package:flutter/material.dart';

	class CardModel {
	CardModel(this.value, this.height) :
	textController = TextEditingController(text: 'Item $value');

	int value;
	double height;
	int get color => ((value % 9) + 1) * 100;
	final TextEditingController textController;
	Key get key => ObjectKey(this);
	}

	class CardCollection extends StatefulWidget {
	const CardCollection({super.key});

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

	class CardCollectionState extends State<CardCollection> {

	static const TextStyle cardLabelStyle =
	TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.bold);

	// TODO(hansmuller): need a local image asset
	static const String _sunshineURL = 'http://www.walltor.com/images/wallpaper/good-morning-sunshine-58540.jpg';

	static const double kCardMargins = 8.0;
	static const double kFixedCardHeight = 100.0;
	static const List<double> _cardHeights = <double>[
	48.0, 63.0, 85.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
	48.0, 63.0, 85.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
	48.0, 63.0, 85.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
	];

	MaterialColor _primaryColor = Colors.deepPurple;
	List<CardModel> _cardModels = <CardModel>[];
	DismissDirection _dismissDirection = DismissDirection.horizontal;
	TextAlign _textAlign = TextAlign.center;
	bool _editable = false;
	bool _fixedSizeCards = false;
	bool _sunshine = false;
	bool _varyFontSizes = false;

	void _updateCardSizes() {
	if (_fixedSizeCards) {
	return;
	}
	_cardModels = List<CardModel>.generate(
	_cardModels.length,
	(int i) {
	_cardModels[i].height = _editable ? max(_cardHeights[i], 60.0) : _cardHeights[i];
	return _cardModels[i];
	},
	);
	}

	void _initVariableSizedCardModels() {
	_cardModels = List<CardModel>.generate(
	_cardHeights.length,
	(int i) => CardModel(i, _editable ? max(_cardHeights[i], 60.0) : _cardHeights[i]),
	);
	}

	void _initFixedSizedCardModels() {
	const int cardCount = 27;
	_cardModels = List<CardModel>.generate(
	cardCount,
	(int i) => CardModel(i, kFixedCardHeight),
	);
	}

	void _initCardModels() {
	if (_fixedSizeCards) {
	_initFixedSizedCardModels();
	} else {
	_initVariableSizedCardModels();
	}
	}

	@override
	void initState() {
	super.initState();
	_initCardModels();
	}

	void dismissCard(CardModel card) {
	if (_cardModels.contains(card)) {
	setState(() {
	_cardModels.remove(card);
	});
	}
	}

	Widget _buildDrawer() {
	return Drawer(
	child: IconTheme(
	data: const IconThemeData(color: Colors.black),
	child: ListView(
	children: <Widget>[
	const DrawerHeader(child: Center(child: Text('Options'))),
	buildDrawerCheckbox('Make card labels editable', _editable, _toggleEditable),
	buildDrawerCheckbox('Fixed size cards', _fixedSizeCards, _toggleFixedSizeCards),
	buildDrawerCheckbox('Let the sun shine', _sunshine, _toggleSunshine),
	buildDrawerCheckbox('Vary font sizes', _varyFontSizes, _toggleVaryFontSizes, enabled: !_editable),
	const Divider(),
	buildDrawerColorRadioItem('Deep Purple', Colors.deepPurple, _primaryColor, _selectColor),
	buildDrawerColorRadioItem('Green', Colors.green, _primaryColor, _selectColor),
	buildDrawerColorRadioItem('Amber', Colors.amber, _primaryColor, _selectColor),
	buildDrawerColorRadioItem('Teal', Colors.teal, _primaryColor, _selectColor),
	const Divider(),
	buildDrawerDirectionRadioItem('Dismiss horizontally', DismissDirection.horizontal, _dismissDirection, _changeDismissDirection, icon: Icons.code),
	buildDrawerDirectionRadioItem('Dismiss left', DismissDirection.endToStart, _dismissDirection, _changeDismissDirection, icon: Icons.arrow_back),
	buildDrawerDirectionRadioItem('Dismiss right', DismissDirection.startToEnd, _dismissDirection, _changeDismissDirection, icon: Icons.arrow_forward),
	const Divider(),
	buildFontRadioItem('Left-align text', TextAlign.left, _textAlign, _changeTextAlign, icon: Icons.format_align_left, enabled: !_editable),
	buildFontRadioItem('Center-align text', TextAlign.center, _textAlign, _changeTextAlign, icon: Icons.format_align_center, enabled: !_editable),
	buildFontRadioItem('Right-align text', TextAlign.right, _textAlign, _changeTextAlign, icon: Icons.format_align_right, enabled: !_editable),
	const Divider(),
	ListTile(
	leading: const Icon(Icons.dvr),
	onTap: () { debugDumpApp(); debugDumpRenderTree(); },
	title: const Text('Dump App to Console'),
	),
	],
	),
	),
	);
	}

	String _dismissDirectionText(DismissDirection direction) {
	final String s = direction.toString();
	return "dismiss ${s.substring(s.indexOf('.') + 1)}";
	}

	void _toggleEditable() {
	setState(() {
	_editable = !_editable;
	_updateCardSizes();
	});
	}

	void _toggleFixedSizeCards() {
	setState(() {
	_fixedSizeCards = !_fixedSizeCards;
	_initCardModels();
	});
	}

	void _toggleSunshine() {
	setState(() {
	_sunshine = !_sunshine;
	});
	}

	void _toggleVaryFontSizes() {
	setState(() {
	_varyFontSizes = !_varyFontSizes;
	});
	}

	void _selectColor(MaterialColor? selection) {
	setState(() {
	_primaryColor = selection!;
	});
	}

	void _changeDismissDirection(DismissDirection? newDismissDirection) {
	setState(() {
	_dismissDirection = newDismissDirection!;
	});
	}

	void _changeTextAlign(TextAlign? newTextAlign) {
	setState(() {
	_textAlign = newTextAlign!;
	});
	}

	Widget buildDrawerCheckbox(String label, bool value, void Function() callback, { bool enabled = true }) {
	return ListTile(
	onTap: enabled ? callback : null,
	title: Text(label),
	trailing: Checkbox(
	value: value,
	onChanged: enabled ? (_) { callback(); } : null,
	),
	);
	}

	Widget buildDrawerColorRadioItem(String label, MaterialColor itemValue, MaterialColor currentValue, ValueChanged<MaterialColor?> onChanged, { IconData? icon, bool enabled = true }) {
	return ListTile(
	leading: Icon(icon),
	title: Text(label),
	onTap: enabled ? () { onChanged(itemValue); } : null,
	trailing: Radio<MaterialColor>(
	value: itemValue,
	groupValue: currentValue,
	onChanged: enabled ? onChanged : null,
	),
	);
	}

	Widget buildDrawerDirectionRadioItem(String label, DismissDirection itemValue, DismissDirection currentValue, ValueChanged<DismissDirection?> onChanged, { IconData? icon, bool enabled = true }) {
	return ListTile(
	leading: Icon(icon),
	title: Text(label),
	onTap: enabled ? () { onChanged(itemValue); } : null,
	trailing: Radio<DismissDirection>(
	value: itemValue,
	groupValue: currentValue,
	onChanged: enabled ? onChanged : null,
	),
	);
	}

	Widget buildFontRadioItem(String label, TextAlign itemValue, TextAlign currentValue, ValueChanged<TextAlign?> onChanged, { IconData? icon, bool enabled = true }) {
	return ListTile(
	leading: Icon(icon),
	title: Text(label),
	onTap: enabled ? () { onChanged(itemValue); } : null,
	trailing: Radio<TextAlign>(
	value: itemValue,
	groupValue: currentValue,
	onChanged: enabled ? onChanged : null,
	),
	);
	}

	AppBar _buildAppBar(BuildContext context) {
	return AppBar(
	actions: <Widget>[
	Text(_dismissDirectionText(_dismissDirection)),
	],
	flexibleSpace: Container(
	padding: const EdgeInsets.only(left: 72.0),
	height: 128.0,
	alignment: const Alignment(-1.0, 0.5),
	child: Text('Swipe Away: ${_cardModels.length}', style: Theme.of(context).primaryTextTheme.titleLarge),
	),
	);
	}

	Widget _buildCard(BuildContext context, int index) {
	final CardModel cardModel = _cardModels[index];
	final Widget card = Dismissible(
	key: ObjectKey(cardModel),
	direction: _dismissDirection,
	onDismissed: (DismissDirection direction) { dismissCard(cardModel); },
	child: Card(
	color: _primaryColor[cardModel.color],
	child: Container(
	height: cardModel.height,
	padding: const EdgeInsets.all(kCardMargins),
	child: _editable ?
	Center(
	child: TextField(
	key: GlobalObjectKey(cardModel),
	controller: cardModel.textController,
	),
	)
	: DefaultTextStyle.merge(
	style: cardLabelStyle.copyWith(
	fontSize: _varyFontSizes ? 5.0 + index : null
	),
	child: Column(
	crossAxisAlignment: CrossAxisAlignment.stretch,
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	Text(cardModel.textController.text, textAlign: _textAlign),
	],
	),
	),
	),
	),
	);

	String backgroundMessage;
	switch (_dismissDirection) {
	case DismissDirection.horizontal:
	backgroundMessage = 'Swipe in either direction';
	case DismissDirection.endToStart:
	backgroundMessage = 'Swipe left to dismiss';
	case DismissDirection.startToEnd:
	backgroundMessage = 'Swipe right to dismiss';
	case DismissDirection.vertical:
	case DismissDirection.up:
	case DismissDirection.down:
	case DismissDirection.none:
	backgroundMessage = 'Unsupported dismissDirection';
	}

	// This icon is wrong in RTL.
	Widget leftArrowIcon = const Icon(Icons.arrow_back, size: 36.0);
	if (_dismissDirection == DismissDirection.startToEnd) {
	leftArrowIcon = Opacity(opacity: 0.1, child: leftArrowIcon);
	}

	// This icon is wrong in RTL.
	Widget rightArrowIcon = const Icon(Icons.arrow_forward, size: 36.0);
	if (_dismissDirection == DismissDirection.endToStart) {
	rightArrowIcon = Opacity(opacity: 0.1, child: rightArrowIcon);
	}

	final ThemeData theme = Theme.of(context);
	final TextStyle? backgroundTextStyle = theme.primaryTextTheme.titleLarge;

	// The background Widget appears behind the Dismissible card when the card
	// moves to the left or right. The Positioned widget ensures that the
	// size of the background,card Stack will be based only on the card. The
	// Viewport ensures that when the card's resize animation occurs, the
	// background (text and icons) will just be clipped, not resized.
	final Widget background = Positioned.fill(
	child: Container(
	margin: const EdgeInsets.all(4.0),
	child: SingleChildScrollView(
	child: Container(
	height: cardModel.height,
	color: theme.primaryColor,
	child: Row(
	children: <Widget>[
	leftArrowIcon,
	Expanded(
	child: Text(backgroundMessage,
	style: backgroundTextStyle,
	textAlign: TextAlign.center,
	),
	),
	rightArrowIcon,
	],
	),
	),
	),
	),
	);

	return IconTheme(
	key: cardModel.key,
	data: const IconThemeData(color: Colors.white),
	child: Stack(children: <Widget>[background, card]),
	);
	}

	Shader _createShader(Rect bounds) {
	return const LinearGradient(
	begin: Alignment.topCenter,
	end: Alignment.bottomCenter,
	colors: <Color>[Color(0x00FFFFFF), Color(0xFFFFFFFF)],
	stops: <double>[0.1, 0.35],
	)
	.createShader(bounds);
	}

	@override
	Widget build(BuildContext context) {
	Widget cardCollection = ListView.builder(
	itemExtent: _fixedSizeCards ? kFixedCardHeight : null,
	itemCount: _cardModels.length,
	itemBuilder: _buildCard,
	);

	if (_sunshine) {
	cardCollection = Stack(
	children: <Widget>[
	Column(children: <Widget>[Image.network(_sunshineURL)]),
	ShaderMask(shaderCallback: _createShader, child: cardCollection),
	],
	);
	}

	final Widget body = Container(
	padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
	color: _primaryColor.shade50,
	child: cardCollection,
	);

	return Theme(
	data: ThemeData(
	primarySwatch: _primaryColor,
	),
	child: Scaffold(
	appBar: _buildAppBar(context),
	drawer: _buildDrawer(),
	body: body,
	),
	);
	}
	}

	void main() {
	runApp(const MaterialApp(
	title: 'Cards',
	home: CardCollection(),
	));
	}