I have the following class defined:
import 'package:flutter/material.dart';
class ItemHiddenMenu extends StatelessWidget {
/// name of the menu item
final String name;
/// callback to recibe action click in item
final Function onTap;
final Color colorLineSelected;
/// Base style of the text-item.
final TextStyle baseStyle;
/// style to apply to text when item is selected
final TextStyle selectedStyle;
final bool selected;
final IconData icon;
ItemHiddenMenu({
Key key,
this.name,
this.selected = false,
this.onTap,
this.colorLineSelected = Colors.blue,
this.baseStyle,
this.selectedStyle,
this.icon,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.only(bottom: 15.0),
child: InkWell(
onTap: onTap,
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(4.0),
bottomRight: Radius.circular(4.0)),
child: Container(
height: 40.0,
color: selected ? colorLineSelected : Colors.transparent,
width: 5.0,
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 20.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(icon),
SizedBox(
width: 15,
),
Text(
name,
style: (this.baseStyle ??
TextStyle(color: Colors.grey, fontSize: 25.0))
.merge(this.selected
? this.selectedStyle ??
TextStyle(color: Colors.white)
: null),
),
],
),
),
),
],
),
),
);
}
}
I'm trying to pass IconData as a named argument icon, like so:
new ItemHiddenMenu(
icon: Icons.dashboard,
name: "Investments by category",
baseStyle:
TextStyle(color: Colors.white.withOpacity(0.8), fontSize: 20.0),
colorLineSelected: Colors.teal,
)
The code runs fine, but the icon doesn't show. For testing purposes I tried to define icon inside of the class itself and it works, but then all my instances would have the same icon of course, which is not what I want.
What am I missing here?
I tried your code by passing IconData It works, icon is visible.
You might try Passing and Icon widget rather than IconData
Related
how i create a text button inside profile list item?
please check the code and help to create a text button i edited previous code because 2 person said that they need to see my ProfileListItem
i tried to add a TextButton inside ProfileListItem but i can't. here is my code how i create a text
button inside profile list item?
Expanded(
child: ListView(
children: const <Widget>[
ProfileListItem(
icon: LineAwesomeIcons.lock,
text: 'Privacy',
hasNavigation: true,
),
class ProfileListItem extends StatelessWidget {
final IconData icon;
final text;
final bool hasNavigation;
const ProfileListItem({
Key? key,
required this.icon,
this.text,
required this.hasNavigation,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: kSpacingUnit.w * 5.5,
margin: EdgeInsets.symmetric(horizontal: kSpacingUnit.w * 4)
.copyWith(bottom: kSpacingUnit.w * 2),
padding: EdgeInsets.symmetric(horizontal: kSpacingUnit.w * 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(kSpacingUnit.w * 3),
//color: Theme.of(context).backgroundColor,
color: AppColors.deep_orange,
),
child: Row(children: <Widget>[
Icon(
this.icon,
size: kSpacingUnit.w * 2.5,
),
SizedBox(width: kSpacingUnit.w * 2.5),
Text(
this.text,
style: kTitleTextStyle.copyWith(fontWeight: FontWeight.w500),
),
Row(
children: <Widget>[
Icon(
this.icon,
size: kSpacingUnit.w * 2.5,
),
SizedBox(width: kSpacingUnit.w * 2.5),
Text(
this.text,
style: kTitleTextStyle.copyWith(fontWeight: FontWeight.w500),
),
],
),
]));
}
}
Please try the below code :
class ProfileListItem extends StatelessWidget {
final IconData icon;
final String? text;
final bool hasNavigation;
const ProfileListItem({
Key? key,
required this.icon,
this.text,
required this.hasNavigation,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 10.h,
// margin:
// EdgeInsets.symmetric(horizontal: 10.w * 4).copyWith(bottom: 10 * 2),
// padding: EdgeInsets.symmetric(horizontal: 10.w * 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10 * 3),
//color: Theme.of(context).backgroundColor,
color: Colors.deepOrange,
),
child: Row(children: [
TextButton(
onPressed: () {},
child: Text(
text ?? "",
style: const TextStyle(fontSize: 12),
),
),
Expanded(
child: TextButton(
onPressed: () {},
child: Row(
children: <Widget>[
Icon(
icon,
size: 20,
color: Colors.white,
),
Text(
text ?? "",
style: const TextStyle(
fontSize: 12,
color: Colors.white,
),
),
],
),
),
),
]));
}
}
For more detail see here : https://api.flutter.dev/flutter/material/TextButton-class.html
I want to center a Text Widget vertically inside a container with a fixed height. But, I want to keep the width of the container dynamic which will change according to the length of the Text.
I tried using the Center and Align over the Text widget and the parent container widget, but it expanded along the whole width.
Point to be noted Container is residing inside another Column.
import 'package:flutter/material.dart';
class CustomIconButton extends StatelessWidget {
final String name;
final Function()? onTap;
final TextStyle? textStyle;
final BorderRadius? borderRadius;
const CustomIconButton({
Key? key,
required this.name,
this.onTap,
this.textStyle,
this.borderRadius,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.2,
decoration: BoxDecoration(
color: Color(0xFFE2D9FB),
borderRadius:
borderRadius ?? const BorderRadius.all(Radius.circular(15)),
),
child: Text(
name,
style: textStyle,
),
);
}
}
This is the actual outcome
This is the desired outcome
I don't want to use vertical padding to center the Text
You can try this below code easy and simple
import 'package:flutter/material.dart';
class CustomIconButton extends StatelessWidget {
final String name;
final Function()? onTap;
final TextStyle? textStyle;
final BorderRadius? borderRadius;
const CustomIconButton({
Key? key,
required this.name,
this.onTap,
this.textStyle,
this.borderRadius,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
height: MediaQuery.of(context).size.height * 0.2,
decoration: BoxDecoration(
color: Color(0xFFE2D9FB),
borderRadius:
borderRadius ?? const BorderRadius.all(Radius.circular(15)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
name,
textAlign: TextAlign.center,
style: textStyle,
),
],
),
),
),
);
}
}
you can wrap you text in a Column that will take the whole container size then you can use mainAxisAlignment to center it
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
name,
style: textStyle,
),
],
),
you can wrap your Text widget inside Column then set mainAxisAlignment to center, like this:
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
name,
style: textStyle,
),
],
),
for working example see: https://dartpad.dev/?id=e66e420f2f0201c772f73819711bf290
check this screenshot:
Try below code and set alignment: Alignment.center, to your container.
Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height * 0.2,
decoration: BoxDecoration(
color: Color(0xFFE2D9FB),
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
child: Text(
'Button',
style: TextStyle(),
),
);
Other Way using Column
Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height * 0.2,
decoration: BoxDecoration(
color: Color(0xFFE2D9FB),
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Button',
style: TextStyle(),
),
],
),
);
Refer layout
Result Screen->
You should put an column with the parameter "mainAxisAlignment: MainAxisAlignment.center", who will put all widgets centered... Like this:
import 'package:flutter/material.dart';
class CustomIconButton extends StatelessWidget {
final String name;
final Function()? onTap;
final TextStyle? textStyle;
final BorderRadius? borderRadius;
const CustomIconButton({
Key? key,
required this.name,
this.onTap,
this.textStyle,
this.borderRadius,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.2,
decoration: BoxDecoration(
color: Color(0xFFE2D9FB),
borderRadius:
borderRadius ?? const BorderRadius.all(Radius.circular(15)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
name,
style: textStyle,
),
],
),
);
}
}
Try this:
return Container(
height: MediaQuery.of(context).size.height * 0.2,
width: MediaQuery.of(context).size.width * name.length/50,
decoration: BoxDecoration(
color: Color(0xFFE2D9FB),
borderRadius:
borderRadius ?? const BorderRadius.all(Radius.circular(15)),
),
child: Center(
child: Text(
name,
style: textStyle,
),
),
);
name : "Button"
name : "ButtonButtonButton"
I am new to flutter and i am trying out new things.my question is how to pass image from toggle button to next page in flutter?
This is the code for toggle button which have image and text in it,I want to pass selected image to next page
Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ToggleButtons(
borderWidth: 1,
children:<Widget> [
Padding(padding: EdgeInsets.only(left:10),
child:
CustomIcon(
text:Text("TATA ACE",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 12),),
image: Image.asset("images/delivery.png",scale: 9,),
isSelected: isSelected[0],
bgColor:const Color(0x000000),
),),
Padding(padding: EdgeInsets.only(left:10),
child:
CustomIcon(
text: Text("TATA APE",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 12),),
image: Image.asset("images/delivery.png",scale: 9,),
isSelected: isSelected[1],
bgColor: const Color(0x000000),
),),
CustomItem class is also defined below
class CustomIcon extends StatefulWidget {
final Image image;
final Text text;
final bool isSelected;
final Color bgColor;
const CustomIcon(
{Key? key,
required this.text,
required this.image,
this.isSelected = false,
this.bgColor = Colors.black, value1})
: super(key: key);
#override
_CustomIconState createState() => _CustomIconState();
}
class _CustomIconState extends State<CustomIcon> {
#override
Widget build(BuildContext context) {
return Container(
width: 105,
height: 105,
decoration: BoxDecoration(
color: widget.isSelected
? Colors.black : Colors.grey,shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(
Radius.circular(100),
),
),
child: Center(
child: Container(
padding: EdgeInsets.all(15),
height: 105,
width: 105,
decoration: BoxDecoration(
color: widget.bgColor,
borderRadius: const BorderRadius.all(
Radius.circular(100),
),
),
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
widget.image,
widget.text,
],
),
),
),
);
}
}
I need to pass this text and image to the next page or just image to next screen.
I am building an online shop. I have a counter[-]0[+] next to every product on the home page. I am able to add and remove products to the cart but when I switch to a different screen, my counter on the home page is reset back to 0. I would like to keep that data persistent. what would be the best way to achieve this?
cart_counter.dart
import 'package:flutter/material.dart';
import '../providers/cart.dart';
import 'package:provider/provider.dart';
import '../providers/products.dart';
class CartCounter extends StatefulWidget {
const CartCounter({Key? key}) : super(key: key);
#override
_CartCounterState createState() => _CartCounterState();
}
class _CartCounterState extends State<CartCounter> {
int numOfItems = 0;
#override
Widget build(BuildContext context) {
final product = Provider.of<Product>(context, listen: false);
final cart = Provider.of<Cart>(context, listen: false);
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CounterButton(
icon: Icons.remove,
onPress: () {
if (numOfItems > 0) {
setState(() {
numOfItems--;
});
cart.removeSingleItem(product.id);
}
},
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 13.0),
child: Text(
numOfItems.toString(),
style: const TextStyle(
fontSize: 20.0,
),
),
),
CounterButton(
icon: Icons.add,
onPress: () {
setState(() {
numOfItems++;
cart.addItem(
product.id,
product.price,
product.title,
);
});
},
),
],
);
}
}
class CounterButton extends StatelessWidget {
final IconData icon;
final void Function() onPress;
const CounterButton({
Key? key,
required this.icon,
required this.onPress,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
width: 60.0,
height: 45.0,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
elevation: 2,
backgroundColor: Theme.of(context).primaryColor,
primary: Theme.of(context).primaryColor,
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
onPressed: onPress,
child: Icon(
icon,
color: Colors.white,
size: 30.0,
),
),
);
}
}
product_item.dart
import 'package:flutter/material.dart';
import 'cart_counter.dart';
class ProductItem extends StatelessWidget {
final String id;
final String title;
final double price;
final String image;
const ProductItem(this.id, this.title, this.price, this.image, {Key? key})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Card(
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
children: [
Row(
children: [
Container(
height: 50,
width: 70.0,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
color: Theme.of(context).primaryColor,
),
child: Center(
child: Text(
title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: Colors.white,
),
),
),
),
],
),
Image.asset(image),
const SizedBox(
height: 10.0,
),
Text(
price.toStringAsFixed(2),
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
const SizedBox(
height: 10.0,
),
const CartCounter(),
const SizedBox(
height: 20.0,
),
],
),
),
);
}
}
Use Shared Preferences or Secure Storage to store the values.
See this answer to a similar question.
for adding a method ontap() in my listview with a custom class that I made for it look of a tile
i tried adding ontap(): but don't recognized it says
here is the code
class _MenuCard extends StatelessWidget {
final String headImageAssetPath;
final IconData icon;
final Color iconBackgroundColor;
final String title;
final String subtitle;
final int heartCount;
_MenuCard({
this.headImageAssetPath,
this.icon,
this.iconBackgroundColor,
this.title,
this.subtitle,
this.heartCount,
});
#override
Widget build(BuildContext context) {
return new Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
child: new Card(
elevation: 10.0,
child: new Column(
children: [
new Image.asset(
headImageAssetPath,
width: double.infinity,
height: 100.0,
fit: BoxFit.cover,
),
new Row(
children: [
new Padding(
padding: const EdgeInsets.all(15.0),
child: new Container(
padding: const EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: iconBackgroundColor,
borderRadius: new BorderRadius.all(const Radius.circular(15.0)),
),
child: new Icon(
icon,
color: Colors.white,
),
),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text(
title,
style: const TextStyle(
fontSize: 25.0,
fontFamily: 'mermaid',
),
),
new Text(
subtitle,
style: const TextStyle(
fontSize: 16.0,
fontFamily: 'bebas-neue',
letterSpacing: 1.0,
color: const Color(0xFFAAAAAA),
),
),
],
),
),
new Container(
width: 2.0,
height: 70.0,
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [
Colors.white,
Colors.white,
const Color(0xFFAAAAAA),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
new Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
child: new Column(
children: [
new Icon(
Icons.favorite_border,
color: Colors.red,
),
new Text(
'$heartCount',
),
],
),
),
],
),
],
),
),
);
}
}
this code is of class that I use to build my listview in the scaffold of the stateless widget.
and here is how I am building my listview after returning scaffold in body:
the code is below
body: new ListView(
children: [
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.fastfood,
iconBackgroundColor: Colors.orange,
title: 'il domacca',
subtitle: "78 5TH AVENUE, NEW YORK",
heartCount: 84
),
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.local_dining,
iconBackgroundColor: Colors.red,
title: 'Mc Grady',
subtitle: "79 5TH AVENUE, NEW YORK",
heartCount: 84
),
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.fastfood,
iconBackgroundColor: Colors.purpleAccent,
title: 'Sugar & Spice',
subtitle: "80 5TH AVENUE, NEW YORK",
heartCount: 84
),
]
),
You can wrap you custom list item widget inside a GestureDetector which has an onTap callback method you can specify.
Example -
class _MenuCard extends StatelessWidget {
final String headImageAssetPath;
final IconData icon;
final Color iconBackgroundColor;
final String title;
final String subtitle;
final int heartCount;
final VoidCallback onTapCallback; //Add this custom onTap method
_MenuCard({
this.headImageAssetPath,
this.icon,
this.iconBackgroundColor,
this.title,
this.subtitle,
this.heartCount,
this.onTapCallback,
});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTapCallback,
child: new Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
child: //Rest of your code
),
);
}
}
And inside ListView you can specify your custom onTapCallback.
body: new ListView(
children: [
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.fastfood,
iconBackgroundColor: Colors.orange,
title: 'il domacca',
subtitle: "78 5TH AVENUE, NEW YORK",
heartCount: 84,
onTapCallback: () {
// Your onTap code goes here
}
),
// Rest of your code
]
)
Besides onTap, the GestureDetector widget also has a lot of other user event callbacks. You can find out more about them here.
Also, the same functionality can also be achieved with the help of the InkWell widget, you will just need to replace GestureDetector with InkWell and the rest of the code will remain same. Documentation for the widget can be found here.
Hope this helps!