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,
),
)
],
Related
I have used a package group_button 4.2.1 but once i select the textfields the radio buttons deselect and i have to select again, i have tried using the controller property of the Widget but i didn't get it to work.
I was thinking if i can make a container from scratch that is a radio button and can retain the value once i finish filling the form to be submitted to my firestore database.
You can use List of button text and keep tract of selectedIndex.
Run on dartPad
int? _selectedValueIndex;
List<String> buttonText = ["ForSale", "For rent"];
Widget button({required String text, required int index}) {
return InkWell(
splashColor: Colors.cyanAccent,
onTap: () {
setState(() {
_selectedValueIndex = index;
});
},
child: Container(
padding: const EdgeInsets.all(12),
color: index == _selectedValueIndex ? Colors.blue : Colors.white,
child: Text(
text,
style: TextStyle(
color: index == _selectedValueIndex ? Colors.white : Colors.black,
),
),
),
);
}
Inside build method to use this,
Row(
children: [
...List.generate(
buttonText.length,
(index) => button(
index: index,
text: buttonText[index],
),
)
],
),
I am new to Flutter, I want to create a dropdown list of icons and text in TextformField in Flutter. Like bank icon with its name. Please see the screenshot and suggest me any code. Thank you in advance. Please help.
Probably use DropdownButton class, https://api.flutter.dev/flutter/material/DropdownButton-class.html
On the documentation page you can see there is an example code that does not include an Icon.
You can add an icon to the dropdown items by changing the items parameter to have a Row wrapping an Icon and Text widget.
See: https://dartpad.dev/b742bde3465a616f8787c434415c9e3e?null_safety=true
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Row(
children: [
Icon(Icons.close),
Text(value),
],
),
);
}).toList(),
...
//custom object
class Item{
String name; //set the item name
Icon icon; //set corresponding icon
}
Item selectedItem;
List<Item> itemList = []; //create a list of the items, you need to add items into it first
DropdownButton<Item>(
isExpanded: true,
hint: new Text("Select Item"),
value: selectedItem ,
icon: Icon(Icons.arrow_drop_down_circle),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.blueAccent),
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (Item newValue) {
setState(() {
selectedItem = newValue;
});
},
items: itemList.map<DropdownMenuItem<Item>>((Item value) {
return DropdownMenuItem<Item>(
value: value,
child: Row(
//set alignment here
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(value.icon), //in here you can display the icon
Text(value.name), //name of the item
],
);
}).toList(),
)
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
Hello there i have a simple form basically it will show the article name and all of its services beneath it and in the same row there will be + and - buttons that will increment the variable but the problem here is that i don't know exactly how much services will be there because the services will be created and linked from other sections in the application , However i can get the list's length using ListName.length
here is a sample code
int quantity = 0;
Column(
children: <Widget>[
articleName(article),
Column(
children: List.generate(price.length, (index) =>
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: Text(
translator.currentLanguage == 'ar' ?
'${price[index].serviceNameAr}'
:'${price[index].serviceNameEn}',
style: TextStyle(
fontSize: responsivenessController.font,
),
),
),
Text('${price[index].price}' ,
style: TextStyle(
fontSize: responsivenessController.bodyFont,
),
),
FloatingActionButton(
onPressed: (){
setState(() {
quantity = quantity + 1;
});
},
child: Icon(Icons.add, color: Colors.black,),
backgroundColor: Colors.white,
),
Text('$quantity',
style: TextStyle(fontSize: responsivenessController.font)),
FloatingActionButton(
onPressed: (){
setState(() {
quantity = quantity - 1;
});
},
child: Icon(Icons.remove , color: Colors.black,),
backgroundColor: Colors.white,
),
],
)
),
)
as you can see if you clicked the add button on the third service , for example , all of the other services will have the same quantity because they share the same variable
What i want here is when the user submits the form i want to have
article id -> exists from previous code
service id -> exists
quantity -> the one causing the problem
price -> depends on quantity
Please share with me your thoughts and what will you do if you face such a problem
You need a List to keep your quantities. Lists are similar to arrays from other programming languages.
Try something like this:
List<int> quantities = [];
// initializing the list with the lenth provided
for(int i = 0; i<price.length; i++){
quantities.add(0);
}
And use the list this way inside your setState:
quantities[index] = quantities[index] + 1 (or quantities[index]++;)
quantities[index] = quantities[index] - 1 (or quantities[index]--;)
I'm trying to create stacks of cards in my Flutter project. Each card contains different data/information and when I try visualize with a dummy data, I have to use a lot of variables which is pretty much repeating variable name for each card. Is there aways to make a reusable card component in flutter so that I can make it clear and simple because when I use real data in the future, I might have more than 2 cards in a group and they will also have different data. Any suggestion will be really appreciated.
class MyConstructor {
MyConstructor({this.jonathan1,this.jonathan2,this.jonathan3});
}
class StackedCardsState extends State<HomePage> {
List<MyConstructor> cards = [
MyConstructor(h1: "Hello", h2: "hello3")
];
/////
Padding(
padding: EdgeInsets.all(15.0),
child: Column(children: [
Text(MyConstructor.hey, style: TextStyle(fontWeight: FontWeight.bold),),
Text(MyConstructor.hey),
Text(MyConstructor.hey, style: TextStyle(color: Colors.red[500]),),
VerticalDivider(color: Colors.blue),
])),
Your problem is first of all rather simple, you are violating the DRY concept (Don't repeat yourself, https://en.wikipedia.org/wiki/Don%27t_repeat_yourself ).
As soon as you start copy pasting code take a moment and think about your code and how you can abstract it into a reusable component.
Another big issue that I think you are lacking is variable naming. It is a very very important part of writing code. Might seem trivial but it will be very hard to understand what a variable named cardOne1 and cardTwo2 actually mean. What is the purpose of that variable? What does it do?
Now with that said I understand your app has something to do with car sales but other than that I'm not really sure what I'm looking at. There for I will have a harder time finding a good variable for this code but here is an example.
So lets break down the contents in the card to a single reusable widget, we can also make a data class (or model) for storing the data that we then give to the widget.
//car_details.dart
class CarDetails {
String title;
String diffNumber;
String diffPercent;
Color colorIndicator;
CarDetails({
this.title,
this.diffNumber,
this.diffPercent,
this.colorIndicator,
});
}
//car_card_details.dart
class CarCardDetails extends StatelessWidget {
final double padding;
final CarDetails carDetails;
CarCardDetails({
this.carDetails,
this.padding = 15,
});
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
carDetails.colorIndicator != null
? Container(
color: carDetails.colorIndicator,
height: 60,
width: 2,
)
: Container(),
Padding(
padding: EdgeInsets.all(padding),
child: Column(children: [
Text(carDetails.title),
Text(carDetails.diffNumber),
Text(carDetails.diffPercent),
VerticalDivider(color: Colors.blue),
])),
],
);
}
}
To use this component we make a CarCard Widget that takes a title and a list of CarDetails like so:
// car_card.dart
class CarCard extends StatelessWidget {
final String title;
final List<CarDetails> carDetails;
CarCard({this.title, this.carDetails});
#override
Widget build(BuildContext context) {
List<Widget> detailRow = List();
if (carDetails != null) {
carDetails.forEach((element) {
detailRow.add(CarCardDetails(
top: element.title,
middle: element.diffNumber,
bottom: element.diffPercent,
lineColor: element.colorIndicator,
));
});
}
return Container(
//height: 150, //I would not hardcode the height, let the childrent expand the widget instead
child: SingleChildScrollView(
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: InkWell(
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(children: [
Text(
title,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Spacer(),
Icon(Icons.favorite)
]),
),
Divider(color: Colors.black),
Row(children: detailRow),
]),
),
),
),
);
}
}
And instead of saving all the variables you had in app we can now make them into a list of CarDetails where each element contains the strings.
// some other widget
...
List<CarDetails> carDetails = [
CarDetails(
title: "2 hrs ago",
diffNumber: "+/ TRACK",
diffPercent: "% to DBJ",
),
CarDetails(
title: "CHEVEROLET",
diffNumber: "-2706",
diffPercent: "42.2%",
colorIndicator: Colors.red,
),
CarDetails(
title: "BUICK",
diffNumber: "+300",
diffPercent: "50%",
colorIndicator: Colors.green,
),
CarDetails(
title: "GMC",
diffNumber: "-712",
diffPercent: "52.1%",
colorIndicator: Colors.black26,
),
];
#override
Widget build(BuildContext context) {
return CarCard(
title: "US Daily Retail Delieveries by Brand",
carDetails: carDetails,
);
}
...
This can of course be abstracted even further with the groups of cards etc, etc. But I hope you get the idea.
This is an example of how you could do it, with that said I do not know what data you are intending to use and how you want to structure it. So consider this a starting point and take it from there. :)