mirror of https://github.com/flutter/samples.git
[Gallery] Implement cupertino pickers demo (#251)
rami-a
5 years ago
committed by
GitHub
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