NiithDZ
NiithDZ

Reputation: 23

Flutter SingleChildScrollView not working on a ListView

I have an activity which containts a text widget and below it there is a listView.builder widget. But scrollView is not working for the listView, when I try to scroll and I press on the sides of the screen, it works, but if I press on the listview (or an item) and try to scroll, it doesnt work! if you see the code below I made padding kind of big(25) so I can scroll when I press on the sides. I tried many solutions.

class _RnvState extends State<Rnv> {
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return MaterialApp(
  home: Scaffold(
    body: SingleChildScrollView(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/index.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: Padding(
          padding: EdgeInsets.all(25),
          child: Column(
            children: <Widget>[
              Text(
                'Your meetings:',
                style: TextStyle(
                  fontSize: 24,
                  wordSpacing: 2,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Rdv(),
            ],
          ),
        ),
      ),
    ),
  ),
);
}
}

Rdv widget:

 class Rdv extends StatefulWidget {
  @override
 _RdvState createState() => _RdvState();
 }

class _RdvState extends State<Rdv> {
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;

return  ListView.builder(
    shrinkWrap: true,
    itemBuilder: (context, index) {
      return InkWell(
        onTap: () {},
        child: Container(
          width: size.width - (size.width * 0.2),
          child: Card(
            color: Colors.blueGrey[600].withOpacity(0.7),
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          '${myList[index]['name']}',
                          overflow: TextOverflow.visible,
                          maxLines: 2,
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 2,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(
                          height: size.height - (size.height * 0.99),
                        ),
                        Text(
                          '${myList[index]['specialite']}',
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(
                          height: size.height - (size.height * 0.99),
                        ),
                        Text(
                          '${myList[index]['ville']}',
                          style: TextStyle(
                              fontSize: 20,
                              color: Colors.amber[200],
                              fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        '${myList[index]['date']}',
                        style: TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        '${myList[index]['heur']}',
                        style: TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    },
    itemCount: myList.length,
  );
}
}

Upvotes: 0

Views: 444

Answers (2)

NiithDZ
NiithDZ

Reputation: 23

I found a solution on how to fix the problem, by adding primary: false, property inside the ListView.builder widget, so now it looks somthing like this:

return Container(
  child: ListView.builder(
    primary: false,
    shrinkWrap: true,
    itemBuilder: (context, index) {
      return InkWell(

Upvotes: 2

Antonin GAVREL
Antonin GAVREL

Reputation: 11219

You can add this property to your SingleChildScrollview:

Scroll physics that does not allow the user to scroll.

NeverScrollableScrollPhysics

physics: NeverScrollableScrollPhysics()

edit: You can also take a look at this solution where you map each of your list items:

Column(
  children: <Widget>[
    ...itemList.map((item) {
       return Text(item);
    }).toList(),
  ],
),

Upvotes: 0

Related Questions