How use image asset as Icon in Flutter? - flutter

I want to use image asset for AnimatedIconItem in big_button_example.dart file in animated_icon_button flutter library. You can find the library on pub.dev. SimpleIcons is used for Icon. Original code is :
AnimatedIconItem(
icon: Icon(SimpleIcons.nasa, color: color),
backgroundColor: Colors.white,
),
I want to use image asset for icon variable. I tried these :
icon: ImageIcon(
AssetImage("images/icon.png"),
color: Color(0xFF3A5A98),
),
icon: Image.asset('assets/icon.png'),
icon: IconButton(
icon: Image.asset('assets/icon.png'),
),
But always I got error like The argument type 'ImageIcon' can't be assigned to the parameter type 'Icon'. How can I use image for Icon?

Try this:
class Menu {
const Menu({this.icon, this.title});
final ImageIcon icon;
final String title;
}
const List<Menu> menus = const <Menu>[
const Menu(
title: 'menu_icon_1',
icon:ImageIcon(
AssetImage('assets/menu/11.png')
),
),
];

Related

The getter 'product' isn't defined for the type 'Object - flutter -Modalroute.settings.arguments error

class DetailsScreen extends StatelessWidget {
static String routeName = "/details";
#override
Widget build(BuildContext context) {
final Object? arguments =
ModalRoute.of(context)!.settings.arguments != null;
var product;
return Scaffold(
backgroundColor: Color(0xFFF5F6F9),
appBar:AppBar(
backgroundColor: Colors.transparent,
leading: Padding(
padding: const EdgeInsets.only(left: 20.0,),
child: CircleAvatar(
backgroundColor: kPrimaryColor,
child: IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: (){
Navigator.pop(context);
},
),
),
),
leadingWidth: 70.0,
),
**body: Body(product: arguments.product),**
);
}
}
class ProductDetailsArguments {
late final Product product;
ProductDetailsArguments({required this.product});
}
I cant get the product details in the flutter android app and this shows a error in
body: Body(product: arguments.product),
Anyone please help I am stuck in this for a week now. Can't really get a solution ..
i have tried the body: Body(product: arguments?.product), and everything thats in the internet. I am new to flutter and this is far above my knowledge so I dont understand how it works correctly. The far I understand is that it is used to get the product name from the list from the item we touced in that product page.
You can do
final ProductDetailsArguments? arguments =
ModalRoute.of(context)?.settings.arguments as ProductDetailsArguments?;
And use the way you did
Body(product: arguments.product)
But if your Body product doesn't accept nullable data, do a null check and then pass the product
body: arguments?.product!=null ? Body(product: arguments.product) : Text("got null")

flutter 1.23.0-18.1pre BottomNavigationBar deprecated 'title' use 'label'

The title part is giving an error telling me that i should use label instead.
The Error is:
info: 'title' is deprecated and shouldn't be used. Use "label" instead, as it allows for an improved text-scaling experience. This feature was deprecated after v1.19.0.. (deprecated_member_use at lib/Screens/hostHomePage.dart:49)
Hopefully someone can help me out?
BottomNavigationBarItem _buildNavigationItem(
int index, IconData iconData, String text) {
return BottomNavigationBarItem(
icon: Icon(
iconData,
color: AppConstants.nonSelectedIconColor,
),
activeIcon: Icon(
iconData,
color: AppConstants.selectedIconColor,
),
title: Text(
text,
style: TextStyle(
color: _selectedIndex == index
? AppConstants.selectedIconColor
: AppConstants.nonSelectedIconColor,
),
),
);
}
As I see in the documents the things you are mentioning are correct and to have it working you must use label and pass a string to it. And remove the title parameter wherein you pass a widget.
BottomNavigationBarItem _buildNavigationItem(
int index, IconData iconData, String text) {
return BottomNavigationBarItem(
icon: Icon(
iconData,
color: AppConstants.nonSelectedIconColor,
),
activeIcon: Icon(
iconData,
color: AppConstants.selectedIconColor,
),
label: text
);
}
This code should work out for you instead of the one you are writing right now. :-).
link to the newer documentation

Flutter Undefined name 'context'. Try correcting the name to one that is defined, or defining the name

Any help please how do i pass the context in this class
error says: Undefined name 'context'. Try correcting the name to one that is defined, or defining the name.
when i pass the categories name as a string it works fine like the class below works great
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:domain/classes/localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// products categories
class Category {
int id;
String name;
Icon icon;
Color color;
Category(this.id, this.name, this.icon, this.color);
static List<Category> getCategories() {
return <Category>[
Category(0, 'All' ,Icon(Icons.border_all, size: 30.0,), Colors.red),
Category(1, 'Phones' ,Icon(Icons.phone_android, size: 30.0,), Colors.blue),
Category(2, 'Electronics', Icon(Icons.devices_other, size: 30.0,), Colors.lightBlue),
Category(3, 'Woman Fashions',Icon(MdiIcons.humanFemale, size: 30.0,), Colors.pink),
Category(4, 'Woman Accessories',Icon(MdiIcons.shoeHeel, size: 30.0,), Colors.pink),
Category(5, 'Man Fashions',Icon(MdiIcons.humanMale, size: 30.0,), Colors.brown),
Category(6, 'Man Accessories',Icon(MdiIcons.shoeFormal, size: 30.0,), Colors.brown),
Category(7, 'Baby Child', Icon(Icons.child_care, size: 30.0,), Colors.lightBlueAccent),
Category(8, 'Sports Outdoors', Icon(Icons.fitness_center, size: 30.0,), Colors.blueAccent),
Category(9, 'Gaming',Icon(Icons.videogame_asset, size: 30.0,), Colors.deepPurple),
Category(10, 'Home Appliances', Icon(Icons.home, size: 30.0,), Colors.green),
Category(11, 'Cars',Icon(Icons.directions_car, size: 30.0,), Colors.blueGrey),
Category(12, 'Auto Parts', Icon(MdiIcons.carBattery, size: 30.0,), Colors.blueGrey),
Category(13, 'Trucks Bus', Icon(Icons.local_shipping, size: 30.0,), Colors.blueGrey),
Category(14, 'Other Vehicles', Icon(Icons.directions_boat, size: 30.0,), Colors.blueGrey),
Category(15, 'Housing Sale', Icon(MdiIcons.homeGroup, size: 30.0,), Colors.black),
];
}
But i want to set the names of categories to be automatically translated and loaded based on user device language,
so when i call for the translated name from the localization class it gives me an error
Undefined name 'context'. Try correcting the name to one that is defined, or defining the name.
i dont know how to pass the context any help please
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:domain/classes/localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// products categories
class Category {
int id;
String name;
Icon icon;
Color color;
Category(this.id, this.name, this.icon, this.color);
static List<Category> getCategories() {
return <Category>[
Category(0, DemoLocalizations.of(context).allCategories ,Icon(Icons.border_all, size: 30.0,), Colors.red),
Category(1, DemoLocalizations.of(context).phones ,Icon(Icons.phone_android, size: 30.0,), Colors.blue),
Category(2, DemoLocalizations.of(context).electronics, Icon(Icons.devices_other, size: 30.0,), Colors.lightBlue),
];
}
}
Context is not a global variable.
Context can only be accessed in a build method, initState etc. inside a widget. So you need to take the context as an argument when creating your class and assign it to this.context.
class Category {
int id;
String name;
Icon icon;
Color color;
BuildContext context;
Category(this.id, this.name, this.icon, this.color, this.context);
static List<Category> getCategories() {
return <Category>[
Category(0, DemoLocalizations.of(context).allCategories ,Icon(Icons.border_all, size: 30.0,), Colors.red),
Category(1, DemoLocalizations.of(context).phones ,Icon(Icons.phone_android, size: 30.0,), Colors.blue),
Category(2, DemoLocalizations.of(context).electronics, Icon(Icons.devices_other, size: 30.0,), Colors.lightBlue),
];
}
}
And when calling pass the current widget's build context Category(..., context);
And when there are multiple properties it's more elegant to have them all as Category({#required this.id, #required this.name, ...} So that you'll know what you're passing when calling the constructor.
Also Note:
Passing context to widgets is bad practice. As #GenchiGenbutsu said in the comments.
Use state management instead like InheritedWidget, or packages like bloc, provider.

Little help here putting logic on icons

I have this list
final List<String> entries = <String>['Life', 'Car', 'Car'];
then i try to generate 3 widgets each one with an icon depending on the values that have the array i tried in this way
children:<Widget>[
Icon(
entries=='Life'? Icons.favorite_border:Icons.directions_car,
color: Colors.white,
textDirection: TextDirection.ltr,
size:50,
),
but all widgets get the favorite_border icon instead of mixing between directions_car and favorite_border.
entries is a list, you can't compare it with a String. Use map in entries list to generate it to a list of Icon.
List icons = [Icons.favorite_border, Icons.directions_car,...]
entries.map<Icon>((String entry) {
return Icon(
icons[entries.indexOf(entry)],
color: Colors.white,
textDirection: TextDirection.ltr,
size:50,
)
});
You can try to verify each item in your array. Like this below:
children: <Widget>[
...entries.map(
(icon) => Icon(
icon == 'Life' ? Icons.favorite_border : Icons.directions_car,
),
)
],

I am receiving "Invalid constant value" when trying to add a styling theme to title in BottomNavigationBarItem

I am adding a theme to the title in the BottomNavigationBarItem and i am receiving the error "Invalid constant value".
I know it isn't the type of themeing i am using because i was able to break up my theme method and use the individual constants in the next BottomNavigationBarItem. Hmmm i was going to post a picture showing exactly what i mean here but i guess i cant yet.
this is the code that is telling me i have Invalid constant values
BottomNavigationBarItem(
icon: Icon(CustomIcons.wrestlingring2),
title: Text('Event', style: Theme.of(context).textTheme.button),
),
this code is where i added the const values directly to the style from my buttonTheme method in my styling page
BottomNavigationBarItem(
icon: Icon(CustomIcons.wrestling),
title: Text('Match Details', style: TextStyle(fontFamily: montserratFont, fontSize: smallTextSize, color: textColorLight)),
),
this is the constant values and buttonTheme from the styling page
const smallTextSize = 14.0;
const Color buttonTextColour = Color(0xffdc0000);
const String montserratFont = 'Montserrat';
const buttonTextStyle = TextStyle(
fontFamily: montserratFont,
fontSize: buttonTextSize,
color: textColorLight,
);
I noticed in the flutter code the BottomNavigationBarItem is a const and thought this might be the issue
const BottomNavigationBarItem({
#required this.icon,
this.title,
Widget activeIcon,
this.backgroundColor,
}) : activeIcon = activeIcon ?? icon,
assert(icon != null);
but then i noticed so is the RaisedButton but it is not effected by me adding a theme to it.
const RaisedButton({
Key key,
#required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
If there is another way to use theme with the title in the NavigationBarItem i would appreciate it if someone could point it out. I would rather not have to theme the entire ButtomNavigationBar.