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
275
web/gallery/lib/demo/cupertino/cupertino_picker_demo.dart
Normal file
275
web/gallery/lib/demo/cupertino/cupertino_picker_demo.dart
Normal file
@@ -0,0 +1,275 @@
|
||||
// Copyright 2017 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/cupertino.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
import '../../gallery/demo.dart';
|
||||
import 'cupertino_navigation_demo.dart' show coolColorNames;
|
||||
|
||||
const double _kPickerSheetHeight = 216.0;
|
||||
const double _kPickerItemHeight = 32.0;
|
||||
|
||||
class CupertinoPickerDemo extends StatefulWidget {
|
||||
static const String routeName = '/cupertino/picker';
|
||||
|
||||
@override
|
||||
_CupertinoPickerDemoState createState() => _CupertinoPickerDemoState();
|
||||
}
|
||||
|
||||
class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
|
||||
int _selectedColorIndex = 0;
|
||||
|
||||
Duration timer = const Duration();
|
||||
|
||||
// Value that is shown in the date picker in date mode.
|
||||
DateTime date = DateTime.now();
|
||||
|
||||
// Value that is shown in the date picker in time mode.
|
||||
DateTime time = DateTime.now();
|
||||
|
||||
// Value that is shown in the date picker in dateAndTime mode.
|
||||
DateTime dateTime = DateTime.now();
|
||||
|
||||
Widget _buildMenu(List<Widget> children) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
|
||||
border: const Border(
|
||||
top: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
|
||||
bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
|
||||
),
|
||||
),
|
||||
height: 44.0,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
bottom: false,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: children,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBottomPicker(Widget picker) {
|
||||
return Container(
|
||||
height: _kPickerSheetHeight,
|
||||
padding: const EdgeInsets.only(top: 6.0),
|
||||
color: CupertinoColors.white,
|
||||
child: DefaultTextStyle(
|
||||
style: const TextStyle(
|
||||
color: CupertinoColors.black,
|
||||
fontSize: 22.0,
|
||||
),
|
||||
child: GestureDetector(
|
||||
// Blocks taps from propagating to the modal sheet and popping.
|
||||
onTap: () { },
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: picker,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildColorPicker(BuildContext context) {
|
||||
final FixedExtentScrollController scrollController =
|
||||
FixedExtentScrollController(initialItem: _selectedColorIndex);
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () async {
|
||||
await showCupertinoModalPopup<void>(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return _buildBottomPicker(
|
||||
CupertinoPicker(
|
||||
scrollController: scrollController,
|
||||
itemExtent: _kPickerItemHeight,
|
||||
backgroundColor: CupertinoColors.white,
|
||||
onSelectedItemChanged: (int index) {
|
||||
setState(() => _selectedColorIndex = index);
|
||||
},
|
||||
children: List<Widget>.generate(coolColorNames.length, (int index) {
|
||||
return Center(
|
||||
child: Text(coolColorNames[index]),
|
||||
);
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
child: _buildMenu(
|
||||
<Widget>[
|
||||
const Text('Favorite Color'),
|
||||
Text(
|
||||
coolColorNames[_selectedColorIndex],
|
||||
style: const TextStyle(
|
||||
color: CupertinoColors.inactiveGray
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCountdownTimerPicker(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
showCupertinoModalPopup<void>(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return _buildBottomPicker(
|
||||
CupertinoTimerPicker(
|
||||
initialTimerDuration: timer,
|
||||
onTimerDurationChanged: (Duration newTimer) {
|
||||
setState(() => timer = newTimer);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
child: _buildMenu(
|
||||
<Widget>[
|
||||
const Text('Countdown Timer'),
|
||||
Text(
|
||||
'${timer.inHours}:'
|
||||
'${(timer.inMinutes % 60).toString().padLeft(2,'0')}:'
|
||||
'${(timer.inSeconds % 60).toString().padLeft(2,'0')}',
|
||||
style: const TextStyle(color: CupertinoColors.inactiveGray),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDatePicker(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
showCupertinoModalPopup<void>(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return _buildBottomPicker(
|
||||
CupertinoDatePicker(
|
||||
mode: CupertinoDatePickerMode.date,
|
||||
initialDateTime: date,
|
||||
onDateTimeChanged: (DateTime newDateTime) {
|
||||
setState(() => date = newDateTime);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
child: _buildMenu(
|
||||
<Widget>[
|
||||
const Text('Date'),
|
||||
Text(
|
||||
DateFormat.yMMMMd().format(date),
|
||||
style: const TextStyle(color: CupertinoColors.inactiveGray),
|
||||
),
|
||||
]
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTimePicker(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
showCupertinoModalPopup<void>(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return _buildBottomPicker(
|
||||
CupertinoDatePicker(
|
||||
mode: CupertinoDatePickerMode.time,
|
||||
initialDateTime: time,
|
||||
onDateTimeChanged: (DateTime newDateTime) {
|
||||
setState(() => time = newDateTime);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
child: _buildMenu(
|
||||
<Widget>[
|
||||
const Text('Time'),
|
||||
Text(
|
||||
DateFormat.jm().format(time),
|
||||
style: const TextStyle(color: CupertinoColors.inactiveGray),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDateAndTimePicker(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
showCupertinoModalPopup<void>(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return _buildBottomPicker(
|
||||
CupertinoDatePicker(
|
||||
mode: CupertinoDatePickerMode.dateAndTime,
|
||||
initialDateTime: dateTime,
|
||||
onDateTimeChanged: (DateTime newDateTime) {
|
||||
setState(() => dateTime = newDateTime);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
child: _buildMenu(
|
||||
<Widget>[
|
||||
const Text('Date and Time'),
|
||||
Text(
|
||||
DateFormat.yMMMd().add_jm().format(dateTime),
|
||||
style: const TextStyle(color: CupertinoColors.inactiveGray),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
navigationBar: CupertinoNavigationBar(
|
||||
middle: const Text('Picker'),
|
||||
// We're specifying a back label here because the previous page is a
|
||||
// Material page. CupertinoPageRoutes could auto-populate these back
|
||||
// labels.
|
||||
previousPageTitle: 'Cupertino',
|
||||
trailing: CupertinoDemoDocumentationButton(CupertinoPickerDemo.routeName),
|
||||
),
|
||||
child: DefaultTextStyle(
|
||||
style: CupertinoTheme.of(context).textTheme.textStyle,
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: CupertinoTheme.of(context).brightness == Brightness.light
|
||||
? CupertinoColors.extraLightBackgroundGray
|
||||
: CupertinoColors.darkBackgroundGray,
|
||||
),
|
||||
child: ListView(
|
||||
children: <Widget>[
|
||||
const Padding(padding: EdgeInsets.only(top: 32.0)),
|
||||
_buildColorPicker(context),
|
||||
_buildCountdownTimerPicker(context),
|
||||
_buildDatePicker(context),
|
||||
_buildTimePicker(context),
|
||||
_buildDateAndTimePicker(context),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user