On wrapping a Container to SigleChildScrollView the UI look blurry?

3

I am building an overlay and the overlay content exceeds the container size so I tried to wrap the container inside a SingleChildScrollView but on after doing this the UI looks blurry. And the container had a Column in which I'm placing FormFields and for the Column the mainAxisAlignment property was set to spaceBetween butthe widgets are also rendering next to each other.

Code and UI before adding the container to SingleChildScrollView:

addNewStudent(BuildContext context) {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;
    overlayEntry = OverlayEntry(
        builder: (context) => Positioned(
            width: SizeConfig.blockSizeHorizontal * 30,
            height: SizeConfig.blockSizeVertical * 90,
            top: SizeConfig.blockSizeVertical * 9,
            left: SizeConfig.blockSizeHorizontal * 40,
            child: Material(
              child: Container(
                  alignment: Alignment.topLeft,
                  padding: EdgeInsets.symmetric(
                      vertical: SizeConfig.blockSizeVertical * 2,
                      horizontal: SizeConfig.blockSizeHorizontal * 1.5),
                  decoration: BoxDecoration(
                      color: Color(0xFFFFFFFF),
                      border: Border.all(color: Colors.black38, width: 1)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'ADD NEW STUDENT',
                            style: GoogleFonts.montserrat(
                                textStyle: TextStyle(
                                    color: Colors.blue,
                                    fontSize: 22,
                                    fontWeight: FontWeight.w400)),
                          ),
                          IconButton(
                              icon: Icon(
                                Icons.close,
                              ),
                              onPressed: () {
                                setState(() {
                                  overlayEntry.remove();
                                  overlayIgnoreState = false;
                                  opacity = 1;
                                });
//TODO turning the IgnorePointer false here only works for this screen as it is for this container only it
//should be set for the parent continer of which the drawer and appBar are a part of.
                              })
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Color(0xFFF3F3F3),
                            ),
                            width: SizeConfig.blockSizeHorizontal * 12,
                            child: TextFormField(
                                decoration: InputDecoration(
                                    enabledBorder: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(10),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFF3F3F3))),
                                    focusedBorder: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(10),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFF3F3F3))),
                                    hintText: 'First Name',
                                    hintStyle: GoogleFonts.montserrat(
                                        textStyle:
                                            TextStyle(color: Colors.black54)))),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Color(0xFFF3F3F3),
                            ),
                            width: SizeConfig.blockSizeHorizontal * 12,
                            child: TextFormField(
                                decoration: InputDecoration(
                                    enabledBorder: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(10),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFF3F3F3))),
                                    focusedBorder: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(10),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFF3F3F3))),
                                    hintText: 'Last Name',
                                    hintStyle: GoogleFonts.montserrat(
                                        textStyle:
                                            TextStyle(color: Colors.black54)))),
                          )
                        ],
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color(0xFFF3F3F3),
                        ),
                        child: TextFormField(
                            decoration: InputDecoration(
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                hintText: 'Father\'s Name',
                                hintStyle: GoogleFonts.montserrat(
                                    textStyle:
                                        TextStyle(color: Colors.black54)))),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color(0xFFF3F3F3),
                        ),
                        child: TextFormField(
                            decoration: InputDecoration(
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                hintText: 'Email id',
                                hintStyle: GoogleFonts.montserrat(
                                    textStyle:
                                        TextStyle(color: Colors.black54)))),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Row(
                          children: [
                            Container(
                              height: 50,
                              alignment: Alignment.center,
                              padding: const EdgeInsets.symmetric(
                                horizontal: 8,
                              ),
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(8),
                                  bottomLeft: Radius.circular(8),
                                ),
                              ),
                              child: Text(
                                "+91",
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                            ),
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 12,
                                ),
                                child: TextField(
                                  decoration: InputDecoration(
                                      border: InputBorder.none,
                                      hintText: "Mobile No."),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color(0xFFF3F3F3),
                        ),
                        child: TextFormField(
                            decoration: InputDecoration(
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                hintText: 'Date of Birth',
                                hintStyle: GoogleFonts.montserrat(
                                    textStyle:
                                        TextStyle(color: Colors.black54)))),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color(0xFFF3F3F3),
                        ),
                        child: TextFormField(
                            decoration: InputDecoration(
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                hintText: 'School Name',
                                hintStyle: GoogleFonts.montserrat(
                                    textStyle:
                                        TextStyle(color: Colors.black54)))),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color(0xFFF3F3F3),
                        ),
                        child: TextFormField(
                            keyboardType: TextInputType.multiline,
                            maxLines: 3,
                            decoration: InputDecoration(
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                hintText: 'Address',
                                hintStyle: GoogleFonts.montserrat(
                                    textStyle:
                                        TextStyle(color: Colors.black54)))),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Color(0xFFF3F3F3),
                        ),
                        child: TextFormField(
                            decoration: InputDecoration(
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Color(0xFFF3F3F3))),
                                hintText: 'Assign Batch',
                                hintStyle: GoogleFonts.montserrat(
                                    textStyle:
                                        TextStyle(color: Colors.black54)))),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('Gender', style: montserratTextStyle(16, Colors.black54)),
                          Radio(
                            value: 1,
                            groupValue: null,
                            onChanged: null,
                          ),
                          Text('Male', style: montserratTextStyle(15, Colors.black54)),
                          Radio(
                            value: 2,
                            groupValue: null,
                            onChanged: null,
                          ),
                          Text('Female', style: montserratTextStyle(15, Colors.black54)),
                          Radio(
                            value: 3,
                            groupValue: null,
                            onChanged: null,
                          ),
                          Text('Other', style: montserratTextStyle(15, Colors.black54)),
                        ],
                      ),
                      
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Row(
                          children: [
                            Container(
                              height: 50,
                              alignment: Alignment.center,
                              padding: const EdgeInsets.symmetric(
                                horizontal: 8,
                              ),
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(8),
                                  bottomLeft: Radius.circular(8),
                                ),
                              ),
                              child: Text(
                                'Fee Payment Type',
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                            ),
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 12,
                                ),
                                child: TextField(  
                                  decoration: InputDecoration(
                                      border: InputBorder.none,
                                      hintText: 'Monthly'),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),

                      RaisedButton(
                        padding: EdgeInsets.symmetric(
                            vertical: SizeConfig.blockSizeVertical * 1,
                            horizontal: SizeConfig.blockSizeHorizontal * 3),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        elevation: 0,
                        color: Colors.blue,
                        onPressed: () {
                          //function to add new Student to database
                        },
                        child: Text('SAVE',
                            style: GoogleFonts.montserrat(
                                textStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ))),
                      )
                    ],
                  )),
            )));
    overlayState.insert(overlayEntry);
  }

UI before adding SingleChildScrollView: UI before

UI after adding SingleChildScrollView: UI after

flutter
dart
asked on Stack Overflow Oct 21, 2020 by Amn Rwt

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0