The following screenshot from XCode displays an alert dialog over a black rectangle that's just as wide as the dialog. The dialog's blurry background is almost uniformly #c5c5c5, i.e. does not blur at all from the white content, where the dialog does not cover.
This is not the same in Flutter, as shown in the following screenshot, where the white obviously bleeds in.
This is expected, since Flutter's widgets blurs the background before clipping. We should clip it before blurring.
Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
Widget createAppWithButtonThatLaunchesDialog(WidgetBuilder dialogBuilder) {
return CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
home: CupertinoPageScaffold(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Builder(builder: (BuildContext context) {
return CupertinoButton(
onPressed: () {
showCupertinoDialog<void>(
context: context,
builder: dialogBuilder,
);
},
child: const Text('Flutter'),
);
}),
Container(
width: 270,
height: 500,
color: Colors.black,
)
]),
),
),
);
}
void main() => runApp(const App());
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return createAppWithButtonThatLaunchesDialog((BuildContext context) {
return CupertinoAlertDialog(
title: const Text('The title'),
actions: <Widget>[
CupertinoDialogAction(
child: const Text('One'),
onPressed: () {
Navigator.pop(context);
},
),
CupertinoDialogAction(
child: const Text('Two'),
onPressed: () {
Navigator.pop(context);
},
),
],
);
},
);
}
}
The following screenshot from XCode displays an alert dialog over a black rectangle that's just as wide as the dialog. The dialog's blurry background is almost uniformly #c5c5c5, i.e. does not blur at all from the white content, where the dialog does not cover.
This is not the same in Flutter, as shown in the following screenshot, where the white obviously bleeds in.
This is expected, since Flutter's widgets blurs the background before clipping. We should clip it before blurring.
Code: