Listview shows overflow issue on right side

问题

I have below code to display 2 cards and trying to have horizontal movement. Listview is already in place. Axis direction is horizontal.

Still there is overflow issue in right side. Also tried shrink wrap but did not work.

Issue can be easily replicated on dart pad: https://dartpad.dartlang.org/dart? just copy the below code.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: HomeScreen()),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Container(
      margin: EdgeInsets.symmetric(horizontal: 10),
      width: double.infinity,
      child: Column(
        children: [
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Text("Text 1", style: TextStyle(fontWeight: FontWeight.bold)),
            Text("Text 2", style: TextStyle(fontWeight: FontWeight.bold))
          ]),
          ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Card(
                  child: Container(
                height: 230,
                width: 170,
                child: Column(
                  children: [
                    Container(
                      height: 170,
                      width: 150,
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage("assets/images/user.png"))),
                    )
                  ],
                ),
              ))
            ],
          )
        ],
      ),
    ));
  }
}

回答1:

You added column and row inside your listview and then added both cards into your row widget This is the wrong approach so you just need to separate this all first. So I change your code and added scrollDirection also wrap your listview with Container for giving height and margin. You can check following answer

First Answer

SafeArea(
            child: Container(
                height: 230,
                margin: EdgeInsets.symmetric(horizontal: 10),
                width: double.infinity,
                child: ListView(scrollDirection: Axis.horizontal, children: [
                  Card(
                      child: Container(
                    height: 230,
                    width: 170,
                    //color: Colors.blue,
                    child: Column(
                      children: [
                        Container(
                          height: 170,
                          width: 150,
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                      "https://cdn.searchenginejournal.com/wp-content/uploads/2018/09/shutterstock_1138149659-760x400.png"))),
                        )
                      ],
                    ),
                  )),
                  Card(
                      child: Container(
                    height: 230,
                    width: 180,
                    //color: Colors.blue,
                    child: Column(
                      children: [
                        Container(
                          height: 170,
                          width: 160,
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                      "https://cdn.searchenginejournal.com/wp-content/uploads/2018/09/shutterstock_1138149659-760x400.png"))),
                        )
                      ],
                    ),
                  ))
                ])))

Second Answer

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Container(
      margin: EdgeInsets.symmetric(horizontal: 10),
      width: double.infinity,
      child: Column(
        children: [
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Text("Text 1", style: TextStyle(fontWeight: FontWeight.bold)),
            Text("Text 2", style: TextStyle(fontWeight: FontWeight.bold))
          ]),
          Container(
            height: 230,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                Card(
                    child: Container(
                  height: 230,
                  width: 170,
                  child: Column(
                    children: [
                      Container(
                        height: 170,
                        width: 150,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: NetworkImage(
                                    "https://cdn.searchenginejournal.com/wp-content/uploads/2018/09/shutterstock_1138149659-760x400.png"))),
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),

        ],
      ),
    ));
  }
}

回答2:

you haven't provided direction parameter to ListView widget and also provide shrinkWrap property of ListView to true in order to constraint size of the listView, also you don't need container as a child of ListView after that so remove that too.

Final Code would be following :

body: SafeArea(
            child: ListView(
              scrollDirection: Axis.horizontal,
              shrinkWrap : true,
              children: [ 
              
              child: Column(children: [
                Row(children: [

来源：https://stackoverflow.com/questions/65912981/listview-shows-overflow-issue-on-right-side