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

Solution 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,
            ),
          ],
        ),
      ),
    );
  }
}

Solution 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,
    ),
     ......
     ......
  ],
);

Comments

[Kamlesh]

'deleteIcon' is not displayed in chip. any suggestion?

[Kamlesh]

Got it. Do not forget to add "deleteIconColor" and "onDeleted" attributes if you use deleteIcon property in Chip. Thanks.

[AlienKevin]

If you want to further reduce vertical padding, you can do visualDensity: VisualDensity.compact.