flutterlayoutwidgetoverflow

Widgets in a Flutter row are too big that causes overflow horizontally


I'm having trouble figuring out how to layout the widgets in a row so that they won't overflow. I have a Column that contains a row taking all the space except a Card at bottom. Within the Row, I have a List View on the left and a fixed size widget on the right. That causes overflow horizontally. I tried to wrap the Row with a SingleChildScrollView but that didn't help. Here is my code snippet.

  import 'package: flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ' Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 getCard(int level){
    double indentation=5.0*level;
    return Padding(
      padding: EdgeInsets.only(left: indentation),
      child: Card(
        color: const Color(0xFFF5F5F5),
        child: ListTile(
          title: Text('List Item ${level + 1}'), //  title
          subtitle: Text('Description for List Item ${level + 1}'), //   subtitle
          dense: true,
        ),
      ),
    );
  }
  getListView(){
    return ListView.builder(
      itemCount: 25, // Number of items in the list
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap:(){
            setState(() {
             });
          },
          child: getCard(index),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
         child: Column(
           children: [
           Expanded(
             child: ListView(
               shrinkWrap: true,
               scrollDirection: Axis.horizontal,
               children: [
                getListView(),
                const SizedBox(width:2000,
                  child: Text("A widget with a large size width"),
                ),
               ],
             ),
           ),
           const Text("this needs to be at the bottom of the screen"),
          ],
        ),
      ),
     );
  }
}

Solution

  • There are several issues with your code.

    ListView.builder cannot be used with unbounded width or height. You need to define definite height for ListView.builder.

        getListView() {
            return Container(
             height: 200,
             width: 320
            child: ListView.builder(
              itemCount: 25, // Number of items in the list
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {});
                  },
                  child: getCard(index),
                );
              },
            );
           )
          }