如何将 Flutter Chip 小部件的顶部和底部边距设置为零？

Question

如何将 Flutter Chip 小部件的顶部和底部边距设置为零？

所以我可以得到这个

而不是这个

Answer 1

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap在Chip小部件中设置。

例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Wrap(
          children: <Widget>[
            for(final i in List.generate(20, (i) => i))
            Chip(
              avatar: Icon(Icons.account_circle),
              label: Text("Chip $i"),
              deleteIcon: Icon(Icons.cancel),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

正如已接受的答案所暗示的那样，设置materialTapTargetSize: MaterialTapTargetSize.shrinkWrap并将列表放置Chip在内部Wrap不仅会丢弃顶部和底部边距，还会丢弃左侧和右侧边距。

因此，如果有人想在两个筹码之间留出一些余量，他可以spacing在内部使用Wrap

Wrap(
  spacing: 3.0, // spacing between adjacent chips
  runSpacing: 0.0, // spacing between lines
  children: [
    Chip(
      label: Text("Chip 1"),   
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
    Chip(         
      label: Text("Chip 2"),       
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
     ......
     ......
  ],
);