Search code examples
flutterflutter-dependenciesflutter-animation

Column placed inside Singlechildscrollview is not Displaying contents in flutter


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:

enter image description here

With Scroll View:

enter image description here

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),
                    ),
                  )
                ],
              ),
            ),
          ),

Solution

  • 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.