Switch Icons Of Floating Action Button Onpressed Flutter Android

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

we will learn how to switch between two icons when you press on the FloatingActionButton., In the onPressed() function of floatingActionButton, we shall write a logic to switch between the Icons.,

Switch Icons Of Floating Action Button Onpressed Flutter Android

Switch Icons Of Floating Action Button Onpressed

we shall take an Icon variable named fab with some initial value. When you click on the floatingActionButton, onPressed() function is triggered. In there, we are assigning fab with the other Icon, based on the value of a fabIconNumber variable. We are are using fabIconNumber for storing the state of floatingActionButton, something like which Icon it is currently displaying.

You can write your own login and switch between as many number of Icons as required. Just wrap the logic around setState(){} in onPressed() of floatingActionButton.

Complete COde For Switch Icons Of Floating Action Button Onpressed In Flutter
main.dart
 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Icon fab = Icon(
    Icons.refresh,
  );

  int fabIconNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.lightGreen,
        title: new Text("Switch Icon"),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.lightGreen,
        child: fab,
        onPressed: () => setState(() {
          if (fabIconNumber == 0) {
            fab = Icon(
              Icons.stop,
            );
            fabIconNumber = 1;
          } else {
            fab = Icon(Icons.star);
            fabIconNumber = 0;
          }
        }),
      ),
    );
  }
}

Related Post