Implementing Chips Action Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

Action chips are a set of options which trigger an action related to primary content. Action chips should appear dynamically and contextually in a UI.Action chips can be tapped to trigger an action or show progress and confirmation. They cannot be disabled; if the action is not applicable, the chip should not be included in the interface. (This contrasts with buttons, where unavailable choices are usually represented as disabled controls.)Action chips are displayed after primary content, such as below a card or persistently at the bottom of a screen.

Implementing Chips Action Using Flutter Android App

Implementing Chips Action
COmplete Code For Implementing Chips Action In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepOrange,
          title: Text("Flutter Chips"),
        ),
        body: MyHome(),
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ActionChip(
              avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: Text('A'),
              ),
              label: Text('Priyanshi'),
              onPressed: () {
                print("Chip 1 - Priyanshi");
              }
          ),

          ActionChip(
              avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: Text('C'),
              ),
              label: Text('Computer'),
              onPressed: () {
                print("Chip 2 - Computer");
              }
          ),

          ActionChip(
              avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: Text('A'),
              ),
              label: Text('Android'),
              onPressed: () {
                print("Chip 3 - Android");
              }
          ),

          ActionChip(
              avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: Text('I'),
              ),
              label: Text('iOS'),
              onPressed: () {
                print("Chip 4 - iOS");
              }
          ),
          ActionChip(
              avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: Text('F'),
              ),
              label: Text('Flutter'),
              onPressed: () {
                print("Chip 5 - Flutter");
              }
          ),

        ],
      ),
    );
  }
}

Related Post