A RenderFlex overflowed by 14 pixels on the bottom. The relevant error-causing widget was AlertDialog

Question

I am creating a dialogue box, it will open when i click on edit icon button, but when i click on text field to enter text it send me this error

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 14 pixels on the bottom.
The relevant error-causing widget was
AlertDialog

here is my dialogue box code

void _getSelectedRowInfo(dynamic date,dynamic timein,dynamic timeout) {
    Widget okButton = FlatButton(  
    child: Text("Submit",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue[500],fontSize: 20),),  
    onPressed: () { 

   
    },  
  ); 
  
    AlertDialog alert = AlertDialog( 
scrollable: true,  
    //contentPadding:EdgeInsets.fromLTRB(0, 20, 0, 20),
    insetPadding: EdgeInsets.symmetric(vertical: 150),
    //contentPadding: const EdgeInsets.all(16.0),
    title: Text("Request to change time",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue[500])),  
    
    content:Container(child: SingleChildScrollView( 
      scrollDirection: Axis.vertical,
    child:Column(children:<Widget> [
      
      TextField(
        decoration: InputDecoration(labelText: date,hintText: "Date"),
        controller:dateController ,
      ),
      TextField(
        decoration: InputDecoration(labelText: timein,hintText: "Time in"),
        controller:timeinController ,
      ),
      TextField(
        decoration: InputDecoration(labelText:timeout,hintText: "Time out"),
        controller:timeoutController ,
      ),
      
     ]), 
  )
  ),
  actions: [  
      okButton,  
      
    ],  
  );  
      showDialog(  
    context: context,  
    builder: (BuildContext context) {  
      return alert;  
    },  
  );  
 
    
  }

here is my dialogue box look like

and when click on first textfield it look like this

please help me how to fix it.

Solution 1

You can set the scrollable parameter of the AlertDialog to true to avoid the overflow:

AlertDialog(
  scrollable: true,
  insetPadding: EdgeInsets.symmetric(vertical: 150),
  title: Text("Request to change time",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.blue[500],)),
  content: Column(children: <Widget>[
    TextField(
      decoration: InputDecoration(labelText: date, hintText: "Date"),
      controller: dateController,
    ),
    TextField(
      decoration: InputDecoration(labelText: timein, hintText: "Time in"),
      controller: timeinController,
    ),
    TextField(
      decoration:
      InputDecoration(labelText: timeout, hintText: "Time out"),
      controller: timeoutController,
    ),
  ]),
  actions: [
    ...
  ]
)

Solution 2

    AlertDialog alert = AlertDialog( 
        scrollable: true, 
        //contentPadding:EdgeInsets.fromLTRB(0, 20, 0, 20),
        insetPadding: EdgeInsets.symmetric(vertical: 150),
        //contentPadding: const EdgeInsets.all(16.0),
        title: Text("Request to change time",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue[500])),  
        
        content:Container(child: SingleChildScrollView( 
          scrollDirection: Axis.vertical,
        child:Column(
          crossAxisAlignment: CrossAxisAlignment.spaceBetween,
          children:<Widget> [
          
          TextField(
            decoration: InputDecoration(labelText: date,hintText: "Date"),
            controller:dateController ,
          ),
          TextField(
            decoration: InputDecoration(labelText: timein,hintText: "Time in"),
            controller:timeinController ,
          ),
          TextField(
            decoration: InputDecoration(labelText:timeout,hintText: "Time out"),
            controller:timeoutController ,
          ),
          
         ]), 
      )
      ),
      actions: [  
          okButton,  
          
        ],  
      );  
          showDialog(  
        context: context,  
        builder: (BuildContext context) {  
          return alert;  
        },  
      );  
     
        
      }

Comments

[faysal neowaz]

your welcome. can you mark is as this is work for you. @TimeToCode