Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-11 23:39:14 +00:00
Code Issues Releases Wiki Activity

Update web/ samples to work with Flutter SDK (#134)

Browse Source 
* 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
2019-09-10 09:49:58 -07:00
committed by GitHub
parent 16fa475ff8
commit 317d459a58
746 changed files with 14607 additions and 61610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
web/gallery/lib/demo/material/expansion_panels_demo.dart
View File

@@ -1,19 +1,28 @@
// Copyright 2018 The Chromium Authors. All rights reserved.
// Copyright 2016 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';
@visibleForTesting
enum Location { Barbados, Bahamas, Bermuda }
enum Location {
Barbados,
Bahamas,
Bermuda
}
typedef DemoItemBodyBuilder<T> = Widget Function(DemoItem<T> item);
typedef ValueToString<T> = String Function(T value);
class DualHeaderWithHint extends StatelessWidget {
const DualHeaderWithHint({this.name, this.value, this.hint, this.showHint});
const DualHeaderWithHint({
this.name,
this.value,
this.hint,
this.showHint,
});
final String name;
final String value;
@@ -27,8 +36,7 @@ class DualHeaderWithHint extends StatelessWidget {
firstCurve: const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
secondCurve: const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
sizeCurve: Curves.fastOutSlowIn,
crossFadeState:
isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
crossFadeState: isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
duration: const Duration(milliseconds: 200),
);
}
@@ -38,37 +46,45 @@ class DualHeaderWithHint extends StatelessWidget {
final ThemeData theme = Theme.of(context);
final TextTheme textTheme = theme.textTheme;
return Row(children: <Widget>[
Expanded(
flex: 2,
child: Container(
margin: const EdgeInsets.only(left: 24.0),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.centerLeft,
child: Text(
name,
style: textTheme.body1.copyWith(fontSize: 15.0),
return Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
margin: const EdgeInsets.only(left: 24.0),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.centerLeft,
child: Text(
name,
style: textTheme.body1.copyWith(fontSize: 15.0),
),
),
),
),
),
Expanded(
Expanded(
flex: 3,
child: Container(
margin: const EdgeInsets.only(left: 24.0),
child: _crossFade(
Text(value,
style: textTheme.caption.copyWith(fontSize: 15.0)),
Text(hint, style: textTheme.caption.copyWith(fontSize: 15.0)),
showHint)))
]);
margin: const EdgeInsets.only(left: 24.0),
child: _crossFade(
Text(value, style: textTheme.caption.copyWith(fontSize: 15.0)),
Text(hint, style: textTheme.caption.copyWith(fontSize: 15.0)),
showHint,
),
),
),
],
);
}
}
class CollapsibleBody extends StatelessWidget {
const CollapsibleBody(
{this.margin = EdgeInsets.zero, this.child, this.onSave, this.onCancel});
const CollapsibleBody({
this.margin = EdgeInsets.zero,
this.child,
this.onSave,
this.onCancel,
});
final EdgeInsets margin;
final Widget child;
@@ -80,42 +96,62 @@ class CollapsibleBody extends StatelessWidget {
final ThemeData theme = Theme.of(context);
final TextTheme textTheme = theme.textTheme;
return Column(children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 24.0, right: 24.0, bottom: 24.0) -
margin,
return Column(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
left: 24.0,
right: 24.0,
bottom: 24.0,
) - margin,
child: Center(
child: DefaultTextStyle(
style: textTheme.caption.copyWith(fontSize: 15.0),
child: child))),
const Divider(height: 1.0),
Container(
child: DefaultTextStyle(
style: textTheme.caption.copyWith(fontSize: 15.0),
child: child,
),
),
),
const Divider(height: 1.0),
Container(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child:
Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
margin: const EdgeInsets.only(right: 8.0),
child: FlatButton(
onPressed: onCancel,
child: const Text('CANCEL',
style: TextStyle(
color: Colors.black54,
fontSize: 15.0,
fontWeight: FontWeight.w500)))),
Container(
onPressed: onCancel,
child: const Text('CANCEL', style: TextStyle(
color: Colors.black54,
fontSize: 15.0,
fontWeight: FontWeight.w500,
)),
),
),
Container(
margin: const EdgeInsets.only(right: 8.0),
child: FlatButton(
onPressed: onSave,
textTheme: ButtonTextTheme.accent,
child: const Text('SAVE')))
]))
]);
onPressed: onSave,
textTheme: ButtonTextTheme.accent,
child: const Text('SAVE'),
),
),
],
),
),
],
);
}
}
class DemoItem<T> {
DemoItem({this.name, this.value, this.hint, this.builder, this.valueToString})
: textController = TextEditingController(text: valueToString(value));
DemoItem({
this.name,
this.value,
this.hint,
this.builder,
this.valueToString,
}) : textController = TextEditingController(text: valueToString(value));
final String name;
final String hint;
@@ -128,10 +164,11 @@ class DemoItem<T> {
ExpansionPanelHeaderBuilder get headerBuilder {
return (BuildContext context, bool isExpanded) {
return DualHeaderWithHint(
name: name,
value: valueToString(value),
hint: hint,
showHint: isExpanded);
name: name,
value: valueToString(value),
hint: hint,
showHint: isExpanded,
);
};
}
@@ -170,14 +207,8 @@ class _ExpansionPanelsDemoState extends State<ExpansionPanelsDemo> {
builder: (BuildContext context) {
return CollapsibleBody(
margin: const EdgeInsets.symmetric(horizontal: 16.0),
onSave: () {
Form.of(context).save();
close();
},
onCancel: () {
Form.of(context).reset();
close();
},
onSave: () { Form.of(context).save(); close(); },
onCancel: () { Form.of(context).reset(); close(); },
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: TextFormField(
@@ -186,9 +217,7 @@ class _ExpansionPanelsDemoState extends State<ExpansionPanelsDemo> {
hintText: item.hint,
labelText: item.name,
),
onSaved: (String value) {
item.value = value;
},
onSaved: (String value) { item.value = value; },
),
),
);
@@ -198,104 +227,101 @@ class _ExpansionPanelsDemoState extends State<ExpansionPanelsDemo> {
},
),
DemoItem<Location>(
name: 'Location',
value: Location.Bahamas,
hint: 'Select location',
valueToString: (Location location) =>
location.toString().split('.')[1],
builder: (DemoItem<Location> item) {
void close() {
setState(() {
item.isExpanded = false;
});
}
return Form(child: Builder(builder: (BuildContext context) {
return CollapsibleBody(
onSave: () {
Form.of(context).save();
close();
},
onCancel: () {
Form.of(context).reset();
close();
},
child: FormField<Location>(
name: 'Location',
value: Location.Bahamas,
hint: 'Select location',
valueToString: (Location location) => location.toString().split('.')[1],
builder: (DemoItem<Location> item) {
void close() {
setState(() {
item.isExpanded = false;
});
}
return Form(
child: Builder(
builder: (BuildContext context) {
return CollapsibleBody(
onSave: () { Form.of(context).save(); close(); },
onCancel: () { Form.of(context).reset(); close(); },
child: FormField<Location>(
initialValue: item.value,
onSaved: (Location result) {
item.value = result;
},
onSaved: (Location result) { item.value = result; },
builder: (FormFieldState<Location> field) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RadioListTile<Location>(
value: Location.Bahamas,
title: const Text('Bahamas'),
groupValue: field.value,
onChanged: field.didChange,
),
RadioListTile<Location>(
value: Location.Barbados,
title: const Text('Barbados'),
groupValue: field.value,
onChanged: field.didChange,
),
RadioListTile<Location>(
value: Location.Bermuda,
title: const Text('Bermuda'),
groupValue: field.value,
onChanged: field.didChange,
),
]);
}),
);
}));
}),
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RadioListTile<Location>(
value: Location.Bahamas,
title: const Text('Bahamas'),
groupValue: field.value,
onChanged: field.didChange,
),
RadioListTile<Location>(
value: Location.Barbados,
title: const Text('Barbados'),
groupValue: field.value,
onChanged: field.didChange,
),
RadioListTile<Location>(
value: Location.Bermuda,
title: const Text('Bermuda'),
groupValue: field.value,
onChanged: field.didChange,
),
],
);
},
),
);
}
),
);
},
),
DemoItem<double>(
name: 'Sun',
value: 80.0,
hint: 'Select sun level',
valueToString: (double amount) => '${amount.round()}',
builder: (DemoItem<double> item) {
void close() {
setState(() {
item.isExpanded = false;
});
}
name: 'Sun',
value: 80.0,
hint: 'Select sun level',
valueToString: (double amount) => '${amount.round()}',
builder: (DemoItem<double> item) {
void close() {
setState(() {
item.isExpanded = false;
});
}
return Form(child: Builder(builder: (BuildContext context) {
return CollapsibleBody(
onSave: () {
Form.of(context).save();
close();
},
onCancel: () {
Form.of(context).reset();
close();
},
child: FormField<double>(
initialValue: item.value,
onSaved: (double value) {
item.value = value;
},
builder: (FormFieldState<double> field) {
return Slider(
min: 0.0,
max: 100.0,
divisions: 5,
activeColor:
Colors.orange[100 + (field.value * 5.0).round()],
label: '${field.value.round()}',
value: field.value,
onChanged: field.didChange,
);
},
),
);
}));
})
return Form(
child: Builder(
builder: (BuildContext context) {
return CollapsibleBody(
onSave: () { Form.of(context).save(); close(); },
onCancel: () { Form.of(context).reset(); close(); },
child: FormField<double>(
initialValue: item.value,
onSaved: (double value) { item.value = value; },
builder: (FormFieldState<double> field) {
return Container(
// Allow room for the value indicator.
padding: const EdgeInsets.only(top: 44.0),
child: Slider(
min: 0.0,
max: 100.0,
divisions: 5,
activeColor: Colors.orange[100 + (field.value * 5.0).round()],
label: '${field.value.round()}',
value: field.value,
onChanged: field.didChange,
),
);
},
),
);
}
),
);
},
),
];
}
@@ -315,18 +341,19 @@ class _ExpansionPanelsDemoState extends State<ExpansionPanelsDemo> {
child: Container(
margin: const EdgeInsets.all(24.0),
child: ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_demoItems[index].isExpanded = !isExpanded;
});
},
children:
_demoItems.map<ExpansionPanel>((DemoItem<dynamic> item) {
return ExpansionPanel(
isExpanded: item.isExpanded,
headerBuilder: item.headerBuilder,
body: item.build());
}).toList()),
expansionCallback: (int index, bool isExpanded) {
setState(() {
_demoItems[index].isExpanded = !isExpanded;
});
},
children: _demoItems.map<ExpansionPanel>((DemoItem<dynamic> item) {
return ExpansionPanel(
isExpanded: item.isExpanded,
headerBuilder: item.headerBuilder,
body: item.build(),
);
}).toList(),
),
),
),
),