firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allows for the CupertinoPicker to have a non white background color (#24085)

Browse Source 
* fixes wheel gradient and adds test
This commit is contained in:
jslavitz 2018-11-09 15:58:21 -08:00 committed by GitHub
parent 26a6fd92d8
commit 6a8c393f4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 140 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/flutter/lib/src/cupertino/picker.dart
View File

@ -39,7 +39,8 @@ class CupertinoPicker extends StatefulWidget {
///
/// The [backgroundColor] defaults to light gray. It can be set to null to
/// disable the background painting entirely; this is mildly more efficient
/// than using [Colors.transparent].
/// than using [Colors.transparent]. Also, if it has transparency, no gradient
/// effect will be rendered.
///
/// The [looping] argument decides whether the child list loops and can be
/// scrolled infinitely. If set to true, scrolling past the end of the list
@ -121,6 +122,9 @@ class CupertinoPicker extends StatefulWidget {
///
/// This can be set to null to disable the background painting entirely; this
/// is mildly more efficient than using [Colors.transparent].
///
/// Any alpha value less 255 (fully opaque) will cause the removal of the
/// wheel list edge fade gradient from rendering of the widget.
final Color backgroundColor;
/// {@macro flutter.rendering.wheelList.offAxisFraction}
@ -202,24 +206,32 @@ class _CupertinoPickerState extends State<CupertinoPicker> {
}
}
/// Makes the fade to white edge gradients.
/// Makes the fade to [CupertinoPicker.backgroundColor] edge gradients.
Widget _buildGradientScreen() {
// Because BlendMode.dstOut doesn't work correctly with BoxDecoration we
// have to just do a color blend. And a due to the way we are layering
// the magnifier and the gradient on the background, using a transparent
// background color makes the picker look odd.
if (widget.backgroundColor != null && widget.backgroundColor.alpha < 255)
return Container();
final Color widgetBackgroundColor = widget.backgroundColor;
return Positioned.fill(
child: IgnorePointer(
child: Container(
decoration: const BoxDecoration(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFFFFFFFF),
Color(0xF2FFFFFF),
Color(0xDDFFFFFF),
Color(0x00FFFFFF),
Color(0x00FFFFFF),
Color(0xDDFFFFFF),
Color(0xF2FFFFFF),
Color(0xFFFFFFFF),
widgetBackgroundColor,
widgetBackgroundColor.withAlpha(0xF2),
widgetBackgroundColor.withAlpha(0xDD),
widgetBackgroundColor.withAlpha(0),
widgetBackgroundColor.withAlpha(0),
widgetBackgroundColor.withAlpha(0xDD),
widgetBackgroundColor.withAlpha(0xF2),
widgetBackgroundColor,
],
stops: <double>[
stops: const <double>[
0.0, 0.05, 0.09, 0.22, 0.78, 0.91, 0.95, 1.0,
],
begin: Alignment.topCenter,
@ -267,6 +279,34 @@ class _CupertinoPickerState extends State<CupertinoPicker> {
);
}
Widget _buildUnderMagnifierScreen() {
final Color foreground = widget.backgroundColor?.withAlpha(
(widget.backgroundColor.alpha * _kForegroundScreenOpacityFraction).toInt()
);
return Column(
children: <Widget>[
Expanded(child: Container()),
Container(
color: foreground,
constraints: BoxConstraints.expand(
height: widget.itemExtent * widget.magnification,
),
),
Expanded(child: Container()),
],
);
}
Widget _addBackgroundToChild(Widget child) {
return DecoratedBox(
decoration: BoxDecoration(
color: widget.backgroundColor,
),
child: child,
);
}
@override
Widget build(BuildContext context) {
Widget result = Stack(
@ -292,13 +332,17 @@ class _CupertinoPickerState extends State<CupertinoPicker> {
_buildMagnifierScreen(),
],
);
if (widget.backgroundColor != null) {
result = DecoratedBox(
decoration: BoxDecoration(
color: widget.backgroundColor,
),
child: result,
// Adds the appropriate opacity under the magnifier if the background
// color is transparent.
if (widget.backgroundColor != null && widget.backgroundColor.alpha < 255) {
result = Stack(
children: <Widget> [
_buildUnderMagnifierScreen(),
_addBackgroundToChild(result),
]
);
} else {
result = _addBackgroundToChild(result);
}
return result;
}

78
packages/flutter/test/cupertino/picker_test.dart
View File

@ -56,6 +56,84 @@ void main() {
});
});
group('gradient', () {
testWidgets('gradient displays correctly with background color', (WidgetTester tester) async {
const Color backgroundColor = Color.fromRGBO(255, 0, 0, 1.0);
await tester.pumpWidget(
Directionality(
textDirection: TextDirection.ltr,
child: Align(
alignment: Alignment.topLeft,
child: SizedBox(
height: 300.0,
width: 300.0,
child: CupertinoPicker(
backgroundColor: backgroundColor,
itemExtent: 15.0,
children: const <Widget>[
Text('1'),
Text('1'),
Text('1'),
Text('1'),
Text('1'),
Text('1'),
Text('1'),
],
onSelectedItemChanged: (int i) {},
),
),
),
),
);
final Container container = tester.firstWidget(find.byType(Container));
final BoxDecoration boxDecoration = container.decoration;
expect(boxDecoration.gradient.colors, <Color>[
backgroundColor,
backgroundColor.withAlpha(0xF2),
backgroundColor.withAlpha(0xDD),
backgroundColor.withAlpha(0x00),
backgroundColor.withAlpha(0x00),
backgroundColor.withAlpha(0xDD),
backgroundColor.withAlpha(0xF2),
backgroundColor,
]);
});
testWidgets('No gradient displays with transparent background color', (WidgetTester tester) async {
const Color backgroundColor = Color.fromRGBO(255, 0, 0, 0.5);
await tester.pumpWidget(
Directionality(
textDirection: TextDirection.ltr,
child: Align(
alignment: Alignment.topLeft,
child: SizedBox(
height: 300.0,
width: 300.0,
child: CupertinoPicker(
backgroundColor: backgroundColor,
itemExtent: 15.0,
children: const <Widget>[
Text('1'),
Text('1'),
Text('1'),
Text('1'),
Text('1'),
Text('1'),
Text('1'),
],
onSelectedItemChanged: (int i) {},
),
),
),
),
);
final DecoratedBox decoratedBox = tester.firstWidget(find.byType(DecoratedBox));
final BoxDecoration boxDecoration = decoratedBox.decoration;
expect(boxDecoration.gradient, isNull);
expect(boxDecoration.color, isNotNull);
});
});
group('scroll', () {
testWidgets(
'scrolling calls onSelectedItemChanged and triggers haptic feedback',