2

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

enter image description here

when keyboard appear

enter image description here

3 Answers 3

3

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:

0
2

Here is my trial sample code.

Try to wrap with 'SingleChildScrollView' for avoiding vertical overflow,
and add a bottom padding as 'viewInsets.bottom' value for keyboard height.

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalBottomSheet(
            isScrollControlled: true,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(25.0),
              ),
            ),
            backgroundColor: Colors.white,
            context: context,
            builder: (context) => SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: 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:
                                  'Bagaimana pengalaman Anda secara keseluruhan?',
                              hintStyle: TextStyle(
                                color: Color(0xffB2B2B2),
                              ),
                              border: InputBorder.none,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container();
  }
}
1

Try Adding isScrollControlled = true to BottomSheetDialog

Add padding otherwise the sheet will cover the whole screen.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.