How to set top and bottom margins of the Flutter Chip widget to zero?

Question

How can I set the top and bottom margins of the Flutter Chip widget to zero?

So I can get this

instead of this

Answer 1

set materialTapTargetSize: MaterialTapTargetSize.shrinkWrap in Chip widget.

Example:

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

As the accepted answer suggests, setting materialTapTargetSize: MaterialTapTargetSize.shrinkWrap and place the Chip list inside Wrap will discard not only top and bottom margin but also left and right margin.

So if someone wants to give some margin between two Chips he can use spacing inside 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,
    ),
     ......
     ......
  ],
);