mirror of
https://github.com/flutter/samples.git
synced 2025-11-12 07:48:55 +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,24 +1,77 @@
|
||||
// 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 SelectionControlsDemo extends StatefulWidget {
|
||||
static const String routeName = '/material/selection';
|
||||
const String _checkboxText =
|
||||
'Checkboxes allow the user to select multiple options from a set. '
|
||||
'A normal checkbox\'s value is true or false and a tristate checkbox\'s '
|
||||
'value can also be null.';
|
||||
|
||||
const String _checkboxCode = 'selectioncontrols_checkbox';
|
||||
|
||||
const String _radioText =
|
||||
'Radio buttons allow the user to select one option from a set. Use radio '
|
||||
'buttons for exclusive selection if you think that the user needs to see '
|
||||
'all available options side-by-side.';
|
||||
|
||||
const String _radioCode = 'selectioncontrols_radio';
|
||||
|
||||
const String _switchText =
|
||||
'On/off switches toggle the state of a single settings option. The option '
|
||||
'that the switch controls, as well as the state it’s in, should be made '
|
||||
'clear from the corresponding inline label.';
|
||||
|
||||
const String _switchCode = 'selectioncontrols_switch';
|
||||
|
||||
class SelectionControlsDemo extends StatefulWidget {
|
||||
static const String routeName = '/material/selection-controls';
|
||||
|
||||
@override
|
||||
_SelectionControlsDemoState createState() => _SelectionControlsDemoState();
|
||||
}
|
||||
|
||||
class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
|
||||
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<ComponentDemoTabData> demos = <ComponentDemoTabData>[
|
||||
ComponentDemoTabData(
|
||||
tabName: 'CHECKBOX',
|
||||
description: _checkboxText,
|
||||
demoWidget: buildCheckbox(),
|
||||
exampleCodeTag: _checkboxCode,
|
||||
documentationUrl: 'https://docs.flutter.io/flutter/material/Checkbox-class.html',
|
||||
),
|
||||
ComponentDemoTabData(
|
||||
tabName: 'RADIO',
|
||||
description: _radioText,
|
||||
demoWidget: buildRadio(),
|
||||
exampleCodeTag: _radioCode,
|
||||
documentationUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html',
|
||||
),
|
||||
ComponentDemoTabData(
|
||||
tabName: 'SWITCH',
|
||||
description: _switchText,
|
||||
demoWidget: buildSwitch(),
|
||||
exampleCodeTag: _switchCode,
|
||||
documentationUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html',
|
||||
),
|
||||
];
|
||||
|
||||
return TabbedComponentDemoScaffold(
|
||||
title: 'Selection controls',
|
||||
demos: demos,
|
||||
);
|
||||
}
|
||||
|
||||
bool checkboxValueA = true;
|
||||
bool checkboxValueB = false;
|
||||
bool checkboxValueC;
|
||||
int radioValue = 0;
|
||||
bool switchValue = false;
|
||||
|
||||
void handleRadioValueChanged(int value) {
|
||||
setState(() {
|
||||
@@ -26,23 +79,12 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return wrapScaffold('Selection Controls', context, _scaffoldKey,
|
||||
_buildContents(), SelectionControlsDemo.routeName);
|
||||
}
|
||||
|
||||
Widget _buildContents() {
|
||||
return Material(
|
||||
color: Colors.white,
|
||||
child: new Column(
|
||||
children: <Widget>[buildCheckbox(), Divider(), buildRadio()]));
|
||||
}
|
||||
|
||||
Widget buildCheckbox() {
|
||||
return Align(
|
||||
alignment: const Alignment(0.0, -0.2),
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
|
||||
alignment: const Alignment(0.0, -0.2),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
@@ -73,39 +115,91 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(mainAxisSize: MainAxisSize.min, children: const <Widget>[
|
||||
// Disabled checkboxes
|
||||
Checkbox(value: true, onChanged: null),
|
||||
Checkbox(value: false, onChanged: null),
|
||||
Checkbox(value: null, tristate: true, onChanged: null),
|
||||
])
|
||||
]));
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: const <Widget>[
|
||||
// Disabled checkboxes
|
||||
Checkbox(value: true, onChanged: null),
|
||||
Checkbox(value: false, onChanged: null),
|
||||
Checkbox(value: null, tristate: true, onChanged: null),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildRadio() {
|
||||
return Align(
|
||||
alignment: const Alignment(0.0, -0.2),
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
|
||||
Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
|
||||
Radio<int>(
|
||||
alignment: const Alignment(0.0, -0.2),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Radio<int>(
|
||||
value: 0,
|
||||
groupValue: radioValue,
|
||||
onChanged: handleRadioValueChanged),
|
||||
Radio<int>(
|
||||
onChanged: handleRadioValueChanged,
|
||||
),
|
||||
Radio<int>(
|
||||
value: 1,
|
||||
groupValue: radioValue,
|
||||
onChanged: handleRadioValueChanged),
|
||||
Radio<int>(
|
||||
onChanged: handleRadioValueChanged,
|
||||
),
|
||||
Radio<int>(
|
||||
value: 2,
|
||||
groupValue: radioValue,
|
||||
onChanged: handleRadioValueChanged)
|
||||
]),
|
||||
onChanged: handleRadioValueChanged,
|
||||
),
|
||||
],
|
||||
),
|
||||
// Disabled radio buttons
|
||||
Row(mainAxisSize: MainAxisSize.min, children: const <Widget>[
|
||||
Radio<int>(value: 0, groupValue: 0, onChanged: null),
|
||||
Radio<int>(value: 1, groupValue: 0, onChanged: null),
|
||||
Radio<int>(value: 2, groupValue: 0, onChanged: null)
|
||||
])
|
||||
]));
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: const <Widget>[
|
||||
Radio<int>(
|
||||
value: 0,
|
||||
groupValue: 0,
|
||||
onChanged: null,
|
||||
),
|
||||
Radio<int>(
|
||||
value: 1,
|
||||
groupValue: 0,
|
||||
onChanged: null,
|
||||
),
|
||||
Radio<int>(
|
||||
value: 2,
|
||||
groupValue: 0,
|
||||
onChanged: null,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildSwitch() {
|
||||
return Align(
|
||||
alignment: const Alignment(0.0, -0.2),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Switch.adaptive(
|
||||
value: switchValue,
|
||||
onChanged: (bool value) {
|
||||
setState(() {
|
||||
switchValue = value;
|
||||
});
|
||||
},
|
||||
),
|
||||
// Disabled switches
|
||||
const Switch.adaptive(value: true, onChanged: null),
|
||||
const Switch.adaptive(value: false, onChanged: null),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user