Blog

A simple Flutter Chips Example.

Example 1: ActionChip Example

This example will comprise the following files:

• ChipsExample.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No extenal dependencies are needed for this project.

Step 4: Write Dart Code

Write your code as follows:

*(a). ChipsExample.dart

Create a file Dart named ChipsExample.dart

Here is the full code

import 'package:flutter/material.dart';
class ChipsExample extends StatefulWidget {
  final String title;
  const ChipsExample(this.title);
  @override
  ChipsExampleState createState() {
    return ChipsExampleState();
  }
}
class ChipsExampleState extends State<ChipsExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Chip(
            label: const Text("Simple Chip"),
            //This mode has anti-aliased clipping edges to achieve a smoother look.
            clipBehavior: Clip.antiAlias,
            deleteIcon: const Icon(Icons.remove),
            onDeleted: () {},
            materialTapTargetSize: MaterialTapTargetSize.padded,
            avatar: const CircleAvatar(child: FlutterLogo()),
          ),
          ActionChip(
            label: const Text("Action Chip"),
            onPressed: () {},
            pressElevation: 4.0,
            avatar: const CircleAvatar(child: FlutterLogo()),
          )
        ],
      ),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.