flutterdart
How to make a Flutter container's background transparent instead of black?
I'm currently working on a Flutter project and I've encountered an issue with setting a container's background to be transparent. My goal is to overlay this container on another widget, allowing the underlying widget's design to be visible through it.
Here's the visual representation of what I currently have versus what I'm aiming to achieve:
Current Design:
Desired Design:
To attempt to solve this, I've modified the backgroundColor property of my container to Colors.transparent in the following code snippet from my Settings.dart:
...
backgroundColor: Color.fromARGB(100, 22, 44, 33),
...
However, instead of achieving a transparent background, the container displays a black background. This result is not what I was expecting and I'm unsure how to proceed to achieve the desired transparency.
Here's the complete code of my settings page for context:
Settings.dart
class SettingsUIPomodoro extends StatefulWidget {
const SettingsUIPomodoro({Key? key}) : super(key: key);
@override
State<SettingsUIPomodoro> createState() => _SettingsUIPomodoroState();
}
class _SettingsUIPomodoroState extends State<SettingsUIPomodoro> {
final List<String> _items = ["sound1","sound2","sound3","sound4"];
String _dropDownValue = 'sound1';
final List<String> _timeBoxing = ["5min","10min","15min","20min"];
String _timeBoxingValue = '5min';
final List<String> _Notification = ["Every","Last",];
String _NotificationValue = 'Every';
bool _lights = false;
@override
Widget build(BuildContext context) {
return ResponsiveSizer(
builder: (context, orientation, screenType) {
return Device.screenType == ScreenType.mobile
? Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: Color.fromARGB(100, 22, 44, 33),
body: Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Container(
height: double.maxFinite,
width: double.maxFinite,
decoration: BoxDecoration(
color: Color(0xffF6F6F6),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
Text("Timer (minutes)",
style: TextStyle(
fontSize: 20,
color: Colors.black
),),
SizedBox(height: 20,),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Pomodoro",
style: TextStyle(
fontSize: 20,
color: Colors.grey
),),
SizedBox(
width: 100,
child: TextField(
cursorColor: Color(0xff3B3B3B),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
),
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.none,
decorationStyle: TextDecorationStyle.dotted,
decorationColor: Color(0xffF6F6F6),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
],
),
SizedBox(width: 20,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Short Break",
style: TextStyle(
fontSize: 20,
color: Colors.grey
),),
SizedBox(
width: 100,
child: TextField(
cursorColor: Color(0xff3B3B3B),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
),
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.none,
decorationStyle: TextDecorationStyle.dotted,
decorationColor: Color(0xffF6F6F6),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
],
),
SizedBox(width: 20,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Long Break",
style: TextStyle(
fontSize: 20,
color: Colors.grey
),),
SizedBox(
width: 100,
child: TextField(
cursorColor: Color(0xff3B3B3B),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
),
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.none,
decorationStyle: TextDecorationStyle.dotted,
decorationColor: Color(0xffF6F6F6),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
],
),
],
),
),
SizedBox(height: 20,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Long break interval",
style: TextStyle(
fontSize: 20,
color: Colors.black
),),
SizedBox(
width: 100,
child: TextField(
cursorColor: Color(0xff3B3B3B),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
),
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.none,
decorationStyle: TextDecorationStyle.dotted,
decorationColor: Color(0xffF6F6F6),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
],
),
SizedBox(height: 15,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Alarm Sound",
style: TextStyle(
fontSize: 20,
color: Colors.black
),),
SizedBox(width: 10,),
DropdownButton(
value: _dropDownValue,
items: _items.map((String _items){
return DropdownMenuItem(
value: _items,
child: Text(_items));
}).toList(),
onChanged: (String? newvalue){
setState(() {
_dropDownValue = newvalue!;
});
},
)
],
),
SizedBox(height: 20,),
Divider(color: Colors.grey,),
SizedBox(height: 10,),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: 10,),
Center(
child: Text("Do you want to do Timeboxing beside Pomodoro technique?",
style: TextStyle(
fontSize: 20,
color: Colors.black
),),
),
SizedBox(height: 15,),
Center(
child: const Text("Is Elon Musk habit to make it a ninja in time management, consists in set a short time, let say 5 min and really be focused on a very short period of time, when time is over. Begins another 5 minutes and another task",
style: TextStyle(
fontSize: 20,
color: Colors.grey
),),
),
SizedBox(height: 10,),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Text("Choose your timeboxing alarm",
style: TextStyle(
fontSize: 20,
color: Colors.black
),),
),
DropdownButton(
value: _dropDownValue,
items: _items.map((String _items){
return DropdownMenuItem(
value: _items,
child: Text(_items));
}).toList(),
onChanged: (String? newvalue){
setState(() {
_dropDownValue = newvalue!;
});
},
)
],
),
SizedBox(height: 10,),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Text("Alarm Sound Each",
style: TextStyle(
fontSize: 20,
color: Colors.black
),),
),
DropdownButton(
value: _timeBoxingValue,
items: _timeBoxing.map((String _items){
return DropdownMenuItem(
value: _items,
child: Text(_items));
}).toList(),
onChanged: (String? newvalue){
setState(() {
_timeBoxingValue = newvalue!;
});
},
)
],
)
],
),
),
Divider(color: Colors.grey,),
SwitchListTile(
activeColor: Colors.grey,
title: const Text('Dark mode?'),
value: _lights,
onChanged: (bool value) {
setState(() {
_lights = value;
});
},
secondary: const Icon(Icons.lightbulb_outline),
),
Divider(color: Colors.grey,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Notification",
style: TextStyle(
fontSize: 20,
color: Colors.black
),),
SizedBox(width: 10,),
DropdownButton(
value: _NotificationValue,
items: _Notification.map((String _items){
return DropdownMenuItem(
value: _items,
child: Text(_items));
}).toList(),
onChanged: (String? newvalue){
setState(() {
_NotificationValue = newvalue!;
});
},
),
SizedBox(width: 10,),
DropdownButton(
value: _timeBoxingValue,
items: _timeBoxing.map((String _items){
return DropdownMenuItem(
value: _items,
child: Text(_items));
}).toList(),
onChanged: (String? newvalue){
setState(() {
_timeBoxingValue = newvalue!;
});
},
),
],
),
],
),
),
),
),
),
),
)
: Scaffold();
}
);
}
}
Attempted Solutions:
I've tried setting backgroundColor to Colors.transparent, expecting the container to become transparent and show the underlying widget's design, but the result was a black background.
Questions:
- How can I correctly set a container's background to be transparent in Flutter?
- Are there specific properties or widgets in Flutter that I should use to achieve this effect?
Thank you for your help!
Solution
You can use this example as a starting base for you needs:
class ConfirmationDialog extends StatelessWidget {
late String title;
late String content;
late VoidCallback onValidate;
late VoidCallback onCancel;
TextStyle textStyle = TextStyle(color: Colors.black);
ConfirmationDialog({
Key? key,
required this.title,
required this.content,
required this.onValidate,
required this.onCancel,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: AlertDialog(
title: Text(
title,
style: textStyle,
),
content: Text(
content,
style: textStyle,
),
actions: <Widget>[
TextButton(
child: Text("Continue"),
onPressed: () {
onValidate();
},
),
TextButton(
child: Text("Cancel"),
onPressed: () {
onCancel();
Navigator.of(context).pop();
},
),
],
),
);
}
}
It is a widget that display a dialog on top of the current page with a blur effect.
You can use it like this:
ConfirmationDialog dialog = ConfirmationDialog(
title: "My dialog",
content: "Your dialog content here",
onValidate: () {
setState(() {});
Navigator.of(context).pop();
// Do what you need on validate button pressed
},
onCancel: () {
// Do what you nedd on cancel button pressed
},
);
showDialog(
context: context,
builder: (BuildContext context) {
return dialog;
},
);
Feel free to modify the AlertDialog content to fill your needs.
- Connecting blocs through domain layer: How to listen to one stream from multiple blocs?
- How to hide Android StatusBar in Flutter
- CLIENT_ID, REVERSED_CLIENT_ID and ANDROID_CLIENT_ID missing from GoogleService-Info.plist with Firebase on IOS
- Building glassmorphic bottom navigation bar in flutter
- Flutter: PlatformException when trying to get Google Sign-In access token
- uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:cloud_firestore]
- flutter app is crashing the moment it launches
- How to fill a Flutter Floating Action Button with an image?
- How to solve OS Error: Permission denied, errno = 13 in flutter
- I don't know how to mock Riverpod's Provider with mockito
- API internal error 500 in app and working fine in the server
- How to format input currency (from right to left) on a TextField in Flutter?
- Flutter JSON Serialization - Not generating *.g.dart files
- Divide a Row into two equal halves in Flutter
- Integrate a Flutter app in to another Flutter app
- Flutter: include of non-modular header inside framework module 'firebase_core.FLTFirebasePlugin'
- Flutter package easy_localization plurals not working as expected
- Flutter: How to show log output in console and automatically store it?
- Flutter App hangs at build: Loading a Json Asset and Using Riverpod
- Don't put any logic in createState after installing flutter_lints in Flutter
- How to create a blur with a linear gradient in Flutter
- How to change language of Show date picker in flutter
- How do I replace `serviceWorkerVersion` with `{{flutter_service_worker_version}}` template token?
- Xcode 14: Command PhaseScriptExecution failed with a nonzero exit code
- Unable to load standard library for target 'arm64-apple-ios10.0'
- How can I refactor the functions in my Flutter StatefulWidget?
- Could not create an instance of type com.android.build.api.variant.impl.LibraryVariantBuilderImpl. [Flutter]
- Web-like footer in Flutter
- How to center the title of an appbar
- How to Pick files and Images for upload with flutter web