How to center a showmodalbottomservice

user_14229593 0
Viewed 36

Im trying to center an showmodalbottomService because when im typing, you can't see the textfield... means you can't see what you are typing.

I've tried it with SingleChildScrollView, Center or with the mainAxisAlignment... but it's just not working. Please help me!

Can anyone tell me what's the problem?

Here is my code:

showModalBottomSheet(
            context: context,
            builder: (BuildContext context) => Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      padding: const EdgeInsets.all(10.0),
                      height: 250,
                      color: Colors.green,
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                'Task hinzufügen',
                                style: TextStyle(
                                  fontSize: 20.0,
                                ),
                              ),
                              GestureDetector(
                                onTap: () => Navigator.of(context).pop(),
                                child: Icon(Icons.close),
                              ),
                            ],
                          ),
                          Divider(thickness: 1.8),
                          SizedBox(height: 20.0),
                          TextField(
                            controller: _taskController,
                            decoration: InputDecoration(
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(5.0),
                                borderSide: BorderSide(color: Colors.blue),
                              ),
                              filled: true,
                              hintText: 'Task hinzufügen',
                            ),
                          ),
                          SizedBox(height: 20.0),
                          Container(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 5.0),
                            width: MediaQuery.of(context).size.width,
                            // height: 200.0,
                            child: Row(
                              children: [
                                Container(
                                  width:
                                      (MediaQuery.of(context).size.width / 2) -
                                          20,
                                  child: RaisedButton(
                                    color: Colors.red,
                                    child: Text(
                                      'RESET',
                                    ),
                                    onPressed: () => _taskController.text = '',
                                  ),
                                ),
                                Container(
                                  width:
                                      (MediaQuery.of(context).size.width / 2) -
                                          20,
                                  child: RaisedButton(
                                    color: Colors.blue,
                                    child: Text(
                                      'Hinzufügen',
                                    ),
                                    onPressed: () => saveData(),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
flutter
1 Answers

You can add isScrollControlled: true to showModalBottomSheet function.

Then you have to:

  • remove the Center as a parent.
  • remove first Column (optional step, as it is useless here).
  • remove the height from Container.
  • add a bottom margin of the keyboard height (This is MediaQuery.of(context).viewInsets.bottom here).

Your code will become like this:

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) => SingleChildScrollView(
    child: Container(
      padding: const EdgeInsets.all(10.0),
      margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
      ),
      color: Colors.green,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Task hinzufügen',
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              GestureDetector(
                onTap: () => Navigator.of(context).pop(),
                child: Icon(Icons.close),
              ),
            ],
          ),
          Divider(thickness: 1.8),
          SizedBox(height: 20.0),
          TextField(
            controller: _taskController,
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5.0),
                borderSide: BorderSide(color: Colors.blue),
              ),
              filled: true,
              hintText: 'Task hinzufügen',
            ),
          ),
          SizedBox(height: 20.0),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
            width: MediaQuery.of(context).size.width,
            // height: 200.0,
            child: Row(
              children: [
                Container(
                  width: (MediaQuery.of(context).size.width / 2) - 20,
                  child: RaisedButton(
                    color: Colors.red,
                    child: Text(
                      'RESET',
                    ),
                    onPressed: () => _taskController.text = '',
                  ),
                ),
                Container(
                  width: (MediaQuery.of(context).size.width / 2) - 20,
                  child: RaisedButton(
                    color: Colors.blue,
                    child: Text(
                      'Hinzufügen',
                    ),
                    onPressed: () => saveData(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
),
user_98463880
Related