How to add a 'show more' button, if chips exceed certain number

Question

I have a list of topics that is coming dynamically from the backend, and I'm using chips to display them, inside a Wrap. Now I want that, If these chips exceed say 3 lines, then we hide the other chips and show a See More button. I don't understand how this can be done since we have a Wrap widget.

Here's the code:

Wrap(
  children: [
    for (var shop in _viewModel.shops.types)
      Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 4.0,
        ),
        child: Chip(
          label: Text(
            shop.shopName,
          ),
          labelStyle: Theme.of(context).textTheme.headline6!.copyWith(
                color: AppColors.darkerGreyColor,
              ),
          backgroundColor: AppColors.textLightColor,
          shape: const StadiumBorder(
            side: BorderSide(
              color: Color(0xFFBDBDBD),
            ),
          ),
          padding: const EdgeInsets.all(
            AppSizes.p4,
          ),
        ),
      ),
  ],
);

Hers's the current result:

Appreciate any help. Thanks !!

Answer 1

You can do like this

import 'package:flutter/material.dart';

void main() {
  runApp(TestSc());
}

class TestSc extends StatefulWidget {
  const TestSc({Key? key}) : super(key: key);

  @override
  State<TestSc> createState() => _TestScState();
}

class _TestScState extends State<TestSc> {
  var list = [1, 2, 3, 4, 5, 6, 7];

  var listforui = [];

  int itemcounttoshow = 4;

  @override
  void initState() {
    listforui.addAll(list.getRange(0, itemcounttoshow));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Wrap(
          children: [
            for (var shop in listforui)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4.0),
                child: Chip(
                  label: Text(shop.toString()),
                  shape: const StadiumBorder(
                    side: BorderSide(
                      color: Color(0xFFBDBDBD),
                    ),
                  ),
                ),
              ),
            if (list.length > itemcounttoshow && listforui.length < list.length)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4.0),
                child: GestureDetector(
                  onTap: () => setState(
                      () => listforui.addAll(list.skip(itemcounttoshow))),
                  child: const Chip(
                    label: Text("ShowMore"),
                    shape: StadiumBorder(
                      side: BorderSide(
                        color: Color(0xFFBDBDBD),
                      ),
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

Here is result