Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 22:09:06 +00:00
Code Issues Releases Wiki Activity

[Gallery] Implement cupertino pickers demo (#251)

Browse Source
This commit is contained in:
rami-a
2020-01-23 18:32:00 +00:00
committed by GitHub
parent 2da59e988a
commit a89c9a4747
7 changed files with 1593 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1218
gallery/gallery/lib/codeviewer/code_segments.dart
View File

File diff suppressed because it is too large Load Diff

16
gallery/gallery/lib/data/demos.dart
View File

@@ -12,6 +12,7 @@ import 'package:gallery/demos/cupertino/cupertino_activity_indicator_demo.dart';
import 'package:gallery/demos/cupertino/cupertino_alert_demo.dart';
import 'package:gallery/demos/cupertino/cupertino_button_demo.dart';
import 'package:gallery/demos/cupertino/cupertino_navigation_bar_demo.dart';
import 'package:gallery/demos/cupertino/cupertino_picker_demo.dart';
import 'package:gallery/demos/cupertino/cupertino_refresh_demo.dart';
import 'package:gallery/demos/cupertino/cupertino_segmented_control_demo.dart';
import 'package:gallery/demos/cupertino/cupertino_slider_demo.dart';
@@ -651,6 +652,21 @@ List<GalleryDemo> cupertinoDemos(BuildContext context) {
),
],
),
GalleryDemo(
title: localizations.demoCupertinoPickerTitle,
icon: GalleryIcons.event,
subtitle: localizations.demoCupertinoPickerSubtitle,
configurations: [
GalleryDemoConfiguration(
title: localizations.demoCupertinoPickerTitle,
description: localizations.demoCupertinoPickerDescription,
documentationUrl:
'$_docsBaseUrl/cupertino/CupertinoDatePicker-class.html',
buildRoute: (_) => CupertinoPickerDemo(),
code: CodeSegments.cupertinoPickersDemo,
),
],
),
GalleryDemo(
title: localizations.demoCupertinoPullToRefreshTitle,
icon: GalleryIcons.cupertinoPullToRefresh,

241
gallery/gallery/lib/demos/cupertino/cupertino_picker_demo.dart Normal file
View File

@@ -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

50
gallery/gallery/lib/l10n/gallery_localizations.dart
View File

@@ -1866,6 +1866,56 @@ class GalleryLocalizations {
desc: r'Title for the cupertino navigation bar component demo.');
}
String get demoCupertinoPickerDate {
return Intl.message('Date',
locale: _localeName,
name: 'demoCupertinoPickerDate',
desc: r'Label to open a date picker.');
}
String get demoCupertinoPickerDateTime {
return Intl.message('Date and Time',
locale: _localeName,
name: 'demoCupertinoPickerDateTime',
desc: r'Label to open a date and time picker.');
}
String get demoCupertinoPickerDescription {
return Intl.message(
'An iOS-style picker widget that can be used to select dates, times, or both date and time.',
locale: _localeName,
name: 'demoCupertinoPickerDescription',
desc: r'Description for the cupertino pickers component demo.');
}
String get demoCupertinoPickerSubtitle {
return Intl.message('iOS-style date and time pickers',
locale: _localeName,
name: 'demoCupertinoPickerSubtitle',
desc: r'Subtitle for the cupertino pickers component demo.');
}
String get demoCupertinoPickerTime {
return Intl.message('Time',
locale: _localeName,
name: 'demoCupertinoPickerTime',
desc: r'Label to open a time picker.');
}
String get demoCupertinoPickerTimer {
return Intl.message('Timer',
locale: _localeName,
name: 'demoCupertinoPickerTimer',
desc: r'Label to open a countdown timer picker.');
}
String get demoCupertinoPickerTitle {
return Intl.message('Pickers',
locale: _localeName,
name: 'demoCupertinoPickerTitle',
desc: r'Title for the cupertino date and time pickers component demo.');
}
String get demoCupertinoPullToRefreshDescription {
return Intl.message(
'A widget implementing the iOS-style pull to refresh content control.',

28
gallery/gallery/lib/l10n/intl_en_US.arb
View File

@@ -1001,6 +1001,34 @@
"@demoCupertinoNavigationBarDescription": {
"description": "Description for the cupertino navigation bar component demo."
},
"demoCupertinoPickerTitle": "Pickers",
"@demoCupertinoPickerTitle": {
"description": "Title for the cupertino date and time pickers component demo."
},
"demoCupertinoPickerSubtitle": "iOS-style date and time pickers",
"@demoCupertinoPickerSubtitle": {
"description": "Subtitle for the cupertino pickers component demo."
},
"demoCupertinoPickerDescription": "An iOS-style picker widget that can be used to select dates, times, or both date and time.",
"@demoCupertinoPickerDescription": {
"description": "Description for the cupertino pickers component demo."
},
"demoCupertinoPickerTimer": "Timer",
"@demoCupertinoPickerTimer": {
"description": "Label to open a countdown timer picker."
},
"demoCupertinoPickerDate": "Date",
"@demoCupertinoPickerDate": {
"description": "Label to open a date picker."
},
"demoCupertinoPickerTime": "Time",
"@demoCupertinoPickerTime": {
"description": "Label to open a time picker."
},
"demoCupertinoPickerDateTime": "Date and Time",
"@demoCupertinoPickerDateTime": {
"description": "Label to open a date and time picker."
},
"demoCupertinoPullToRefreshTitle": "Pull To Refresh",
"@demoCupertinoPullToRefreshTitle": {
"description": "Title for the cupertino pull-to-refresh component demo."

28
gallery/gallery/lib/l10n/intl_en_US.xml
View File

@@ -949,6 +949,34 @@
name="demoCupertinoNavigationBarDescription"
description="Description for the cupertino navigation bar component demo."
>An iOS-styled navigation bar. The navigation bar is a toolbar that minimally consists of a page title, in the middle of the toolbar.</string>
<string
name="demoCupertinoPickerTitle"
description="Title for the cupertino date and time pickers component demo."
>Pickers</string>
<string
name="demoCupertinoPickerSubtitle"
description="Subtitle for the cupertino pickers component demo."
>iOS-style date and time pickers</string>
<string
name="demoCupertinoPickerDescription"
description="Description for the cupertino pickers component demo."
>An iOS-style picker widget that can be used to select dates, times, or both date and time.</string>
<string
name="demoCupertinoPickerTimer"
description="Label to open a countdown timer picker."
>Timer</string>
<string
name="demoCupertinoPickerDate"
description="Label to open a date picker."
>Date</string>
<string
name="demoCupertinoPickerTime"
description="Label to open a time picker."
>Time</string>
<string
name="demoCupertinoPickerDateTime"
description="Label to open a date and time picker."
>Date and Time</string>
<string
name="demoCupertinoPullToRefreshTitle"
description="Title for the cupertino pull-to-refresh component demo."

12
gallery/gallery/lib/l10n/messages_en_US.dart
View File

@@ -491,6 +491,18 @@ class MessageLookup extends MessageLookupByLibrary {
MessageLookupByLibrary.simpleMessage("iOS-style navigation bar"),
"demoCupertinoNavigationBarTitle":
MessageLookupByLibrary.simpleMessage("Navigation Bar"),
"demoCupertinoPickerDate": MessageLookupByLibrary.simpleMessage("Date"),
"demoCupertinoPickerDateTime":
MessageLookupByLibrary.simpleMessage("Date and Time"),
"demoCupertinoPickerDescription": MessageLookupByLibrary.simpleMessage(
"An iOS-style picker widget that can be used to select dates, times, or both date and time."),
"demoCupertinoPickerSubtitle": MessageLookupByLibrary.simpleMessage(
"iOS-style date and time pickers"),
"demoCupertinoPickerTime": MessageLookupByLibrary.simpleMessage("Time"),
"demoCupertinoPickerTimer":
MessageLookupByLibrary.simpleMessage("Timer"),
"demoCupertinoPickerTitle":
MessageLookupByLibrary.simpleMessage("Pickers"),
"demoCupertinoPullToRefreshDescription":
MessageLookupByLibrary.simpleMessage(
"A widget implementing the iOS-style pull to refresh content control."),