mirror of https://github.com/flutter/samples.git
[Gallery] Implement cupertino pickers demo (#251)
parent
2da59e988a
commit
a89c9a4747
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,241 @@
|
|||||||
|
// Copyright 2019 The Flutter team. 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:gallery/l10n/gallery_localizations.dart';
|
||||||
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
|
// BEGIN cupertinoPickersDemo
|
||||||
|
|
||||||
|
class CupertinoPickerDemo extends StatefulWidget {
|
||||||
|
@override
|
||||||
|
_CupertinoPickerDemoState createState() => _CupertinoPickerDemoState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
|
||||||
|
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 _buildDatePicker(BuildContext context) {
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
showCupertinoModalPopup<void>(
|
||||||
|
context: context,
|
||||||
|
builder: (context) {
|
||||||
|
return _BottomPicker(
|
||||||
|
child: CupertinoDatePicker(
|
||||||
|
backgroundColor:
|
||||||
|
CupertinoColors.systemBackground.resolveFrom(context),
|
||||||
|
mode: CupertinoDatePickerMode.date,
|
||||||
|
initialDateTime: date,
|
||||||
|
onDateTimeChanged: (newDateTime) {
|
||||||
|
setState(() => date = newDateTime);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: _Menu(children: [
|
||||||
|
Text(GalleryLocalizations.of(context).demoCupertinoPickerDate),
|
||||||
|
Text(
|
||||||
|
DateFormat.yMMMMd().format(date),
|
||||||
|
style: TextStyle(color: CupertinoColors.inactiveGray),
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildTimePicker(BuildContext context) {
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
showCupertinoModalPopup<void>(
|
||||||
|
context: context,
|
||||||
|
builder: (context) {
|
||||||
|
return _BottomPicker(
|
||||||
|
child: CupertinoDatePicker(
|
||||||
|
backgroundColor:
|
||||||
|
CupertinoColors.systemBackground.resolveFrom(context),
|
||||||
|
mode: CupertinoDatePickerMode.time,
|
||||||
|
initialDateTime: time,
|
||||||
|
onDateTimeChanged: (newDateTime) {
|
||||||
|
setState(() => time = newDateTime);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: _Menu(
|
||||||
|
children: [
|
||||||
|
Text(GalleryLocalizations.of(context).demoCupertinoPickerTime),
|
||||||
|
Text(
|
||||||
|
DateFormat.jm().format(time),
|
||||||
|
style: TextStyle(color: CupertinoColors.inactiveGray),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildDateAndTimePicker(BuildContext context) {
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
showCupertinoModalPopup<void>(
|
||||||
|
context: context,
|
||||||
|
builder: (context) {
|
||||||
|
return _BottomPicker(
|
||||||
|
child: CupertinoDatePicker(
|
||||||
|
backgroundColor:
|
||||||
|
CupertinoColors.systemBackground.resolveFrom(context),
|
||||||
|
mode: CupertinoDatePickerMode.dateAndTime,
|
||||||
|
initialDateTime: dateTime,
|
||||||
|
onDateTimeChanged: (newDateTime) {
|
||||||
|
setState(() => dateTime = newDateTime);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: _Menu(
|
||||||
|
children: [
|
||||||
|
Text(GalleryLocalizations.of(context).demoCupertinoPickerDateTime),
|
||||||
|
Text(
|
||||||
|
DateFormat.yMMMd().add_jm().format(dateTime),
|
||||||
|
style: TextStyle(color: CupertinoColors.inactiveGray),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildCountdownTimerPicker(BuildContext context) {
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
showCupertinoModalPopup<void>(
|
||||||
|
context: context,
|
||||||
|
builder: (context) {
|
||||||
|
return _BottomPicker(
|
||||||
|
child: CupertinoTimerPicker(
|
||||||
|
backgroundColor:
|
||||||
|
CupertinoColors.systemBackground.resolveFrom(context),
|
||||||
|
initialTimerDuration: timer,
|
||||||
|
onTimerDurationChanged: (newTimer) {
|
||||||
|
setState(() => timer = newTimer);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: _Menu(
|
||||||
|
children: [
|
||||||
|
Text(GalleryLocalizations.of(context).demoCupertinoPickerTimer),
|
||||||
|
Text(
|
||||||
|
'${timer.inHours}:'
|
||||||
|
'${(timer.inMinutes % 60).toString().padLeft(2, '0')}:'
|
||||||
|
'${(timer.inSeconds % 60).toString().padLeft(2, '0')}',
|
||||||
|
style: TextStyle(color: CupertinoColors.inactiveGray),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return CupertinoPageScaffold(
|
||||||
|
navigationBar: CupertinoNavigationBar(
|
||||||
|
automaticallyImplyLeading: false,
|
||||||
|
middle: Text(GalleryLocalizations.of(context).demoCupertinoPickerTitle),
|
||||||
|
),
|
||||||
|
child: DefaultTextStyle(
|
||||||
|
style: CupertinoTheme.of(context).textTheme.textStyle,
|
||||||
|
child: ListView(
|
||||||
|
children: [
|
||||||
|
const SizedBox(height: 32),
|
||||||
|
_buildDatePicker(context),
|
||||||
|
_buildTimePicker(context),
|
||||||
|
_buildDateAndTimePicker(context),
|
||||||
|
_buildCountdownTimerPicker(context),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _BottomPicker extends StatelessWidget {
|
||||||
|
const _BottomPicker({
|
||||||
|
Key key,
|
||||||
|
@required this.child,
|
||||||
|
}) : assert(child != null),
|
||||||
|
super(key: key);
|
||||||
|
|
||||||
|
final Widget child;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
height: 216,
|
||||||
|
padding: const EdgeInsets.only(top: 6),
|
||||||
|
color: CupertinoColors.systemBackground.resolveFrom(context),
|
||||||
|
child: DefaultTextStyle(
|
||||||
|
style: TextStyle(
|
||||||
|
color: CupertinoColors.label.resolveFrom(context),
|
||||||
|
fontSize: 22,
|
||||||
|
),
|
||||||
|
child: GestureDetector(
|
||||||
|
// Blocks taps from propagating to the modal sheet and popping.
|
||||||
|
onTap: () {},
|
||||||
|
child: SafeArea(
|
||||||
|
top: false,
|
||||||
|
child: child,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _Menu extends StatelessWidget {
|
||||||
|
const _Menu({
|
||||||
|
Key key,
|
||||||
|
@required this.children,
|
||||||
|
}) : assert(children != null),
|
||||||
|
super(key: key);
|
||||||
|
|
||||||
|
final List<Widget> children;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: const Border(
|
||||||
|
top: BorderSide(color: CupertinoColors.inactiveGray, width: 0),
|
||||||
|
bottom: BorderSide(color: CupertinoColors.inactiveGray, width: 0),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
height: 44,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: children,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// END
|
Loading…
Reference in new issue