Home > Software design >  How to set a container with the previous background?
How to set a container with the previous background?

Time:08-12

For now, I have this design:

enter image description here

I want to achieve this:

enter image description here

This is my homepage, which I want to appear when click on the settings button

enter image description here

This is my code:

Settings.dart

import 'dart:ui';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:settings_ui/settings_ui.dart';
import 'package:responsive_sizer/responsive_sizer.dart';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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();
      }
    );
  }
}

I tried to set backgroundcolor to color.transparent, but don't work the screen just show a black background, which is no what I had in mind

How to solve this issue? Thank you in advance

CodePudding user response:

you're looking for widget called showDialog take a look for this code exemple :

showDataAlert() {
  showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(
                20.0,
              ),
            ),
          ),
          contentPadding: EdgeInsets.only(
            top: 10.0,
          ),
          title: Text(
            "Create ID",
            style: TextStyle(fontSize: 24.0),
          ),
          content: Container(
            height: 400,
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "Mension Your ID ",
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    child: TextField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          hintText: 'Enter Id here',
                          labelText: 'ID'),
                    ),
                  ),
                  Container(
                    width: double.infinity,
                    height: 60,
                    padding: const EdgeInsets.all(8.0),
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      style: ElevatedButton.styleFrom(
                        primary: Colors.black,
                        // fixedSize: Size(250, 50),
                      ),
                      child: Text(
                        "Submit",
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('Note'),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt'
                          ' ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud'
                          ' exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
                          ' Duis aute irure dolor in reprehenderit in voluptate velit esse cillum '
                          'dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,'
                          ' sunt in culpa qui officia deserunt mollit anim id est laborum.',
                      style: TextStyle(fontSize: 12),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      });
}

CodePudding user response:

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.

  • Related