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

Issue

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

Solution

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 🙂

Answered By – diegoveloper

Answer Checked By – Pedro (FlutterFixes Volunteer)