How to set top and bottom margins of the Flutter Chip widget to zero?
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,
),
......
......
],
);
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,
),
],
),
),
);
}
}