I am trying to change the colour of an icon so black so that it matches the rest of the text.
I use the following statement to determine which icon to use based on the theme:
class ChangeThemeButtonWidget extends StatelessWidget {
const ChangeThemeButtonWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Provider.of<ThemeProvider>(context).isDarkMode
? dark_mode_icon()
: Icons.light_mode),
onPressed: () {
final provider = Provider.of<ThemeProvider>(context, listen: false);
provider.toggleTheme(!provider.isDarkMode);
},
);
}
And
IconData dark_mode_icon() {
//return IconData(0xe37a, fontFamily: 'MaterialIcons');
IconData dark_mode_i = IconData(Icons.dark_mode, color: Colors.black);
return dark_mode_i;
}
My issue is that this returns the error "The argument type 'IconData' can't be assigned to the parameter type 'int'."
How can I edit the style of this icon so that it will change the color correctly?
Many thanks for the help
You are applying color on wrong place. IconData is just widget that describes Icon based on font data. It has nothing to do with color. You have to put those IconData into Icon widget and change color there.
class ChangeThemeButtonWidget extends StatelessWidget {
const ChangeThemeButtonWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Provider.of<ThemeProvider>(context).isDarkMode
? Icons.dark_mode
: Icons.light_mode,
color: #HERE
),
onPressed: () {
final provider = Provider.of<ThemeProvider>(context, listen: false);
provider.toggleTheme(!provider.isDarkMode);
},
);
}
Simply use this code:
IconButton(
onPressed: () {},
color: Colors.blue,
iconSize: 100,
icon: Icon(
Icons.train,
),
)
That is how you can apply color to the iconbutton.
Icons.darkmode is the icon data. IconData() will take an integer so yiu have to write IconData(Icons.darkmode.codePoint)
Related
i have GridView where there is 40 buttons, that's one of them:
MyCalcButton(
//clr: Colors.amber
myNum: "2",
funkcja: () {},
),
In my button class there are 2 required parameters, myNum and funkcja and one unrequired - > clr:. Now i want to change value (color) of this clr parameter some of those buttons, not every. Is there a way to assign this color to some of these and give rest of them one static color? Is it necessary to give one by one color for this clr ??
There is class of this button
String myNum = "";
class MyCalcButton extends StatefulWidget {
const MyCalcButton({Key? key, this.myNum, required this.funkcja, this.clr})
: super(key: key);
final Function funkcja;
final myNum;
final Color? clr;
#override
State<MyCalcButton> createState() => _MyCalcButtonState();
}
class _MyCalcButtonState extends State<MyCalcButton> {
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
widget.funkcja();
},
style: ElevatedButton.styleFrom(
//maybe here i can change something to do this?? I dont know
primary: const Color.fromARGB(255, 195, 204, 203),
),
child: Center(
child: Text(
widget.myNum.toString(),
)),
);
}
}
You can provide default value on parameter, in your case on clr
class MyCalcButton extends StatefulWidget {
const MyCalcButton({
Key? key,
this.myNum,
required this.funkcja,
this.clr =const Color.fromARGB(255, 195, 204, 203),
}) : super(key: key);
and use this like primary: widget.clr,.
Or just provide default value on null clr case like
primary: widget.clr ?? const Color.fromARGB(255, 195, 204, 203),
If you like to update color within this state. you can create a local variable inside state class.
class _MyCalcButtonState extends State<MyCalcButton> {
late Color? color = widget.clr;
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
widget.funkcja();
},
style: ElevatedButton.styleFrom(
primary: color,
),
child: Center(
child: Text(
widget.myNum.toString(),
)),
);
}
}
I need to change implement custom Icons for default button and drawer button for all pages in my project.
I know we have the option of using leading property, however, this only affects that certain page.
How can we change the default back button and open drawer button of AppBar in Flutter for the whole app?
Unfortunately, there is not a property called defaultBackButton or defaultDrawerButton.
So, in order to change these defaults in the whole app, we can create a CustomAppBar which and set Icons as we wish.
Please click here to see Demo on DartPad and test it yourself.
For a bit longer description, checkout my Medium story.
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final Widget? leading;
final Widget? title;
final bool? centerTitle;
final bool automaticallyImplyLeading;
const CustomAppBar({
Key? key,
this.leading,
this.title,
this.centerTitle,
this.automaticallyImplyLeading = true,
}) : super(key: key);
#override
Widget build(BuildContext context) {
/// This part is copied from AppBar class
final ScaffoldState? scaffold = Scaffold.maybeOf(context);
final bool hasDrawer = scaffold?.hasDrawer ?? false;
final ModalRoute<dynamic>? parentRoute = ModalRoute.of(context);
final bool canPop = parentRoute?.canPop ?? false;
Widget? leadingIcon = leading;
if (leadingIcon == null && automaticallyImplyLeading) {
if (hasDrawer) {
leadingIcon = IconButton(
icon: const Icon(Icons.mood_sharp, color: Colors.yellowAccent),
onPressed: () => Scaffold.of(context).openDrawer(),
);
} else {
if (canPop) {
leadingIcon = IconButton(
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(
Icons.sentiment_dissatisfied_sharp,
color: Colors.red,
),
);
}
}
}
return AppBar(
leading: leadingIcon,
title: title,
centerTitle: centerTitle,
);
}
#override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
I am making a camera app with a button that will be able to turn the flash on and off.
When the flash is not on I would like for the flash_off icon to be displayed.
However, my problem is trying to make the flash turn on and the icon change to flash_auto when the flash icon is pressed. I tried doing something which you can see down below, but I am still new to Flutter and learning the syntax so I do not think it is right.
I also declared the flash variable as a static bool because it would not allow me to declare it as a regular boolean, "static bool flash = false"
const IconButton(
padding: EdgeInsets.only(right: 30), // right 30
onPressed: null,
icon: Icon(
flash ? Icons.flash_on : Icons.flash_off,
color: Colors.white,
),
iconSize: 50,
onPressed: () {
setState(() {
flash = !flash;
flash ? _cameraController.setFlashMode(FlashMode.off);
});
//flash?_cameraController.setFlashMode(FlashMode.torch) :
}),
),
Because you want three options for icons you can't use a simple true/false check, you'll need an array.
import 'package:flutter/material.dart';
class FlashPage extends StatefulWidget {
const FlashPage({Key? key}) : super(key: key);
#override
State<FlashPage> createState() => _FlashPageState();
}
class _FlashPageState extends State<FlashPage> {
int flashStatus = 0;
List<Icon> flash = [
Icon(Icons.flash_on),
Icon(Icons.flash_off),
Icon(Icons.flash_auto)
];
List<FlashMode> flashMode = [
FlashMode.always,
FlashMode.off,
FlashMode.auto
];
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flash demo',
home: Scaffold(
body: Center(
child: IconButton(
icon: flash[flashStatus],
onPressed: () {
setState(() {
flashStatus = (flashStatus + 1) % 3;
_cameraController.setFlashMode(flashMode[flashStatus]);
});
}),
),
),
);
}
}
I am trying to refactor my code. This is my Code ,I am getting Problem
import 'package:flutter/material.dart';
class AppBarButton extends StatelessWidget {
const AppBarButton(
{Key? key,
required this.buttnoAction,
this.buttonColor = Colors.grey[300], // the error getting is " The default value of an optional parameter must be constant. "
required this.iconLogo,
this.iconSize = 15,})
: super(key: key);
final void Function() buttnoAction;
final Color buttonColor;
final IconData iconLogo;
final double iconSize;
#override
Widget build(BuildContext context) {
return Container(
child: IconButton(
onPressed: buttnoAction,
icon: Icon(
iconLogo,
color: buttonColor,
size: iconSize,
),
),
);
}
}
Here I don't get an error while using Colors.grey but can't use Colors.grey[300] how to fix this.
why I am getting this error
Not entirely sure but it is probably because Colors.grey is a const (a constant) and Colors.grey[300] is not a const and therefore not accepted as default value of an optional parameter.
If you still want to use Colors.grey[300] as default value, you need to make it a const, this can be done by using the corresponding color code:
const Color(0xFFE0E0E0)
so change this
this.buttonColor = Colors.grey[300],
into this
this.buttonColor = const Color(0xFFE0E0E0),
Try this.
this.buttonColor = Colors.grey,
or,
this.buttonColor =Color(0xFFE0E0E0) //This is equal to grey[w300]
for more details https://dart.dev/tools/diagnostic-messages#non_constant_default_value
I working creating a favorite page. For each Product Page, I place on app bar a favorite icon that suppose to change and add the specific product to the favorites of the user.
I am failing to change the state of the icon after pressing it.
class FoodDetail extends StatefulWidget {
#override
_FoodDetail createState()=> _FoodDetail();
const FoodDetail({Key key}) : super(key: key);
}
class _FoodDetail extends State<FoodDetail>{
#override
Widget build(BuildContext context) {
FoodNotifier foodNotifier = Provider.of<FoodNotifier>(context);
_onFoodDeleted(Food food) {
Navigator.pop(context);
foodNotifier.deleteFood(food);
}
final _saved = Set<BuildContext>();
final alreadySaved = _saved.contains(context);
return Scaffold(
appBar: AppBar(
title: Text(foodNotifier.currentFood.name),
actions: <Widget>[
// action button
new IconButton(
icon: alreadySaved ? Icon(Icons.star) : Icon(Icons.star_border),
color: alreadySaved ? Colors.yellow[500] : null,
onPressed: (){
setState(() {
if (alreadySaved) {
_saved.remove(context);
} else {
_saved.add(context);
}
});}
Your states doesn't change because you're putting them inside the build method which always reinitialize them.
Put your states _saved, alreadySaved outside the build method.
final _saved = Set<BuildContext>();
final alreadySaved = _saved.contains(context);
#override
Widget build(BuildContext context) {
}