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

Flutter – List inside in two column show overflow issue

I have a overflow issue. I have list view inside of 2 column which show overflow issue.

  Widget getViewMethod() {
return Column(children: [
  Container(color: ColorConst.whiteColor, height: 40),
  getAppBarMediBot(),
  const SizedBox(height: 10),
  Card(
      color: ColorConst.whiteColor,
      child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(children: [
            const ListTile(
                leading: Icon(Icons.medical_services, size: 50),
                title: Text('Medibot Box 1255'),
                subtitle: Row(children: [
                  Text('Connected', style: TextStyle(color: Colors.green)),
                  SizedBox(width: 10),
                  Icon(Icons.battery_full, color: Colors.green),
                  Text('99%'),
                ])),
            const SizedBox(height: 20),
            SingleChildScrollView(
                child: ListView.builder(
                    shrinkWrap: true,
                    physics: BouncingScrollPhysics(),
                    itemCount: 50,
                    itemBuilder: (BuildContext context, int index) {
                      return InkWell(
                          child: getTxtBlackColor(msg: "msg $index"));
                    }))
          ])))
]);
}

How can i solve this issue.enter image description here

Tags:

2

Answers


  1. 0

    You can Wrap the second List (ListView.builder) in an Expanded widget instead of singleChildScrollView, which will take all remaining space in the screen and remove shrinkWrap optionally to improve performance.

    Login or Signup to reply.
  2. 0

    Wrap your 1st Column inside SingleChildScrollView try below code, add and replace your some code with my code like colors, widgets etc.

    SingleChildScrollView(
    child: Column(
      children: [
        Container(color: Colors.white, height: 40),
        //   getAppBarMediBot(),
        const SizedBox(height: 10),
        Card(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                const ListTile(
                  leading: Icon(Icons.medical_services, size: 50),
                  title: Text('Medibot Box 1255'),
                  subtitle: Row(
                    children: [
                      Text('Connected',
                          style: TextStyle(color: Colors.green)),
                      SizedBox(width: 10),
                      Icon(Icons.battery_full, color: Colors.green),
                      Text('99%'),
                    ],
                  ),
                ),
                const SizedBox(height: 20),
                ListView.builder(
                  shrinkWrap: true,
                  physics: BouncingScrollPhysics(),
                  itemCount: 50,
                  itemBuilder: (BuildContext context, int index) {
                    return InkWell(child: Text("msg $index"));
                  },
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),

    Result Screen-> image

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

Back To Top
Search