How change the Icon of an IconButton when it is pressed
Solution 1
custom radio button (some IconButton in ListView that change their icons):
main.dart
file :
import 'package:flutter/material.dart';
import 'my_home_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
my_home_page.dart
file:
import 'package:flutter/material.dart';
int itemCount = 5;
List<bool> selected = new List<bool>();
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
initState() {
for (var i = 0; i < itemCount; i++) {
selected.add(false);
}
super.initState();
}
Icon firstIcon = Icon(
Icons.radio_button_on, // Icons.favorite
color: Colors.blueAccent, // Colors.red
size: 35,
);
Icon secondIcon = Icon(
Icons.radio_button_unchecked, // Icons.favorite_border
color: Colors.grey,
size: 35,
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView.builder(
itemCount: itemCount,
itemBuilder: (BuildContext context, int index) {
return IconButton(
icon: selected.elementAt(index) ? firstIcon : secondIcon,
onPressed: () {
try {
// your code that you want this IconButton do
setState(() {
selected[index] = !selected.elementAt(index);
});
print('tap on ${index + 1}th IconButton ( change to : ');
print(selected[index] ? 'active' : 'deactive' + ' )');
} catch (e) {
print(e);
}
},
);
}),
),
);
}
}
Solution 2
Copy paste the code and it will work :)
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
home: HomeApp(),
);
}
}
class HomeApp extends StatefulWidget {
@override
_HomeAppState createState() => _HomeAppState();
}
class _HomeAppState extends State<HomeApp> {
// Using a Bool
bool addFavorite = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App :)"),
),
body: Center(
child: IconButton(
icon: Icon(addFavorite ? Icons.favorite : Icons.favorite_border),
onPressed: () {
// Setting the state
setState(() {
addFavorite = !addFavorite;
});
}),
),
);
}
}
Updating the Code for ListView
class _HomeAppState extends State<HomeApp> {
// Using a Bool List for list view builder
List<bool> addFavorite = List<bool>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App :)"),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
// Setting a bool initially
addFavorite.add(false);
return IconButton(
icon: Icon(addFavorite.elementAt(index)
? Icons.favorite
: Icons.favorite_border),
onPressed: () {
// Setting the state
setState(() {
// Changing icon of specific index
addFavorite[index] =
addFavorite[index] == false ? true : false;
});
});
}),
);
}
}
Solution 3
the IconButton must be in StatefulWidget and use a flag for unselected icon and selected icon:
. . .
bool selected = false;
Icon first_icon = Icon(...);
Icon second_icon = Icon(...);
. . .
IconButton(
icon: selected
? first_icon
: second_icon,
onPressed: () {
try {
// your code that you want this IconButton do
setState(() {
selected = !selected;
});
} catch(e) {
print(e);
}
}),
for use in ListView:
. . .
List<bool> selected = new List<bool>();
Icon first_icon = Icon(...);
Icon second_icon = Icon(...);
. . .
ListView.builder(
controller: scrollController,
primary: true,
...
itemCount: _yourListViewLength,
itemBuilder: (BuildContext context, int i) {
selected.add(false);
IconButton(
icon: selected.elementAt(i)
? first_icon
: second_icon,
onPressed: () {
try {
// your code that you want this IconButton do
setState(() {
selected.elementAt(i) = !selected.elementAt(i);
});
} catch(e) {
print(e);
}
}),
},
)
i hope this help you
Rianou
I'm a young developer from 15. I would like to achieve my dream of creating my own application.
Updated on December 25, 2022Comments
-
Rianou over 1 year
I want to know how I can change the Icon of an IconButton when it is pressed. (Favorite_border to Favorite). I tried somethings but it doesn't works. Maybe it is easy but I am a beginner and I don't understand very well how it is works.
Update
import 'package:flutter/material.dart'; import 'package:cached_network_image/cached_network_image.dart'; import '../recyclerview/data.dart'; import 'package:watch/constants.dart'; int itemCount = item.length; List<bool> selected = new List<bool>(); class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override initState() { for (var i = 0; i < itemCount; i++) { selected.add(false); } super.initState(); } Icon notFavorite = Icon(Icons.favorite_border, size: 25,); Icon inFavorite = Icon(Icons.favorite, size: 25,); @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Accueil', style: kAppBarStyle,), //backgroundColor: Colors.white, elevation: 0, ), body: ListView.builder( itemCount: itemCount, itemBuilder: (BuildContext context, int index) { return Container( child: new Row( children: <Widget>[ //Image new Container( margin: new EdgeInsets.all(5.0), child: new CachedNetworkImage( imageUrl: item[index].imageURL, height: MediaQuery.of(context).size.width / 4, width: MediaQuery.of(context).size.width / 2, fit: BoxFit.cover, ), ), //Text Expanded( child: new Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: <Widget>[ Spacer(), //Titre Container( padding: const EdgeInsets.only(bottom: 75.0, top: 10.0 ), child: Text( item[index].title, style: kItemTitle, ), ), //Decription Container( padding: const EdgeInsets.only(left: 10.0, top: 10.0), child:Text( item[index].description, style: kItemDescription, ), ), //Favoris Spacer(), GestureDetector( child: Container( padding: const EdgeInsets.only(right: 10.0, top: 3.0), child: selected.elementAt(index) ? inFavorite : notFavorite, ), onTap: () { setState(() { selected[index] = !selected.elementAt(index); }); }, ), ], ), ), ], ), ); } ) ); } }
It is a ListView with Images, Texts and the Favorite Button and it works fine.