mirror of
https://github.com/flutter/samples.git
synced 2025-11-11 07:18:15 +00:00
Update web/ samples to work with Flutter SDK (#134)
* add package:http dependency in dad_jokes * add package:http dependency in filipino_cuisine * don't build package:http demos until flutter/flutter#34858 is resolved * update gallery * update github_dataviz * update particle_background * don't build github_dataviz (uses package:http) * update slide_puzzle * update spinning_square * update timeflow * update vision_challenge * update charts * update dad_jokes * update filipino cuisine * ignore build output * update timeflow and vision_challenge * update slide_puzzle * don't commit build/ directory * move preview.png images to assets * fix path url join * update readme * update web/readme.md
This commit is contained in:
John Ryan
GitHub
@@ -1,79 +1,335 @@
|
||||
// Copyright 2018 The Chromium Authors. All rights reserved.
|
||||
// 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_web/material.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../gallery/demo.dart';
|
||||
|
||||
class ChipDemo extends StatefulWidget {
|
||||
static const routeName = '/material/chip';
|
||||
const List<String> _defaultMaterials = <String>[
|
||||
'poker',
|
||||
'tortilla',
|
||||
'fish and',
|
||||
'micro',
|
||||
'wood',
|
||||
];
|
||||
|
||||
const List<String> _defaultActions = <String>[
|
||||
'flake',
|
||||
'cut',
|
||||
'fragment',
|
||||
'splinter',
|
||||
'nick',
|
||||
'fry',
|
||||
'solder',
|
||||
'cash in',
|
||||
'eat',
|
||||
];
|
||||
|
||||
const Map<String, String> _results = <String, String>{
|
||||
'flake': 'flaking',
|
||||
'cut': 'cutting',
|
||||
'fragment': 'fragmenting',
|
||||
'splinter': 'splintering',
|
||||
'nick': 'nicking',
|
||||
'fry': 'frying',
|
||||
'solder': 'soldering',
|
||||
'cash in': 'cashing in',
|
||||
'eat': 'eating',
|
||||
};
|
||||
|
||||
const List<String> _defaultTools = <String>[
|
||||
'hammer',
|
||||
'chisel',
|
||||
'fryer',
|
||||
'fabricator',
|
||||
'customer',
|
||||
];
|
||||
|
||||
const Map<String, String> _avatars = <String, String>{
|
||||
'hammer': 'people/square/ali.png',
|
||||
'chisel': 'people/square/sandra.png',
|
||||
'fryer': 'people/square/trevor.png',
|
||||
'fabricator': 'people/square/stella.png',
|
||||
'customer': 'people/square/peter.png',
|
||||
};
|
||||
|
||||
const Map<String, Set<String>> _toolActions = <String, Set<String>>{
|
||||
'hammer': <String>{'flake', 'fragment', 'splinter'},
|
||||
'chisel': <String>{'flake', 'nick', 'splinter'},
|
||||
'fryer': <String>{'fry'},
|
||||
'fabricator': <String>{'solder'},
|
||||
'customer': <String>{'cash in', 'eat'},
|
||||
};
|
||||
|
||||
const Map<String, Set<String>> _materialActions = <String, Set<String>>{
|
||||
'poker': <String>{'cash in'},
|
||||
'tortilla': <String>{'fry', 'eat'},
|
||||
'fish and': <String>{'fry', 'eat'},
|
||||
'micro': <String>{'solder', 'fragment'},
|
||||
'wood': <String>{'flake', 'cut', 'splinter', 'nick'},
|
||||
};
|
||||
|
||||
class _ChipsTile extends StatelessWidget {
|
||||
const _ChipsTile({
|
||||
Key key,
|
||||
this.label,
|
||||
this.children,
|
||||
}) : super(key: key);
|
||||
|
||||
final String label;
|
||||
final List<Widget> children;
|
||||
|
||||
// Wraps a list of chips into a ListTile for display as a section in the demo.
|
||||
@override
|
||||
State<StatefulWidget> createState() => _ChipDemoState();
|
||||
Widget build(BuildContext context) {
|
||||
final List<Widget> cardChildren = <Widget>[
|
||||
Container(
|
||||
padding: const EdgeInsets.only(top: 16.0, bottom: 4.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(label, textAlign: TextAlign.start),
|
||||
),
|
||||
];
|
||||
if (children.isNotEmpty) {
|
||||
cardChildren.add(Wrap(
|
||||
children: children.map<Widget>((Widget chip) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(2.0),
|
||||
child: chip,
|
||||
);
|
||||
}).toList()));
|
||||
} else {
|
||||
final TextStyle textStyle = Theme.of(context).textTheme.caption.copyWith(fontStyle: FontStyle.italic);
|
||||
cardChildren.add(
|
||||
Semantics(
|
||||
container: true,
|
||||
child: Container(
|
||||
alignment: Alignment.center,
|
||||
constraints: const BoxConstraints(minWidth: 48.0, minHeight: 48.0),
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Text('None', style: textStyle),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
return Card(
|
||||
semanticContainer: false,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: cardChildren,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ChipDemo extends StatefulWidget {
|
||||
static const String routeName = '/material/chip';
|
||||
|
||||
@override
|
||||
_ChipDemoState createState() => _ChipDemoState();
|
||||
}
|
||||
|
||||
class _ChipDemoState extends State<ChipDemo> {
|
||||
bool _filterChipSelected = false;
|
||||
bool _hasAvatar = true;
|
||||
_ChipDemoState() {
|
||||
_reset();
|
||||
}
|
||||
|
||||
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
|
||||
final Set<String> _materials = <String>{};
|
||||
String _selectedMaterial = '';
|
||||
String _selectedAction = '';
|
||||
final Set<String> _tools = <String>{};
|
||||
final Set<String> _selectedTools = <String>{};
|
||||
final Set<String> _actions = <String>{};
|
||||
bool _showShapeBorder = false;
|
||||
|
||||
// Initialize members with the default data.
|
||||
void _reset() {
|
||||
_materials.clear();
|
||||
_materials.addAll(_defaultMaterials);
|
||||
_actions.clear();
|
||||
_actions.addAll(_defaultActions);
|
||||
_tools.clear();
|
||||
_tools.addAll(_defaultTools);
|
||||
_selectedMaterial = '';
|
||||
_selectedAction = '';
|
||||
_selectedTools.clear();
|
||||
}
|
||||
|
||||
void _removeMaterial(String name) {
|
||||
_materials.remove(name);
|
||||
if (_selectedMaterial == name) {
|
||||
_selectedMaterial = '';
|
||||
}
|
||||
}
|
||||
|
||||
void _removeTool(String name) {
|
||||
_tools.remove(name);
|
||||
_selectedTools.remove(name);
|
||||
}
|
||||
|
||||
String _capitalize(String name) {
|
||||
assert(name != null && name.isNotEmpty);
|
||||
return name.substring(0, 1).toUpperCase() + name.substring(1);
|
||||
}
|
||||
|
||||
// This converts a String to a unique color, based on the hash value of the
|
||||
// String object. It takes the bottom 16 bits of the hash, and uses that to
|
||||
// pick a hue for an HSV color, and then creates the color (with a preset
|
||||
// saturation and value). This means that any unique strings will also have
|
||||
// unique colors, but they'll all be readable, since they have the same
|
||||
// saturation and value.
|
||||
Color _nameToColor(String name) {
|
||||
assert(name.length > 1);
|
||||
final int hash = name.hashCode & 0xffff;
|
||||
final double hue = (360.0 * hash / (1 << 15)) % 360.0;
|
||||
return HSVColor.fromAHSV(1.0, hue, 0.4, 0.90).toColor();
|
||||
}
|
||||
|
||||
AssetImage _nameToAvatar(String name) {
|
||||
assert(_avatars.containsKey(name));
|
||||
return AssetImage(
|
||||
_avatars[name],
|
||||
package: 'flutter_gallery_assets',
|
||||
);
|
||||
}
|
||||
|
||||
String _createResult() {
|
||||
if (_selectedAction.isEmpty) {
|
||||
return '';
|
||||
}
|
||||
return _capitalize(_results[_selectedAction]) + '!';
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return wrapScaffold('Chip Demo', context, _scaffoldKey, _buildContents(),
|
||||
ChipDemo.routeName);
|
||||
}
|
||||
final List<Widget> chips = _materials.map<Widget>((String name) {
|
||||
return Chip(
|
||||
key: ValueKey<String>(name),
|
||||
backgroundColor: _nameToColor(name),
|
||||
label: Text(_capitalize(name)),
|
||||
onDeleted: () {
|
||||
setState(() {
|
||||
_removeMaterial(name);
|
||||
});
|
||||
},
|
||||
);
|
||||
}).toList();
|
||||
|
||||
Widget _buildContents() {
|
||||
return Material(
|
||||
child: Column(
|
||||
children: [
|
||||
addPadding(Chip(
|
||||
label: Text('Chip'),
|
||||
)),
|
||||
addPadding(InputChip(
|
||||
label: Text('InputChip'),
|
||||
)),
|
||||
addPadding(ChoiceChip(
|
||||
label: Text('Selected ChoiceChip'),
|
||||
selected: true,
|
||||
)),
|
||||
addPadding(ChoiceChip(
|
||||
label: Text('Deselected ChoiceChip'),
|
||||
selected: false,
|
||||
)),
|
||||
addPadding(FilterChip(
|
||||
label: Text('FilterChip'),
|
||||
selected: _filterChipSelected,
|
||||
onSelected: (bool newValue) {
|
||||
final List<Widget> inputChips = _tools.map<Widget>((String name) {
|
||||
return InputChip(
|
||||
key: ValueKey<String>(name),
|
||||
avatar: CircleAvatar(
|
||||
backgroundImage: _nameToAvatar(name),
|
||||
),
|
||||
label: Text(_capitalize(name)),
|
||||
onDeleted: () {
|
||||
setState(() {
|
||||
_filterChipSelected = newValue;
|
||||
_removeTool(name);
|
||||
});
|
||||
},
|
||||
)),
|
||||
addPadding(ActionChip(
|
||||
label: Text('ActionChip'),
|
||||
onPressed: () {},
|
||||
)),
|
||||
addPadding(ActionChip(
|
||||
label: Text('Chip with avatar'),
|
||||
avatar: _hasAvatar
|
||||
? CircleAvatar(
|
||||
backgroundColor: Colors.amber,
|
||||
child: Text('Z'),
|
||||
)
|
||||
: null,
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_hasAvatar = !_hasAvatar;
|
||||
});
|
||||
},
|
||||
)),
|
||||
],
|
||||
));
|
||||
});
|
||||
}).toList();
|
||||
|
||||
final List<Widget> choiceChips = _materials.map<Widget>((String name) {
|
||||
return ChoiceChip(
|
||||
key: ValueKey<String>(name),
|
||||
backgroundColor: _nameToColor(name),
|
||||
label: Text(_capitalize(name)),
|
||||
selected: _selectedMaterial == name,
|
||||
onSelected: (bool value) {
|
||||
setState(() {
|
||||
_selectedMaterial = value ? name : '';
|
||||
});
|
||||
},
|
||||
);
|
||||
}).toList();
|
||||
|
||||
final List<Widget> filterChips = _defaultTools.map<Widget>((String name) {
|
||||
return FilterChip(
|
||||
key: ValueKey<String>(name),
|
||||
label: Text(_capitalize(name)),
|
||||
selected: _tools.contains(name) && _selectedTools.contains(name),
|
||||
onSelected: !_tools.contains(name)
|
||||
? null
|
||||
: (bool value) {
|
||||
setState(() {
|
||||
if (!value) {
|
||||
_selectedTools.remove(name);
|
||||
} else {
|
||||
_selectedTools.add(name);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
}).toList();
|
||||
|
||||
Set<String> allowedActions = <String>{};
|
||||
if (_selectedMaterial != null && _selectedMaterial.isNotEmpty) {
|
||||
for (String tool in _selectedTools) {
|
||||
allowedActions.addAll(_toolActions[tool]);
|
||||
}
|
||||
allowedActions = allowedActions.intersection(_materialActions[_selectedMaterial]);
|
||||
}
|
||||
|
||||
final List<Widget> actionChips = allowedActions.map<Widget>((String name) {
|
||||
return ActionChip(
|
||||
label: Text(_capitalize(name)),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_selectedAction = name;
|
||||
});
|
||||
},
|
||||
);
|
||||
}).toList();
|
||||
|
||||
final ThemeData theme = Theme.of(context);
|
||||
final List<Widget> tiles = <Widget>[
|
||||
const SizedBox(height: 8.0, width: 0.0),
|
||||
_ChipsTile(label: 'Available Materials (Chip)', children: chips),
|
||||
_ChipsTile(label: 'Available Tools (InputChip)', children: inputChips),
|
||||
_ChipsTile(label: 'Choose a Material (ChoiceChip)', children: choiceChips),
|
||||
_ChipsTile(label: 'Choose Tools (FilterChip)', children: filterChips),
|
||||
_ChipsTile(label: 'Perform Allowed Action (ActionChip)', children: actionChips),
|
||||
const Divider(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Center(
|
||||
child: Text(
|
||||
_createResult(),
|
||||
style: theme.textTheme.title,
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Chips'),
|
||||
actions: <Widget>[
|
||||
MaterialDemoDocumentationButton(ChipDemo.routeName),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_showShapeBorder = !_showShapeBorder;
|
||||
});
|
||||
},
|
||||
icon: const Icon(Icons.vignette, semanticLabel: 'Update border shape'),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: ChipTheme(
|
||||
data: _showShapeBorder
|
||||
? theme.chipTheme.copyWith(
|
||||
shape: BeveledRectangleBorder(
|
||||
side: const BorderSide(width: 0.66, style: BorderStyle.solid, color: Colors.grey),
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
))
|
||||
: theme.chipTheme,
|
||||
child: Scrollbar(child: ListView(children: tiles)),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: () => setState(_reset),
|
||||
child: const Icon(Icons.refresh, semanticLabel: 'Reset chips'),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Padding addPadding(Widget widget) => Padding(
|
||||
padding: EdgeInsets.all(10.0),
|
||||
child: widget,
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user