I'm using a Form to display contents and wraped the form in Single child scroll view. But i'm unable to see the contents in the screen. when i remove the scroll view , I'm able to see it.
Is there any changes should be made in the parent child architecture?
Without scrollView:
With Scroll View:
return Scaffold(
appBar: AppBar(
),
body: SafeArea(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: FormBuilder(
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Customer Details",
style:
TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
FormBuilderTextField(
name: 'name',
decoration: const InputDecoration(labelText: 'Name'),
validator: validateTextField,
),
FormBuilderTextField(
name: 'problemDescription',
maxLines: 2,
decoration: const InputDecoration(
labelText: 'Problem Description'),
),
FormBuilderTextField(
name: 'date',
decoration: const InputDecoration(labelText: 'Date'),
),
child: const Text(
'Submit',
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
Try to wrap SingleChildScrollView
with Expanded
Widget, While doing that (Expanded Widget must be placed inside a Column).
Follow this structure:
Column(
children:[
Expanded(
child: SingleChildScrollView(...),
),
]
),
Hope it helps you.