How to adjust the size of a chip in flutter

Question

I want to display a large number of chips in my view with text inside it. Since the count is big I want to decrease the size of the chip to the minimum. Specifically the height of the chip. How can this be done?

for (EPDiaryTarget target in widget.item.targetList) {
    Chip chip = new Chip(
      label: new Text(
        target.name,
        overflow: TextOverflow.ellipsis,
        style: new TextStyle(color: Colors.white),
      ),
      backgroundColor: const Color(0xFFa3bdc4),
    );
    studentsChips.add(chip);
  }

I've given padding: new EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 0.0), for the chip but its default size is not reduced. Can a custom shape with required size be given to a chip? If so, How can it be done? Thanks in advance folks.

Answer 1

You can wrap the chip in a Transform widget and scale it as follows:

    Transform(
      transform: new Matrix4.identity()..scale(0.8),
      child: new Chip(
        label: new Text(
          "Chip",
          overflow: TextOverflow.ellipsis,
          style: new TextStyle(color: Colors.white),
        ),
        backgroundColor: const Color(0xFFa3bdc4),
      ),
    ),

Answer 2

Wrap label: Text('chip') in Container or SizedBox.

Chip(
    label: Container(
        width: 100,
        height: 40,
        child: Text('chip'),
    ),
)

Answer 3

You need to set materialTapTargetSize. Default value is MaterialTapTargetSize.padded, which sets minHeight of 48px for the chip. Set it to MaterialTapTargetSize.shrinkWrap to remove the extra space.

Chip( ..., materialTapTargetSize: MaterialTapTargetSize.shrinkWrap )

Answer 4

Now you can use VisualDensity (https://api.flutter.dev/flutter/material/VisualDensity-class.html) which is a double that can be between -4 and 4 ([VisualDensity.minimumDensity], [VisualDensity.maximumDensity])