Show counter to number of elements hidden when overflow occurs in flutter row widget

Question

Can anyone please help to implement this feature of Gmail that shows the counter to number of emails hidden when the email list becomes large ? I want to implement this in row widget where instead of being scrollable extra elements count is shown when overflow occurs.Gmail shows +15 counter for hidden emails

Answer 1

I was Curious to give a try to achieve the same effect, as asked.

Just in case, If anyone want a start for writing a custom one, then below code may help.

Here is my Code, Feel free to give any suggestions, (For Now delete button in chips is not working bcoz of some logic problem, I will make it work another day)

import 'package:flutter/material.dart';

class Demo3 extends StatefulWidget {
  @override
  _Demo3State createState() => _Demo3State();
}

class _Demo3State extends State<Demo3> {
  String temp = "";
  bool showChips = false;
  List<Widget> chipsList = new List();
  TextEditingController textEditingController = new TextEditingController();
  final _focusNode = FocusNode();
  int countChipsToDeleteLater = 0;

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      print("Has focus: ${_focusNode.hasFocus}");
      if (!_focusNode.hasFocus) {
        showChips = false;
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: new Container(
          height: 500,
          child: new Center(
            child: Container(
              width: 300,
              child: !showChips
                  ? Row(
                      children: [
                        buildTextField(),
                        showNumberWidgetIfAny(),
                      ],
                    )
                  : Center(
                      child: Wrap(
                        children: [
                          Wrap(
                            children: buildChips(),
                          ),
                          buildTextField(),
                        ],
                      ),
                    ),
            ),
          ),
        ),
      ),
    );
  }

  buildChips() {
    return chipsList;
  }

  buildTextField() {
    return Container(
      width: 200,
      child: new TextField(
        showCursor: true,
        focusNode: _focusNode,
        autofocus: true,
        cursorColor: Colors.black,
        style: new TextStyle(fontSize: 22.0, color: Colors.black),
        controller: textEditingController,
        // decoration: InputDecoration.collapsed(
        //   hintText: "",
        // ),
        onChanged: (value) {
          if (value.contains(" ")) {
            checkWhatToStoreInChips(value, countChipsToDeleteLater);
            textEditingController.clear();
            setState(() {
              showChips = true;
            });
            countChipsToDeleteLater++;
          }
        },
      ),
    );
  }

  checkWhatToStoreInChips(String val, int chipsIndex) {
    temp = "";
    for (int i = 0; i < val.length; i++) {
      if (val[i] == " ") {
        break;
      }
      temp = temp + val[i];
    }
    addToChips(temp, chipsIndex);
  }

  addToChips(String tmp, int chipsIndex) {
    chipsList.add(Chip(
      // onDeleted: () {
      //   if (chipsList.length == 0) {
      //     countChipsToDeleteLater = 0;
      //   }
      //   chipsList.removeAt(chipsIndex);
      //   print(chipsList.length);
      //   print(chipsIndex);
      //   setState(() {});
      // },
      avatar: CircleAvatar(
        backgroundColor: Colors.grey.shade800,
        child: Text(tmp[0]),
      ),
      label: Text(temp),
    ));
  }

  showNumberWidgetIfAny() {
    int len = chipsList.length;
    if (len >= 1) {
      return GestureDetector(
        onTap: () {
          showChips = true;
          setState(() {});
        },
        child: new Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue,
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: new Text(
              "${chipsList.length.toString()} ",
              style: new TextStyle(color: Colors.white, fontSize: 22),
            ),
          ),
        ),
      );
    }
    return Container();
  }
}

How it works:

1. Write something in text field, then press space, showChips boolean will become true
2. onChanged will detect the space and will send the string to a function.
3. That function will extract the string before space and then will add the string to a chip,
4. Finally the chip will be added to a chipslist.
5. We will have a boolean variable to check if the textfield is in focus and when to show the textfield and numberwidget (a widget which will keep count of the total chips, same like you asked in your question) or when to show the chipslist and textfield wraped in a wrap widget.
6. You can play around by changing the decoration of textfield to collapsed, to it look like the same as gmail.

Check this package, if you want to use custom package for ease.

Answer 2

I was facing a similar issue. I found a way to implement the Overflow count text. Sample image You basically have to paint the overflow text, and get its width like below

final TextPainter textPainter = TextPainter(
  text: TextSpan(text: text, style: style),
  textDirection: TextDirection.ltr,
  textScaleFactor: WidgetsBinding.instance.window.textScaleFactor,
)..layout();

var textSize = textPainter.size;
textSize.width;

Then subtract that from the width available. Lets call it x. Then create a sum of width for each row item(using TextPainter.layout() method mentioned above), till its value is less than x. This way you'll know how many items can be shown in the row.

I have created a Flutter library to help with this.