Color change of button by pressing it - flutter

Question

how can i change color of these iconbuttons by pressing it, please help me and show me whole code for it,
Thanks

Answer 1

In setState you have to add boolean variable, for example changeColor = false;
Then in button :
color: changeColor ? Colors.grey : Colors.blue,
onPressed: () => setState(() => changeColor = !changeColor),
Flutter - How do I toggle the color of a RaisedButton upon click?

Answer 2

This is new method to change color,
there is youtube video for this Here and a article for this Article
ElevatedButton(
child: Text('Elevated Button'),
onPressed: () {
print('Pressed');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) return Colors.green;
return Colors.greenAccent;
},
),
),
)
You can change the background color of the ElevatedButton using MaterialStateProperty class. You can change the color of the button based on the states too. See the code snippet given below.

Answer 3

IconButton in flutter has a color variable you can set as here:
IconButton(
color: Colors.green,
icon: Icon(Icons.camera),
onPressed: () {},
)

Answer 4

This is the code that I would use:
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SingleChildScrollView(
child: Column(children: [
const Text(
'Choose Category',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
Row(children: [
CategoryButton(
svg: 'assets/candy.svg',
label: 'Tech',
selected: false,
),
CategoryButton(
svg: 'assets/candy.svg',
label: 'Finance',
selected: false,
),
CategoryButton(
svg: 'assets/candy.svg',
label: 'Design',
selected: false,
),
CategoryButton(
svg: 'assets/candy.svg',
label: 'File',
selected: false,
),
CategoryButton(
svg: 'assets/candy.svg',
label: 'Music',
selected: false,
),
])
]),
),
),
);
}
}
class CategoryButton extends StatefulWidget {
CategoryButton({
Key? key,
required this.svg,
required this.label,
required this.selected,
}) : super(key: key);
String svg;
String label;
bool selected;
#override
State<CategoryButton> createState() => _CategoryButtonState();
}
class _CategoryButtonState extends State<CategoryButton> {
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
widget.selected = !widget.selected;
});
print(widget.selected);
},
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: widget.selected ? Colors.blue : Colors.black,
borderRadius: BorderRadius.circular(90),
),
child: Column(
children: [
SvgPicture.asset(widget.svg,
color: widget.selected ? Colors.white : Colors.blue),
Text(
widget.label,
style: TextStyle(
color: Colors.white,
fontSize: 9,
fontWeight: FontWeight.w500,
),
),
],
)),
);
}
}
here you need to make sure to add flutter_svg to your pubspec.yaml file and have a folder for your assets and add that to your pubspec.yaml file as well
if you have any further questions just ask :)