CODEWITHSUNDEEP
flutterdart
user13427040
user13427040

Reputation:

How to get the height of ListView.builder() widgets to be the height of the entire stack?

I have a ListView.builder() inside a column, and I would like to tell the LisView.builder to set the height according to the height of the widget that it will be returning from the builder method. How do I do that?

Upvotes: 3

Views: 5546

Answers (4)

Ju hyun Kim
Ju hyun Kim

Reputation: 1

final tabKey = GlobalKey();
  
showTabBar() 
{
    double? tabHeight;
    var detailTabs = <Widget>[
      Tab(),
    ];

    return StatefulBuilder(builder: (context, setState) {
      if (tabHeight == null) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          Future.delayed(Duration(milliseconds: 200)).then((_) {
            setState(() {
              tabHeight = tabKey.currentContext!.size!.height;
            });
          });
        });
      }
      return DefaultTabController(
          length: detailTabs.length,
          child: Column(
            children: [
              TabBar(
                tabs: detailTabs,
              ),
              Container(
                height: tabHeight ?? 3000,
                child: TabBarView(
                  children: [
                    showDetailTab(),
                  ],
                )
              ),
            ],
          )
      );
    });
}

showDetailTab() 
{
    return SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child:
      ListView(
        key: tabKey,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        children: [
          ...
        ],
      ),
    );
}

Upvotes: 0

Kyaw Phyoe Han
Kyaw Phyoe Han

Reputation: 21

You can use global key to get height of list view or column,

But the height can be fetched only after a build is completed


    //user gloabl key to get height of list view or column
    GlobalKey key = GlobalKey();
     
    SingleChildScrollView(
        child: Column(
          key: key,
          children: [...]
       )
       
       //here you can get widget height
           double totalWidgetHeight = key.currentContext!.size!.height;

Upvotes: 0

Jitesh Mohite
Jitesh Mohite

Reputation: 34210

I am not sure but looking at your question it looks like you want to render listview within the sizes which child widgets are taking For that we can assign mainAxisSize: MainAxisSize.min, to column and shrinkWrap: true to Listview.builder

class _MyHomePageState extends State<MyHomePage> {
  List<String> itemsList = [
    "item0",
    "item1",
    "item2",
    "item3",
    "item4",
    "item5"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView Sample"),
      ),
      body: Container(
        color: Colors.black54,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListView.builder(
              shrinkWrap: true,
                itemCount: itemsList.length,
                itemBuilder: (context, index) {
                  return Container(
                      child:
                      Align(
                        alignment: Alignment.centerRight,
                        child:Text(
                          itemsList[index],
                          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                        ),),
                      width: 100,
                      height: 20,
                      margin: EdgeInsets.only(bottom: 10),
                      color: Colors.red);
                }),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Rustem Kakimov
Rustem Kakimov

Reputation: 2671

Wrap your ListView in a SizedBox with some fixed height. Setting to children height is impractical since Flutter would have to check the size of every element in the list and calculate the maximum.

Upvotes: 1

Related Questions