Home > Back-end >  How to fix overflow in flutter
How to fix overflow in flutter

Time:12-24

here is my app

enter image description here

as you can see working well, I installed this on my phone , and it works fine too. and i send this to my friend, and in his phone showing like this

enter image description here

mine and his phone is same phone, literally same phone, but in his and any others phone is showing this overflow, mine and this emulator have no problem, how do i fix overflow problem

Here is the code : here is my code : ```

https://pastebin.com/8BGnKTtj

CodePudding user response:

Without your code I can't make corrections to the current code. but if you need responsive UI that work regardless of screen size, I suggest you use Rows, Columns with Expanded Widget, as necessary.

for example if you need to have 2 Items inside a Row where each occupies same space you can use,

Row (
children: [
    Expanded (
      flex:1
      child: YourWidget()
    ),
    Expanded (
      flex:1
      child: YourWidget()
    )
  ]
)

Remember to remove hardcoded size properties along the main axis of your Colum or Row.

Same goes for Columns.

If you need each to have varied sizes, you can use flex property of the Expanded Widget. for example, one items has 1/3 of width and other has 2/3 you can put 1 and 2 as flex values.

more explanation from flutter team: Expanded

CodePudding user response:

->Use This Code

 Widget build(BuildContext context) {
    double h =  MediaQuery.of(context).size.height;
    double w =  MediaQuery.of(context).size.width;
    return Scaffold(

      appBar: getAppBar(context, "Back", "", []),
      body: SafeArea(
        top: true,
        bottom: true,
        child: Column(
          children: [


            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                  physics: BouncingScrollPhysics(),
                  itemCount: 15,
                  itemBuilder: (context,v){
                return
                     Container(
                       padding: EdgeInsets.only(left: 15.0,right: 15.0),
                       child: Column(
                         children: [
                           Row(
                             mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children: [
                               Container(
                                 height: h*0.2,
                                 width: w*0.4,
                                 decoration: BoxDecoration(
                                   color: Colors.red,
                                   borderRadius: BorderRadius.circular(25.0)
                                 ),
                                
                               ),
                               Container(
                                 height: h*0.2,
                                 width: w*0.4,
                                 decoration: BoxDecoration(
                                     color: Colors.black38,
                                     borderRadius: BorderRadius.circular(25.0)
                                 ),
                               ),

                             ],
                           ),
                           SizedBox(height: 15.0,),
                           Divider(

                             color: Colors.black,
                           ),
                           SizedBox(height: 15.0,),
                         ],
                       ),
                     );
              }),
            )

            

          ],
        ),
      ),
    );
  }
  • Related