I'm having bottom overflowed by pixels flutter when showing keyboard, i tried SingleChildSCrollView
and still couldn't find the solution for it. my aim to make the Get.defaultDialog
scrollable.
here my code :
class AddCard extends StatelessWidget {
final homeCtrl = Get.find<HomeController>();
AddCard({super.key});
@override
Widget build(BuildContext context) {
final icons = getIcons();
var squareWidth = Get.width - 12.0.wp;
return Container(
width: squareWidth / 2,
height: squareWidth / 2,
margin: EdgeInsets.all(3.0.wp),
child: InkWell(
onTap: () async {
await Get.defaultDialog(
titlePadding: EdgeInsets.symmetric(vertical: 5.0.wp),
radius: 5,
title: 'Task Type',
content: Form(
key: homeCtrl.formKey,
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 3.0.wp),
child: TextFormField(
controller: homeCtrl.editCtrl,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'title',
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Please enter your task title';
}
return null;
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5.0.wp),
child: Wrap(
spacing: 2.0.wp,
children: icons
.map((e) => Obx(() {
final index = icons.indexOf(e);
return ChoiceChip(
selectedColor: Colors.grey[200],
pressElevation: 0,
backgroundColor: Colors.white,
label: e,
selected: homeCtrl.chipIndex.value == index,
onSelected: (bool selected) {
homeCtrl.chipIndex.value =
selected ? index : 0;
},
);
}))
.toList(),
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
minimumSize: const Size(150, 40),
),
onPressed: () {
if (homeCtrl.formKey.currentState!.validate()) {
int icon =
icons[homeCtrl.chipIndex.value].icon!.codePoint;
String color =
icons[homeCtrl.chipIndex.value].color!.toHex();
var task = Task(
title: homeCtrl.editCtrl.text,
icon: icon,
color: color,
);
}
},
child: const Text("Confirm"),
),
],
),
));
},
child: DottedBorder(
color: Colors.grey[400]!,
dashPattern: const [8, 4],
child: Center(
child: Icon(
Icons.add,
size: 10.0.wp,
color: Colors.grey,
),
)),
),
);
}
}
The widget that makes the error is the Get.defaultDialog().
CodePudding user response:
I can't really understand your question well because you only posted part of the codes, but try wrapping your "Scaffold body:" with SingleChildSCrollView.
maybe you're using the SingleChildSCrollView at a wrong place
CodePudding user response:
There are two ways:
- You can use the
resizeToAvoidBottomInset
property on the Scaffold widget. - You can use
ListView
insteadColumn
:
onTap: () async {
await Get.defaultDialog(
radius: 5,
titlePadding: EdgeInsets.symmetric(vertical: 5.0),
title: Text('Task Type'),
content: SizedBox(
height: 500,//your height
width: 300, //your width
child:
Form(
child: ListView(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 3.0),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'title',
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: Wrap(
spacing: 2.0,
children: List.generate(//replace with your content
100,
(index) => Container(
height: 20,
width: 50,
padding: EdgeInsets.all(20),
color: Colors.red,
))),
),
),
Expanded(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
minimumSize: const Size(150, 40),
),
onPressed: () {},
child: const Text("Confirm"),
),
),
],
),
),
),
),
);
It`s important to give your dialog a fixed height and width, in this defined area it's possible to make a scrollable widget work.