I have a sized box like so
child: SizedBox(
width: 50.0,
height: 50.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.blue
),
)
),
i would like to change the color of the box decoration depending on the value of a piece of state called _status, _status can have four values 1,2,3,4, and depending on the value of status I would like to change the color of the box decoration like so
1 - blue
2 - red
3- amber
4 - green
The ternary statement that is normally used does not help as it is only good with a limited number of values of the state is there a way that I can implement this?
Thanks
You can define helper function to calculate Color value
child: SizedBox(
width: 50.0,
height: 50.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: _getBoxColor(),
),
)
),
//somewhere below build method
Color _getBoxColor() {
switch (_status) {
case 1:
return Colors.blue;
case 2:
return Colors.red;
...
}
Related
hello i'm new in flutter so inside a column a container then a sized box then another container and finally a button . the problem is the container which have the color amber does not show despite print is worked but i don't see the container on my screen . i wanna display a text inside that container if the email invalid any help ! thanks in advise
Container(
height: MediaQuery.of(context).size.height * 0.08,
margin: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
color: const Color(0xFFEFEDED),
border: Border.all(color: Colors.transparent),
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: TextFormField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
border: InputBorder.none,
),
),
),
),
const SizedBox(
height: 50,
),
InkWell(
onTap: () {
if (isValidEmail) {
emailsList.add(emailController.text);
box.write('emails', emailsList);
Navigator.of(context).pop();
}
if (!isValidEmail) {
Row(
children: [
Container(
color: Colors.amber,
),
],
);
print("test");
}
},
child: CustomButton("Ajouter", buttonColor, Colors.white)),
First of all, if you do not give any height or width to your container but only a color, it will never show. Why? Because it has no content meaning that the height and width by default are 0. So, I advise setting a height and width first.
Second, if you want to display a text if the field is not valid, you have something already existing. In your textField, you can give him an Inputdecoration and there you can access the parameters errorText. In order to have this working, you must use the formValidation with the widget Form and you kive him a key that is a formValidator.
Finally, if you do not want to use the errorText by default, you should put in the column something like this.
Column(
children:[
TextField(),
if (isEmailInvalid)
Text("This is the error Text")
]
)
With the "isEmailInvalid" which is a boolean.
I hope that all this information helps you. But if you have really a beginner, I advise to stick with the default setting of the TextField and take a look at the flutter documentation that is really interesting.
put a Row in Inkwell onTap? Row is not a function, you must return it in your build method.
return type of if statement must be 'Widget' . use 'return' before Container widget.
I am trying to get a text label with graphics over the image. Labels like new arrival, best seller, limited, on sale just like on the pic attached.
enter image description here
Here's what i think the skeletal layout would be :
return Stack(
children: [
Card(
color: Colors.black54,
child: Image.asset('assets/xyz.png'),
),
Align(
//for bottomRight
alignment: Alignment.bottomRight,
child: Image.asset(
'assets/fireimg.png',
), //can be an SVG converted to png
),
Align(
//for topLeft
alignment: Alignment.topLeft,
child: Image.asset(
'assets/label.png',
), //can be an SVG converted to png
),
],
);
Feel free to give the Padding of your choice.
it has so much code to write , so i will give some examples to achieve that output
in this image ,i mentioned 0 and one .
for all 1
solution 1
you can use image like this way
Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.amber,// added only for view this example
child:Image() // add Product image here
),
Positioned(
top: 20, //change according to your use case position
left: 0,// change according to your use case position
child: Container(
color: Colors.black, // added only for view this example
decoration: BoxDecoration(image: ),// add label image here
width: 100,
height: 50,
child: Row(
children: [Text('hi')],
),
))
],
)
solution 2
you can use custom paint for label layout
not that
in both solution you have to use stack and position widgets , you can control position according to your use case
for all 0
you can use RotationTransition widgets to achieve this
not that
you have to use stack and position widgets , you can control position according to your use case
for the vertical Text
use this example
String exText = "meta";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hi'),
),
body: Container(
width: 200,
height: 200,
color: Colors.amber,
child: Column(
children: exText.characters
.map((e) => Container(
child: Text('$e'),
))
.toList()),
),
out put will be
I have this button in my app to change the language, and the button's icon is a round flag representing whatever language is currently selected. To make the user understand it's a button, I want to give it a little border so I looks more like a button, but I can't find a way to make the border round to match the icon.
So far, the best I can do is add a decoration to the icon with rounded corner, but it doesn't work. Here's the result and the code, any help is appreciated ! (I wonder if there is a solution that would adapt to the form of the image, if I change my mind a decide to use a rectangle image or a flag shaped, emoji type image. Thanks!)
return Padding(
padding: const EdgeInsets.all(10),
child: DropdownButton(
onChanged: (Language? lang) {
lang == null ? print("Null language error") : _changeLanguage(lang.languageCode);
},
underline: SizedBox(),
icon: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blueGrey,
),
child: buttonIcon),
items: ...,
),
);
You could increase the radius of your BorderRadius to match the radius of the buttonIcon and give buttonIcon some padding.
Something like this:
return Padding(
padding: const EdgeInsets.all(10),
child: DropdownButton(
onChanged: (Language? lang) {
lang == null ? print("Null language error") : _changeLanguage(lang.languageCode);
},
underline: SizedBox(),
icon: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(200), // you can adjust this value to your needs
color: Colors.blueGrey,
),
child: Padding(
padding: const EdgeInsets.all(10), // this value will be the width of your border
child: buttonIcon,
),
),
items: ...,
),
);
Solution given by Chirag Bargoojar in the comments.
What I did was create a CircleAvatar and give it another Circle avatar as a child, the first one creates the outer ring that works as the border.
Result:
Code:
icon: CircleAvatar(
radius: 22,
backgroundColor: Colors.blueGrey,
child: CircleAvatar(
backgroundImage: buttonIcon,
radius: 18,
),
),
I'm still going to look for the best possible color, but it does look pretty good this way!
While doing a coding walkthrough, I've never find a way to get rid of the divider lines.
How can I achieve this? For more info, I just created a new custom class by just copying the CupertinoDatePicker class.
Since you copied the CupertinoDatePicker class just remove the border in the _buildMagnifierScreen() method in picker.dart from /src/cupertino/
/// Draws the magnifier borders.
Widget _buildMagnifierScreen() {
final Color resolvedBorderColor = CupertinoDynamicColor.resolve(_kHighlighterBorder, context);
return IgnorePointer(
child: Center(
child: Container(
decoration: BoxDecoration(
// remove this attribute
border: Border(
top: BorderSide(width: 0.0, color: resolvedBorderColor),
bottom: BorderSide(width: 0.0, color: resolvedBorderColor),
),
),
constraints: BoxConstraints.expand(
height: widget.itemExtent * widget.magnification,
),
),
),
);
}
I want to draw a border around my container and have the background be colored.
Widget bodyWidget() {
return Container(
color: Colors.yellow,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
child: Text("Flutter"),
);
}
But when I try this I get the error
Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color:
color)".
How is this solved?
Remove the color parameter from the Container and add it to the BoxDecoration:
Widget bodyWidget() {
return Container(
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.black),
),
child: Text("Flutter"),
);
}
If you check the Container source code you can see that the color parameter is just used to set the BoxDecoration color if the decoration is null.
decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),
The error you got is just a helpful reminder of that. Otherwise you would get a strange override (as was apparently the case in the past) or you might not even notice the bug.