Flutter showModalBottomSheet does not allow transparent background container - flutter

Question

Am I using some widget here incorrectly or is this an issue with showModalBottomSheet?
As you can see here in the screenshots, the test code I've included displays a button in a 70% transparent container. This looks correct in main body. However, when you tap the Open Bottom Sheet button to display the showModalBottomSheet() function you'll see that that exact same button in a container with 70% transparent bg color is now 100% opaque.
Why is the opacity of the container being ignored in the showModalBottomSheet widget tree?
I've tried using Opacity widget and a Stack, but transparency does not seem to be allowed in a showModalBottomSheet?
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: BottomSheet(),
);
}
}
class BottomSheet extends StatelessWidget {
const BottomSheet({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
void _showBottomSheet() {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: MediaQuery.of(context).size.height * 0.75,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 27.0, bottom: 27.0),
child: Text(
'Select',
style: TextStyle(
fontSize: 20.0,
color: Colors.blue,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: GridView.count(
crossAxisCount: 3,
mainAxisSpacing: 25.0,
crossAxisSpacing: 25.0,
padding: EdgeInsets.only(
bottom: 100.0,
),
children: [
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
Placeholder(),
],
),
),
),
Container(
width: double.infinity,
height: 161.0,
color: Colors.white.withOpacity(0.3),
child: Padding(
padding: const EdgeInsets.only(
left: 24.0,
right: 24.0,
),
child: Center(
child: OutlinedButton(
child: Text(
'Button in container with 70% transparent bg ignored',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
textAlign: TextAlign.center,
),
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.blue,
minimumSize: Size(double.infinity, 52.0),
),
),
),
),
),
],
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(32.0),
topRight: const Radius.circular(32.0),
),
),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(32.0),
topRight: const Radius.circular(32.0),
),
),
barrierColor: Color.fromRGBO(0, 0, 0, 0.9),
isScrollControlled: true,
);
}
return Scaffold(
backgroundColor: Colors.indigo,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text(
'Open bottom sheet',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
onPressed: _showBottomSheet,
),
SizedBox(
height: 30.0,
),
Container(
width: double.infinity,
height: 161.0,
color: Colors.white.withOpacity(0.3),
child: Padding(
padding: const EdgeInsets.only(
left: 24.0,
right: 24.0,
),
child: Center(
child: OutlinedButton(
child: Text(
'Button in container with 70% transparent bg',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
textAlign: TextAlign.center,
),
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.blue,
minimumSize: Size(double.infinity, 52.0),
),
),
),
),
),
],
),
),
);
}
}

Answer 1

As you can see here, it appears to be a bug in Flutter's showModalBottomSheet().
To overcome this, I built my own bottom sheet in a Stack to get the transparency affect I needed on the bottom sheet button.