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
User contributions licensed under CC BY-SA 3.0