How to scroll individual page when we use tabbar in flutter?

Issue

I want to make scrollable page in flutter when we use Tabbar in flutter.
I tried this code but this is not working.
In this code my whole listview I cannot see. How to display whole listview items while using tabbar.

So, how can I solve this problem.

Widget _listofitem() {
    return Container(
      margin: EdgeInsets.only(top: 10.0),
      padding: EdgeInsets.all(8.0),
      child: ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: categoryDetail.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(8.0),
            width: MediaQuery.of(context).size.width,
            height: 100.0,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.cyanAccent),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Center(
                  child: SizedBox(
                    height: 20,
                    width: 20,
                    // child: NetworkImage(categoryDetail[index]),
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                Text(categoryDetail[index]['category_name'].toString()),
              ],
            ),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: Text(
            'Invitation Card Application',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.cyan,
          centerTitle: true,
          bottom: TabBar(
            tabs: myTabs,
            controller: _tabController,
          )
        ),
        body: TabBarView(
          controller: _tabController,
          children: myTabs.map((Tab tab) {
            return Center(
              child: Stack(
                children: <Widget>[
                  _listofitem(),
                  // _ofitem()
                ],
              ),
            );
          }).toList(), 
        ));
  }

I want to change page on individual tab click and also do scroll in that individual page. So I display whole my page. What is the solution for it.

Solution

In the ListView.builder() widget you have set the property,

shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

This is preventing the scroll on the list view. If you want to wrap the list view inside the container with the above properties, then wrap the container in the SingleChildScrollView widget.

SingleChildScrollView(
      child: Container(), 
);

By this, you can have the scroll effect and you will be able to see all the list view items

Answered By – Shubham Jain

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *