一个横向的圆边小条，可以包含左中右三个组件。可以指定颜色、阴影色和点击事件。

相关组件

ChoiceChip ActionChip InputChip FilterChip RawChip

Chip的普通表现如下

【avatar】: 左侧组件 【Widget】
【label】: 中间组件 【Widget】
【padding】 : 内边距 【EdgeInsetsGeometry】
【labelPadding】: label边距 【EdgeInsetsGeometry】
image.png

  1. import 'package:flutter/material.dart';
  2. class CustomChip extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return Wrap(
  6.       spacing: 20,
  7.       children: <Widget>[
  8.         Chip(
  9.           avatar: Image.asset("assets/images/icon_head.png"),
  10.           label: Text("张风捷特烈"),
  11.           padding: EdgeInsets.all(5),
  12.           labelPadding: EdgeInsets.all(5),
  13.         ),
  14.         Chip(
  15.           avatar: CircleAvatar(
  16.               backgroundImage:
  17.               AssetImage("assets/images/wy_200x300.jpg")),
  18.           label: Text("百里巫缨"),
  19.           padding: EdgeInsets.all(8),
  20.           labelPadding: EdgeInsets.all(6),
  21.         ),
  22.       ],
  23.     );
  24.   }
  25. }

可以设置颜色和阴影

【backgroundColor】: 背景色 【Color】
【shadowColor】: 阴影色 【Color】
【elevation】: 影深 【double】
image.png

import 'package:flutter/material.dart';
class ColorOfChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      children: <Widget>[
        Chip(
          avatar: Image.asset("assets/images/icon_head.png"),
          label: Text("张风捷特烈"),
          padding: EdgeInsets.all(5),
          labelPadding: EdgeInsets.all(5),
          backgroundColor: Colors.grey.withAlpha(66),
          shadowColor: Colors.orangeAccent,
          elevation: 3,
        ),
        Chip(
          avatar: Image.asset("assets/images/icon_head.png"),
          label: Text("张风捷特烈"),
          padding: EdgeInsets.all(5),
          labelPadding: EdgeInsets.all(5),
          backgroundColor: Colors.cyanAccent.withAlpha(11),
          shadowColor: Colors.blue.withAlpha(88),
          elevation: 4,
        ),
      ],
    );
  }
}

可以设置右侧点击按钮

【deleteIcon】: 右侧组件(通常为Icon) 【Widget】
【deleteIconColor】: 右侧组件颜色 【Color】
【onDeleted】: 右侧组件点击事件 【Function】
14.gif

import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class DeleteOfChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Chip(
      avatar: Image.asset("assets/images/icon_head.png"),
      label: Text("张风捷特烈"),
      padding: EdgeInsets.all(5),
      labelPadding: EdgeInsets.all(3),
      backgroundColor: Colors.grey.withAlpha(66),
      shadowColor: Colors.orangeAccent,
//      deleteIcon: Icon(Icons.close,size: 18),
      deleteIconColor: Colors.red,
      onDeleted: () => DialogAbout.show(context),
      elevation: 3,
    );
  }
}