how to resolve BOTTOM OVERFLOWED BY 84 PIXLES in Flutter Activity?

Question

I am new to Flutter I have the following activity, when I click in Text Field Keyboard appears and then the warning eg BOTTOM OVERFLOWED BY 84 PIXLES also appears how can i be able to resolve this issue? when I tried SingleChildScrollView then empty area("where there is no Widgets") of activity gone white. Is there any Widget that is missing or i made a mistake in my code?

My Activity

here is my code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';

import 'bottomnavigationbar.dart';

class Payment2 extends StatefulWidget {
  @override
  _Payment2State createState() => _Payment2State();
}

class _Payment2State extends State<Payment2> {
  @override
  Widget build(BuildContext context) {
    final PaymentButton = Material(
      elevation: 5.0,
      borderRadius: BorderRadius.circular(30.0),
      color: Colors.red,
      child: MaterialButton(
        minWidth: MediaQuery.of(context).size.width,
        padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
        onPressed: () {
          Route route = MaterialPageRoute(builder: (context) => Paymentdone());
          Navigator.pushReplacement(context, route);
        },
        child: Text("Payment",
            textAlign: TextAlign.center,
            style: style.copyWith(
                color: Colors.white, fontWeight: FontWeight.w800)),
      ),
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("Payment"),
        centerTitle: true,
      ),
      body:  Container(
        padding: EdgeInsets.all(16),
        color: Colors.black,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(25),
            ),
            Text(
              "ENTER YOUR CARD DETAILS",
              style: TextStyle(
                  fontWeight: FontWeight.w400,
                  color: Colors.white,
                  fontSize: 16),
            ),
            Padding(
              padding: EdgeInsets.all(5),
            ),
            Card(
              color: Color(0xFF1E1E1E),
              child: ListTile(
                leading: CircleAvatar(),
                title: Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(
                        "MasterCard",
                        style: TextStyle(fontSize: 16, color: Colors.white),
                      ),
                      Text(
                        '90 \u0024',
                        style: TextStyle(fontSize: 16, color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(12),
            ),
            Card(
              color: Color(0xFF1E1E1E),
              child: cardnumber(),
            ),
            Row(
              children: [
                Container(
                  //height: 60,
                  width: MediaQuery.of(context).size.width * 0.45,
                  color: Color(0xFF1E1E1E),
                  child: TextField(
                    style: style,
                    maxLength: 5,
                    cursorColor: Colors.red,
                    textAlign: TextAlign.left,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      hintText: 'MM/YY',
                      hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide: BorderSide(
                          width: 0,
                          style: BorderStyle.none,
                        ),
                      ),
                      filled: true,
                      contentPadding: EdgeInsets.all(16),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(1),
                ),
                Container(
                  // height: 50,
                  width: MediaQuery.of(context).size.width * 0.44,
                  color: Color(0xFF1E1E1E),
                  child: TextField(
                    style: style,
                    maxLength: 3,
                    cursorColor: Colors.red,
                    textAlign: TextAlign.left,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      hintText: 'CVV',
                      hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide: BorderSide(
                          width: 0,
                          style: BorderStyle.none,
                        ),
                      ),
                      filled: true,
                      contentPadding: EdgeInsets.all(16),
                    ),
                  ),
                ),
              ],
            ),
            Container(
              height: 100,
            ),
            PaymentButton,
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigation(),
    );
  }

  Widget cardnumber() {
    return TextField(
      style: style,
      maxLength: 16,
      cursorColor: Colors.red,
      textAlign: TextAlign.left,
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
        hintText: 'XXXX XXXX XXXX 1234',
        hintStyle: TextStyle(fontSize: 16, color: Colors.white),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(
            width: 0,
            style: BorderStyle.none,
          ),
        ),
        filled: true,
        contentPadding: EdgeInsets.all(16),
      ),
    );
  }

  TextStyle style =
      TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}

Answer 1

只需将resizeToAvoidBottomInset: false添加到您的Scaffold

Answer 2

您也可以将孩子包裹在SingleChildScrollView

Answer 3

Use SingleChildScrollView in body . To avoid white portion problem wrap it inside a Stack .

Stack(
    children: <Widget>[
      Container(
        padding: EdgeInsets.all(16),
        color: Colors.black,
      ),
      SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(25),
              ),
              Text(
                "ENTER YOUR CARD DETAILS",
                style: TextStyle(
                    fontWeight: FontWeight.w400,
                    color: Colors.white,
                    fontSize: 16),
              ),
              Padding(
                padding: EdgeInsets.all(5),
              ),
              Card(
                color: Color(0xFF1E1E1E),
                child: ListTile(
                  leading: CircleAvatar(),
                  title: Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          "MasterCard",
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                        Text(
                          '90 \u0024',
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(12),
              ),
              Card(
                color: Color(0xFF1E1E1E),
                child: cardnumber(),
              ),
              Row(
                children: [
                  Container(
                    //height: 60,
                    width: MediaQuery.of(context).size.width * 0.45,
                    color: Color(0xFF1E1E1E),
                    child: TextField(
                      style: style,
                      maxLength: 5,
                      cursorColor: Colors.red,
                      textAlign: TextAlign.left,
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                        hintText: 'MM/YY',
                        hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: BorderSide(
                            width: 0,
                            style: BorderStyle.none,
                          ),
                        ),
                        filled: true,
                        contentPadding: EdgeInsets.all(16),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(1),
                  ),
                  Container(
                    // height: 50,
                    width: MediaQuery.of(context).size.width * 0.44,
                    color: Color(0xFF1E1E1E),
                    child: TextField(
                      style: style,
                      maxLength: 3,
                      cursorColor: Colors.red,
                      textAlign: TextAlign.left,
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                        hintText: 'CVV',
                        hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: BorderSide(
                            width: 0,
                            style: BorderStyle.none,
                          ),
                        ),
                        filled: true,
                        contentPadding: EdgeInsets.all(16),
                      ),
                    ),
                  ),
                ],
              ),
              Container(
                height: 100,
              ),
              PaymentButton,
            ],
          ),
        ),
      )
    ],
  )

Answer 4

using a SingleChildScrollView is the right way to go.

in order to fix the issue you talked about, delete the color attribute from the container, and move it to the scaffold background color attribute:

return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text("Payment"),
        centerTitle: true,
      ),
      body:  SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            // the rest of the widgets...
          ),
        ),
      );