Question 388866 in Flutter Question posted in
The official Flutter documentation can be found here.

Center a container in flutter and make it scrollable when keyboard is visible

I have a screen in which I have a container with fixed width but unconstrained height. The contents of the container are hidden by the keyboard popup. I want to make the container scrollable or in focus when the keyboard popup is shown. Following is my code:

Scaffold(
      backgroundColor: Colors.green, // Set the background color of the app
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            width: 480,
            padding: EdgeInsets.all(16.0),
            color: Colors.white, // Set the background color of the container
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextField(
                  decoration: InputDecoration(labelText: 'Field 1'),
                ),
                SizedBox(height: 16.0), // Add spacing between fields
                TextField(
                  decoration: InputDecoration(labelText: 'Field 2'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 3'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 4'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 5'),
                ),
              ],
            ),
          ),
        ),
      ),
    );

It only happens when the phone is in landscape view and I click on a textfield that brings the keyboard popup. I tried chatgtp and gemini but they both give the same answers that do not work. Kindly help. Currently it looks like this

Current issue

Tags:

2

Answers


  1. 0

    Put your Container widget in a Column. Normally, I use SingleChildScrollView and Column together.

    Scaffold(
      backgroundColor: Colors.green, // Set the background color of the app
      body: Center(
        child: SingleChildScrollView(
          padding: MediaQuery.of(context).viewInsets,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 480,
                padding: const EdgeInsets.all(16.0),
                color: Colors.white, // Set the background color of the container
                child: const Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextField(
                      decoration: InputDecoration(labelText: 'Field 1'),
                    ),
                    SizedBox(height: 16.0), // Add spacing between fields
                    TextField(
                      decoration: InputDecoration(labelText: 'Field 2'),
                    ),
                    SizedBox(height: 16.0),
                    TextField(
                      decoration: InputDecoration(labelText: 'Field 3'),
                    ),
                    SizedBox(height: 16.0),
                    TextField(
                      decoration: InputDecoration(labelText: 'Field 4'),
                    ),
                    SizedBox(height: 16.0),
                    TextField(
                      decoration: InputDecoration(labelText: 'Field 5'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

    enter image description here

    Login or Signup to reply.
  2. 0

    To make your container scrollable when the keyboard is displayed, you can use SingleChildScrollView in the body of a scaffold and ensure that your TextFields are handled correctly when the keyboard appears. You can also use MediaQuery to adjust the padding of SingleChildScrollView to account for the keyboard.

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green, // Set the background color of the app
      body: Center(
        child: SingleChildScrollView(
          padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Container(
            width: 480,
            padding: EdgeInsets.all(16.0),
            color: Colors.white, // Set the background color of the container
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextField(
                  decoration: InputDecoration(labelText: 'Field 1'),
                ),
                SizedBox(height: 16.0), // Add spacing between fields
                TextField(
                  decoration: InputDecoration(labelText: 'Field 2'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 3'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 4'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 5'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

    enter image description here
    enter image description here
    enter image description here
    before keyboard

    after keyboard

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search