How to adjust the size of a chip in flutter

问题:

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.

回答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),
      ),
    ),

回答2:

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 )

回答3:

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

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

回答4:

Perhaps to use badge plugin: https://pub.dev/packages/badges#-example-tab-

It is not native widget from flutter. But it address the size issue here.

回答5:

to set labelPadding: EdgeInsets.fromLTRB(0, -6, 0, -6)