How can I add a Widget that is at the bottom of the page and Scrollable with ListView?

Question

I have a ListView that builds out multiple Cards, and under them, I want to add a single Text widget that is under the ListView but is located at the bottom of the page which means you have to scroll down past the last card to see it.

   Widget _buildCardList() {
    return ListView.builder(
      itemBuilder: _buildFoodCards,
      itemCount: cardList.length,
    );
  }

   @override
  Widget build(BuildContext context) {
    return Container(
      // constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xff170422), Color(0xff9B22E6)],
          stops: [0.75, 1],
        ),
      ),
      child: Column(
        children: <Widget>[
          Expanded(child: _buildCardList()),
          Text(
            'TEXT THAT SHOULD BE SCROLLABLE UNDER THE LISTVIEW',
            style: TextStyle(color: Colors.white),
          )
        ],
      ),
    );
  }

I have Text that is under the ListView at the moment, but the Text is static on the page and isn't scrollable with the ListView.

how it looks right now

what exactly you want as output ? please add image or more information. — Viren V Varasadiya, Jun 27 '19 at 04:27

score 2 · Accepted Answer · answered Jun 27 '19 at 04:28

Just a few changes to make it works:

set shrinkWrap= true to your ListView.
set physics = NeverScrollableScrollPhysics to your ListView.
add SingleChildScrollView as a parent of your Column.
remove the Expanded widget.

Code


  Widget _buildCardList() {
    return ListView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemBuilder: _buildFoodCards,
      itemCount: cardList.length,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xff170422), Color(0xff9B22E6)],
          stops: [0.75, 1],
        ),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _buildCardList(),
            Text(
              'TEXT THAT SHOULD BE SCROLLABLE UNDER THE LISTVIEW',
              style: TextStyle(color: Colors.white),
            )
          ],
        ),
      ),
    );
  }

Hope it helps :)

How can I add a Widget that is at the bottom of the page and Scrollable with ListView?

1 Answers1