Posted By
Bajarangi soft ,
Posted On 06-11-2020
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;
}
}),
),
);
}
}