CODEWITHSUNDEEP
flutterflutter-layout
duatree
duatree

Reputation: 413

How to fix "A RenderFlex overflowed by 40 pixels on the right." in Flutter?

I'm creating a simple user form, but I got a problem with ' A RenderFlex overflowed by 4o pixels on the right. How do I fix this render problem?

I tried to fix it with overflow: TextOverflow.ellipsis, by putting the line of code under the TextFormField but I got error with the unrecognizable of the overflow words inside my code.

enter image description here

 Widget build(BuildContext context){
  final halfMediaWidth = MediaQuery.of(context).size.width / 2.0;
    return Form(
    key: _formKey,
     autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  alignment: Alignment.topCenter,
                  width: halfMediaWidth,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                    decoration : InputDecoration(labelText: "No"),
                    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                    keyboardType: TextInputType.number,
                    
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.topCenter,
                  width: halfMediaWidth,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "ID"),
                    ),
                  ),

                ),

              ],
            ),
          ),
         
        ],
      ),
    
    );
  }

Upvotes: 0

Views: 169

Answers (2)

Ronip Rony
Ronip Rony

Reputation: 1

Widget build(BuildContext context){
  final halfMediaWidth = MediaQuery.of(context).size.width / 2.0;
    return Form(
    key: _formKey,
     autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  alignment: Alignment.topCenter,
                  width: halfMediaWidth,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                    decoration : InputDecoration(labelText: "No"),
                    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                    keyboardType: TextInputType.number,
                    
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.topCenter,
                  width: halfMediaWidth,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "ID"),
                    ),
                  ),

                ),

              ],
            ),
          ),
         
        ],
      ),
    
    );
}
flutterflutter-layout

Upvotes: 0

enzo
enzo

Reputation: 11531

Some remarks:

  1. There's no reason for using halfMediaWidth, you can just use Expanded.
@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(
                    alignment: Alignment.topCenter,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "No"),
                        keyboardType: TextInputType.number,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.topCenter,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "ID"),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  1. There's no reason for using alignment inside a Row, you're already using CrossAxisAlignment.start.
@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "No"),
                        keyboardType: TextInputType.number,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        decoration : InputDecoration(labelText: "ID"),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  1. That being said, there's no reason for using a Container.
@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "No"),
                      keyboardType: TextInputType.number,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "ID"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  1. There's no reason for using alignment inside a Column, you can use the crossAxisAlignment.
@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "No"),
                      keyboardType: TextInputType.number,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      decoration : InputDecoration(labelText: "ID"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  1. There's no reason for using a Container wrapped in Row.
@override
  Widget build(BuildContext context){
    return Form(
      autovalidateMode: AutovalidateMode.always,
      child: Column(  
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration : InputDecoration(labelText: "No"),
                    keyboardType: TextInputType.number,
                  ),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration : InputDecoration(labelText: "ID"),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

Using the refactored code, see if it's still giving you the error.

Upvotes: 2

Related Questions