how can i change color of these iconbuttons by pressing it, please help me and show me whole code for it, Thanks
CodePudding user response:
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?
CodePudding user response:
IconButton in flutter has a color
variable you can set as here:
IconButton(
color: Colors.green,
icon: Icon(Icons.camera),
onPressed: () {},
)
CodePudding user response:
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.
CodePudding user response:
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 :)