TextField in Modal

Issue

If we use listview the textfield will just go up when the keyboard appear but in modal it won’t.
sorry I don’t know how to properly explain it I will just show you with image.

modal code

showModalBottomSheet(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(25.0),
      ),
    ),
    backgroundColor: Colors.white,
    context: context,
    builder: (context) => Wrap(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [

            // ... another widget
            // ...
            // ...
            
            // Write review text area
            Container(
              margin: EdgeInsets.fromLTRB(24, 8, 24, 0),
              padding: EdgeInsets.fromLTRB(16, 4, 16, 4),
              width: double.infinity,
              height: 100,
              decoration: BoxDecoration(
                color: Color(0xffF7F7F7),
                borderRadius: BorderRadius.circular(20),
              ),
              child: TextField(
                expands: true,
                maxLines: null,
                decoration: InputDecoration(
                  hintText: languageCode == 'en'
                      ? 'How is your overall experience?'
                      : languageCode == 'id'
                          ? 'Bagaimana pengalaman Anda secara keseluruhan?'
                          : '',
                  hintStyle: TextStyle(
                    color: Color(0xffB2B2B2),
                  ),
                  border: InputBorder.none,
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  );

no keyboard

when keyboard appear

Solution

Try to add isScrollControlled: true, inside showModalBottomSheet

Your showModalBottomSheet method:

bottomSheet(BuildContext context) {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0)),
      ),
      builder: (BuildContext context) {
        return Padding(
          padding: MediaQuery.of(context).viewInsets,
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Container(
                  margin: const EdgeInsets.all(8.0),
                  height: 100,
                  color: Colors.red,
                ),
                TextFormField(
                  keyboardType: TextInputType.phone,
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please Enter Mobile Number';
                    }
                    return null;
                  },
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Enter  Number',
                    labelText: ' Number',
                  ),
                ),
                Container(
                  margin: const EdgeInsets.all(8.0),
                  height: 100,
                  color: Colors.red,
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: ElevatedButton(
                    onPressed: () async {},
                    child: Text(
                      'Submit',
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

Your Widget:

    TextButton(
        onPressed: () {
          bottomSheet(context);
        },
        child: Text('data'),
      ),

Result screen:

Answered By – Ravindra S. Patil

Answer Checked By – Mildred Charles (FlutterFixes Admin)