Flutter Material Chips Example

Material Chips are one of the components which are used to make the choice filters, actions, and display the selectable options. In this article, it’s been discussed how to implement the very basic selectable material chips for the filtering of the options




import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Chips',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      home: ChipsDemo(),
      // MyHomePage(title: 'Flutter Api Call'),

class ChipsDemo extends StatefulWidget {
  const ChipsDemo({Key key}) : super(key: key);
  _ChipsDemoState createState() => _ChipsDemoState();

class _ChipsDemoState extends State<ChipsDemo> {
  var thumbType=["हिन्दी", "ગુજરાતી", "ENGLISH", "मराठी", "தமிழ் (Tamil)",
    "తెలుగు (Telugu)", "ಕನ್ನಡ (Kannada)", "বাংলা (Bengali)", "संस्कृत"];
  List<bool> selectedList=[];
  List<String> selectedLanguage=[];
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,
        title: Text("Material Chips"),
      body: Wrap(
        children: [
          for(int i=0;i<thumbType.length;i++) _listItem(i)
  Widget _listItem(int i) {
    return Container(
      margin: EdgeInsets.only(left: 6,right: 6,top: 3,bottom: 3),
      child: FilterChip(
        label: Text(thumbType[i]),
        selected: selectedList[i],
        onSelected: (bool value) {
          setState(() {
            //get selected language
            debugPrint("selected Language :  $selectedLanguage");


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories