Home > OS >  Flutter) I want to know how to apply the same scroll to the child widget list within ListView
Flutter) I want to know how to apply the same scroll to the child widget list within ListView

Time:05-24

(I revised the content a little bit, ExpansionTile => GridView)

I'm creating a ListView that includes many GridView widgets. The problem with this is that ListView has vertical scrolling, but it does not work with GridView Widget in ListView. Scrolls in ListView only work in empty space, not in the child widget's area.

            Container(
              height: size!.height * 0.6,
              padding: EdgeInsets.all(common_padding),
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey,
                  width: 0.7,
                ),
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
              child: ListView(
                children: [
                  // GridView.builder() .... // many widgets
                ]
             ),
           )

My code is briefly as above. How do I apply scrolling to the Children widget in List View?

CodePudding user response:

use shrinkWrap: true and physics: const NeverScrollableScrollPhysics(), for ListView.builder

Try this example:

import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 30,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, findex) {
          return ExpansionTile(
            key: Key(findex.toString()),
            title: const Text("title",
              style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold,color: Colors.black),
            ),
            children: [
              ListView.builder(
                itemCount: 10,
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, sindex) {
                  return const ListTile(
                    title: Text(
                      "user tierl",
                      style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold,color: Colors.black),
                    ),
                  );
                },
              ),
            ],
          );
        },
      ),
    );
  }
}

CodePudding user response:

I don't get what you mean by expansion widget but You should stack each item in the list one by one instead of packing all of it within one widget. For example, according to your code,

  MaterialApp(
      home: Scaffold(
        body: Container(
          height: double.infinity,
          padding: EdgeInsets.all(15),
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.grey,
              width: 0.7,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          child: ListView(children: [

//putting each item one by one
            Container(
              height: 500,
              color: Colors.blue,
            ),
            Container(
              height: 500,
              color: Colors.green,
            ),
            Container(
              height: 500,
              color: Colors.red,
            ),
            Container(
              height: 500,
              color: Colors.yellow,
            ),
          ]),
        ),
      ),
    );
  • Related