Flutter Chips Example

  • Post author:
  • Post category:Chips

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);
  ChipsExampleState createState() {
    return ChipsExampleState();
class ChipsExampleState extends State<ChipsExample> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      body: Column(
        children: <Widget>[
            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()),
            label: const Text("Action Chip"),
            onPressed: () {},
            pressElevation: 4.0,
            avatar: const CircleAvatar(child: FlutterLogo()),


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


Download code here.
Follow code author here.