Skip to content

F
Front-End
Commit 69311c28 authored by Adam Barth's avatar Adam Barth
Browse files
Options

Improve date picker fidelity (#4023) 

This patch updates the date picker to match the new spec.

We're still missing a fade effect when scrolling from one month to
another and we're missing the landscape layout.

Fixes #3558
parent ef563c48
Hide whitespace changes
Inline Side-by-side
Showing with 290 additions and 114 deletions
packages/flutter/lib/src/material/date_picker.dart
View file @ 69311c28
......@@ -11,6 +11,8 @@ import 'package:intl/intl.dart';
import 'colors.dart';
import 'debug.dart';
import 'icons.dart';
import 'icon_button.dart';
import 'ink_well.dart';
import 'theme.dart';
import 'typography.dart';
......@@ -88,8 +90,6 @@ class _DatePickerState extends State<DatePicker> {
config.onChanged(dateTime);
}
static const double _calendarHeight = _kMaxDayPickerHeight;
@override
Widget build(BuildContext context) {
Widget header = new _DatePickerHeader(
......@@ -104,8 +104,7 @@ class _DatePickerState extends State<DatePicker> {
selectedDate: config.selectedDate,
onChanged: _handleDayChanged,
firstDate: config.firstDate,
lastDate: config.lastDate,
itemExtent: _calendarHeight
lastDate: config.lastDate
);
break;
case _DatePickerMode.year:
......@@ -122,7 +121,7 @@ class _DatePickerState extends State<DatePicker> {
children: <Widget>[
header,
new Container(
height: _calendarHeight,
height: _kMaxDayPickerHeight,
child: picker
)
]
......@@ -154,11 +153,11 @@ class _DatePickerHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
TextTheme headerTheme = theme.primaryTextTheme;
ThemeData themeData = Theme.of(context);
TextTheme headerTextTheme = themeData.primaryTextTheme;
Color dayColor;
Color yearColor;
switch(theme.primaryColorBrightness) {
switch(themeData.primaryColorBrightness) {
case ThemeBrightness.light:
dayColor = mode == _DatePickerMode.day ? Colors.black87 : Colors.black54;
yearColor = mode == _DatePickerMode.year ? Colors.black87 : Colors.black54;
......@@ -168,34 +167,43 @@ class _DatePickerHeader extends StatelessWidget {
yearColor = mode == _DatePickerMode.year ? Colors.white : Colors.white70;
break;
}
TextStyle dayStyle = headerTheme.display3.copyWith(color: dayColor, height: 1.0, fontSize: 100.0);
TextStyle monthStyle = headerTheme.headline.copyWith(color: dayColor, height: 1.0);
TextStyle yearStyle = headerTheme.headline.copyWith(color: yearColor, height: 1.0);
TextStyle dayStyle = headerTextTheme.display1.copyWith(color: dayColor, height: 1.4);
TextStyle yearStyle = headerTextTheme.subhead.copyWith(color: yearColor, height: 1.4);
Color backgroundColor;
switch (themeData.brightness) {
case ThemeBrightness.light:
backgroundColor = themeData.primaryColor;
break;
case ThemeBrightness.dark:
backgroundColor = themeData.backgroundColor;
break;
}
return new Container(
padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(backgroundColor: theme.primaryColor),
height: 100.0,
padding: const EdgeInsets.symmetric(horizontal: 24.0),
decoration: new BoxDecoration(backgroundColor: backgroundColor),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new GestureDetector(
onTap: () => _handleChangeMode(_DatePickerMode.day),
child: new Text(new DateFormat('MMM').format(selectedDate).toUpperCase(), style: monthStyle)
onTap: () => _handleChangeMode(_DatePickerMode.year),
child: new Text(new DateFormat('yyyy').format(selectedDate), style: yearStyle)
),
new GestureDetector(
onTap: () => _handleChangeMode(_DatePickerMode.day),
child: new Text(new DateFormat('d').format(selectedDate), style: dayStyle)
child: new Text(new DateFormat('MMMEd').format(selectedDate), style: dayStyle)
),
new GestureDetector(
onTap: () => _handleChangeMode(_DatePickerMode.year),
child: new Text(new DateFormat('yyyy').format(selectedDate), style: yearStyle)
)
]
)
);
}
}
const double _kDayPickerRowHeight = 30.0;
const Duration _kMonthScrollDuration = const Duration(milliseconds: 200);
const double _kDayPickerRowHeight = 42.0;
const int _kMaxDayPickerRowCount = 6; // A 31 day month that starts on Saturday.
// Two extra rows: one for the day-of-week header and one for the month header.
const double _kMaxDayPickerHeight = _kDayPickerRowHeight * (_kMaxDayPickerRowCount + 2);
......@@ -269,10 +277,6 @@ class DayPicker extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
final TextStyle headerStyle = themeData.textTheme.caption.copyWith(fontWeight: FontWeight.w700);
final TextStyle monthStyle = headerStyle.copyWith(fontSize: 14.0, height: 24.0 / 14.0);
final TextStyle dayStyle = headerStyle.copyWith(fontWeight: FontWeight.w500);
final int year = displayedMonth.year;
final int month = displayedMonth.month;
// Dart's Date time constructor is very forgiving and will understand
......@@ -281,7 +285,7 @@ class DayPicker extends StatelessWidget {
// This assumes a start day of SUNDAY, but could be changed.
final int firstWeekday = new DateTime(year, month).weekday % 7;
final List<Widget> labels = <Widget>[];
labels.addAll(_getDayHeaders(headerStyle));
labels.addAll(_getDayHeaders(themeData.textTheme.caption));
for (int i = 0; true; ++i) {
final int day = i - firstWeekday + 1;
if (day > daysInMonth)
......@@ -290,13 +294,12 @@ class DayPicker extends StatelessWidget {
labels.add(new Container());
} else {
BoxDecoration decoration;
TextStyle itemStyle = dayStyle;
TextStyle itemStyle = themeData.textTheme.body1;
if (selectedDate.year == year && selectedDate.month == month && selectedDate.day == day) {
// The selected day gets a circle background highlight, and a contrasting text color.
final ThemeData theme = Theme.of(context);
itemStyle = itemStyle.copyWith(
color: (theme.brightness == ThemeBrightness.light) ? Colors.white : Colors.black87
itemStyle = themeData.textTheme.body2.copyWith(
color: (themeData.brightness == ThemeBrightness.light) ? Colors.white : Colors.black87
);
decoration = new BoxDecoration(
backgroundColor: themeData.accentColor,
......@@ -304,7 +307,7 @@ class DayPicker extends StatelessWidget {
);
} else if (currentDate.year == year && currentDate.month == month && currentDate.day == day) {
// The current day gets a different text color.
itemStyle = itemStyle.copyWith(color: themeData.accentColor);
itemStyle = themeData.textTheme.body2.copyWith(color: themeData.accentColor);
}
labels.add(new GestureDetector(
......@@ -323,15 +326,24 @@ class DayPicker extends StatelessWidget {
}
}
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text(new DateFormat('MMMM y').format(displayedMonth), style: monthStyle),
new CustomGrid(
delegate: _kDayPickerGridDelegate,
children: labels
)
]
return new Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: new Column(
children: <Widget>[
new Container(
height: _kDayPickerRowHeight,
child: new Center(
child: new Text(new DateFormat('yMMMM').format(displayedMonth),
style: themeData.textTheme.subhead
)
)
),
new CustomGrid(
delegate: _kDayPickerGridDelegate,
children: labels
)
]
)
);
}
}
......@@ -356,8 +368,7 @@ class MonthPicker extends StatefulWidget {
this.selectedDate,
this.onChanged,
this.firstDate,
this.lastDate,
this.itemExtent
this.lastDate
}) : super(key: key) {
assert(selectedDate != null);
assert(onChanged != null);
......@@ -379,9 +390,6 @@ class MonthPicker extends StatefulWidget {
/// The latest date the user is permitted to pick.
final DateTime lastDate;
/// The amount of vertical space to use for each month in the picker.
final double itemExtent;
@override
_MonthPickerState createState() => new _MonthPickerState();
}
......@@ -393,8 +401,15 @@ class _MonthPickerState extends State<MonthPicker> {
_updateCurrentDate();
}
@override
void didUpdateConfig(MonthPicker oldConfig) {
if (config.selectedDate != oldConfig.selectedDate)
_dayPickerListKey = new GlobalKey<ScrollableState>();
}
DateTime _currentDate;
Timer _timer;
GlobalKey<ScrollableState> _dayPickerListKey = new GlobalKey<ScrollableState>();
void _updateCurrentDate() {
_currentDate = new DateTime.now();
......@@ -420,7 +435,7 @@ class _MonthPickerState extends State<MonthPicker> {
for (int i = 0; i < count; ++i) {
DateTime displayedMonth = new DateTime(startDate.year + i ~/ 12, startDate.month + i % 12);
result.add(new DayPicker(
key: new ObjectKey(displayedMonth),
key: new ValueKey<DateTime>(displayedMonth),
selectedDate: config.selectedDate,
currentDate: _currentDate,
onChanged: config.onChanged,
......@@ -430,14 +445,46 @@ class _MonthPickerState extends State<MonthPicker> {
return result;
}
void _handleNextMonth() {
ScrollableState state = _dayPickerListKey.currentState;
state?.scrollTo(state.scrollOffset.round() + 1.0, duration: _kMonthScrollDuration);
}
void _handlePreviousMonth() {
ScrollableState state = _dayPickerListKey.currentState;
state?.scrollTo(state.scrollOffset.round() - 1.0, duration: _kMonthScrollDuration);
}
@override
Widget build(BuildContext context) {
return new ScrollableLazyList(
key: new ValueKey<DateTime>(config.selectedDate),
initialScrollOffset: config.itemExtent * _monthDelta(config.firstDate, config.selectedDate),
itemExtent: config.itemExtent,
itemCount: _monthDelta(config.firstDate, config.lastDate) + 1,
itemBuilder: _buildItems
return new Stack(
children: <Widget>[
new PageableLazyList(
key: _dayPickerListKey,
initialScrollOffset: _monthDelta(config.firstDate, config.selectedDate).toDouble(),
scrollDirection: Axis.horizontal,
itemCount: _monthDelta(config.firstDate, config.lastDate) + 1,
itemBuilder: _buildItems
),
new Positioned(
top: 0.0,
left: 8.0,
child: new IconButton(
icon: Icons.chevron_left,
tooltip: 'Previous month',
onPressed: _handlePreviousMonth
)
),
new Positioned(
top: 0.0,
right: 8.0,
child: new IconButton(
icon: Icons.chevron_right,
tooltip: 'Next month',
onPressed: _handleNextMonth
)
)
]
);
}
......@@ -500,29 +547,22 @@ class _YearPickerState extends State<YearPicker> {
static const double _itemExtent = 50.0;
List<Widget> _buildItems(BuildContext context, int start, int count) {
TextStyle style = Theme.of(context).textTheme.body1.copyWith(color: Colors.black54);
List<Widget> items = new List<Widget>();
final ThemeData themeData = Theme.of(context);
final TextStyle style = themeData.textTheme.body1;
final List<Widget> items = new List<Widget>();
for (int i = start; i < start + count; i++) {
int year = config.firstDate.year + i;
String label = year.toString();
Widget item = new InkWell(
key: new Key(label),
final int year = config.firstDate.year + i;
final TextStyle itemStyle = year == config.selectedDate.year ?
themeData.textTheme.headline.copyWith(color: themeData.accentColor) : style;
items.add(new InkWell(
key: new ValueKey<int>(year),
onTap: () {
DateTime result = new DateTime(year, config.selectedDate.month, config.selectedDate.day);
config.onChanged(result);
config.onChanged(new DateTime(year, config.selectedDate.month, config.selectedDate.day));
},
child: new Container(
height: _itemExtent,
decoration: year == config.selectedDate.year ? new BoxDecoration(
backgroundColor: Theme.of(context).backgroundColor,
shape: BoxShape.circle
) : null,
child: new Center(
child: new Text(label, style: style)
)
child: new Center(
child: new Text(year.toString(), style: itemStyle)
)
);
items.add(item);
));
}
return items;
}
......
packages/flutter/lib/src/widgets/pageable_list.dart
View file @ 69311c28
......@@ -18,12 +18,8 @@ enum PageableListFlingBehavior {
stopAtNextPage
}
/// Scrollable widget that scrolls one "page" at a time.
///
/// In a pageable list, one child is visible at a time. Scrolling the list
/// reveals either the next or previous child.
class PageableList extends Scrollable {
PageableList({
abstract class PageableListBase extends Scrollable {
PageableListBase({
Key key,
double initialScrollOffset,
Axis scrollDirection: Axis.vertical,
......@@ -36,8 +32,7 @@ class PageableList extends Scrollable {
this.itemsSnapAlignment: PageableListFlingBehavior.stopAtNextPage,
this.onPageChanged,
this.duration: const Duration(milliseconds: 200),
this.curve: Curves.ease,
this.children
this.curve: Curves.ease
}) : super(
key: key,
initialScrollOffset: initialScrollOffset,
......@@ -66,19 +61,102 @@ class PageableList extends Scrollable {
/// The animation curve to use when animating to a given page.
final Curve curve;
int get _itemCount;
}
/// Scrollable widget that scrolls one "page" at a time.
///
/// In a pageable list, one child is visible at a time. Scrolling the list
/// reveals either the next or previous child.
class PageableList extends PageableListBase {
PageableList({
Key key,
double initialScrollOffset,
Axis scrollDirection: Axis.vertical,
ViewportAnchor scrollAnchor: ViewportAnchor.start,
ScrollListener onScrollStart,
ScrollListener onScroll,
ScrollListener onScrollEnd,
SnapOffsetCallback snapOffsetCallback,
bool itemsWrap: false,
PageableListFlingBehavior itemsSnapAlignment: PageableListFlingBehavior.stopAtNextPage,
ValueChanged<int> onPageChanged,
Duration duration: const Duration(milliseconds: 200),
Curve curve: Curves.ease,
this.children
}) : super(
key: key,
initialScrollOffset: initialScrollOffset,
scrollDirection: scrollDirection,
scrollAnchor: scrollAnchor,
onScrollStart: onScrollStart,
onScroll: onScroll,
onScrollEnd: onScrollEnd,
snapOffsetCallback: snapOffsetCallback,
itemsWrap: itemsWrap,
itemsSnapAlignment: itemsSnapAlignment,
onPageChanged: onPageChanged,
duration: duration,
curve: curve
);
/// The list of pages themselves.
final Iterable<Widget> children;
@override
int get _itemCount => children?.length ?? 0;
@override
PageableListState<PageableList> createState() => new PageableListState<PageableList>();
}
/// State for a [PageableList] widget.
///
/// Widgets that subclass [PageableList] can subclass this class to have
/// sensible default behaviors for pageable lists.
class PageableListState<T extends PageableList> extends ScrollableState<T> {
int get _itemCount => config.children?.length ?? 0;
class PageableLazyList extends PageableListBase {
PageableLazyList({
Key key,
double initialScrollOffset,
Axis scrollDirection: Axis.vertical,
ViewportAnchor scrollAnchor: ViewportAnchor.start,
ScrollListener onScrollStart,
ScrollListener onScroll,
ScrollListener onScrollEnd,
SnapOffsetCallback snapOffsetCallback,
PageableListFlingBehavior itemsSnapAlignment: PageableListFlingBehavior.stopAtNextPage,
ValueChanged<int> onPageChanged,
Duration duration: const Duration(milliseconds: 200),
Curve curve: Curves.ease,
this.itemCount,
this.itemBuilder
}) : super(
key: key,
initialScrollOffset: initialScrollOffset,
scrollDirection: scrollDirection,
scrollAnchor: scrollAnchor,
onScrollStart: onScrollStart,
onScroll: onScroll,
onScrollEnd: onScrollEnd,
snapOffsetCallback: snapOffsetCallback,
itemsWrap: false,
itemsSnapAlignment: itemsSnapAlignment,
onPageChanged: onPageChanged,
duration: duration,
curve: curve
);
/// The total number of list items.
final int itemCount;
/// A function that returns the pages themselves.
final ItemListBuilder itemBuilder;
@override
int get _itemCount => itemCount ?? 0;
@override
_PageableLazyListState createState() => new _PageableLazyListState();
}
abstract class _PageableListStateBase<T extends PageableListBase> extends ScrollableState<T> {
int get _itemCount => config._itemCount;
int _previousItemCount;
double get _pixelsPerScrollUnit {
......@@ -124,7 +202,7 @@ class PageableListState<T extends PageableList> extends ScrollableState<T> {
}
@override
void didUpdateConfig(PageableList oldConfig) {
void didUpdateConfig(PageableListBase oldConfig) {
super.didUpdateConfig(oldConfig);
bool scrollBehaviorUpdateNeeded = config.scrollDirection != oldConfig.scrollDirection;
......@@ -149,17 +227,6 @@ class PageableListState<T extends PageableList> extends ScrollableState<T> {
));
}
@override
Widget buildContent(BuildContext context) {
return new PageViewport(
itemsWrap: config.itemsWrap,
mainAxis: config.scrollDirection,
anchor: config.scrollAnchor,
startOffset: scrollOffset,
children: config.children
);
}
UnboundedBehavior _unboundedBehavior;
OverscrollBehavior _overscrollBehavior;
......@@ -216,15 +283,44 @@ class PageableListState<T extends PageableList> extends ScrollableState<T> {
}
}
class PageViewport extends VirtualViewportFromIterable {
PageViewport({
this.startOffset: 0.0,
this.mainAxis: Axis.vertical,
this.anchor: ViewportAnchor.start,
this.itemsWrap: false,
this.overlayPainter,
this.children
}) {
/// State for a [PageableList] widget.
///
/// Widgets that subclass [PageableList] can subclass this class to have
/// sensible default behaviors for pageable lists.
class PageableListState<T extends PageableList> extends _PageableListStateBase<T> {
@override
Widget buildContent(BuildContext context) {
return new PageViewport(
itemsWrap: config.itemsWrap,
mainAxis: config.scrollDirection,
anchor: config.scrollAnchor,
startOffset: scrollOffset,
children: config.children
);
}
}
class _PageableLazyListState extends _PageableListStateBase<PageableLazyList> {
@override
Widget buildContent(BuildContext context) {
return new LazyPageViewport(
mainAxis: config.scrollDirection,
anchor: config.scrollAnchor,
startOffset: scrollOffset,
itemCount: config.itemCount,
itemBuilder: config.itemBuilder
);
}
}
class _VirtualPageViewport extends VirtualViewport {
_VirtualPageViewport(
this.startOffset,
this.mainAxis,
this.anchor,
this.itemsWrap,
this.overlayPainter
) {
assert(mainAxis != null);
}
......@@ -236,21 +332,18 @@ class PageViewport extends VirtualViewportFromIterable {
final bool itemsWrap;
final RenderObjectPainter overlayPainter;
@override
final Iterable<Widget> children;
@override
RenderList createRenderObject(BuildContext context) => new RenderList();
@override
_PageViewportElement createElement() => new _PageViewportElement(this);
_VirtualPageViewportElement createElement() => new _VirtualPageViewportElement(this);
}
class _PageViewportElement extends VirtualViewportElement {
_PageViewportElement(PageViewport widget) : super(widget);
class _VirtualPageViewportElement extends VirtualViewportElement {
_VirtualPageViewportElement(_VirtualPageViewport widget) : super(widget);
@override
PageViewport get widget => super.widget;
_VirtualPageViewport get widget => super.widget;
@override
RenderList get renderObject => super.renderObject;
......@@ -279,7 +372,7 @@ class _PageViewportElement extends VirtualViewportElement {
}
@override
void updateRenderObject(PageViewport oldWidget) {
void updateRenderObject(_VirtualPageViewport oldWidget) {
renderObject
..mainAxis = widget.mainAxis
..overlayPainter = widget.overlayPainter;
......@@ -342,3 +435,46 @@ class _PageViewportElement extends VirtualViewportElement {
super.layout(constraints);
}
}
class PageViewport extends _VirtualPageViewport with VirtualViewportFromIterable {
PageViewport({
double startOffset: 0.0,
Axis mainAxis: Axis.vertical,
ViewportAnchor anchor: ViewportAnchor.start,
bool itemsWrap: false,
RenderObjectPainter overlayPainter,
this.children
}) : super(
startOffset,
mainAxis,
anchor,
itemsWrap,
overlayPainter
);
@override
final Iterable<Widget> children;
}
class LazyPageViewport extends _VirtualPageViewport with VirtualViewportFromBuilder {
LazyPageViewport({
double startOffset: 0.0,
Axis mainAxis: Axis.vertical,
ViewportAnchor anchor: ViewportAnchor.start,
RenderObjectPainter overlayPainter,
this.itemCount,
this.itemBuilder
}) : super(
startOffset,
mainAxis,
anchor,
false, // Don't support wrapping yet.
overlayPainter
);
@override
final int itemCount;
@override
final ItemListBuilder itemBuilder;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab