why the text inside the container does not show flutter - flutter

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.

Related

Flutter 2: maxLength inside the textfield without using onChanged

I am trying to find a way to use maxLength and put it inside of the textfield to have a nice rendering. However, I don't want to use the onChanged parameter because I would have to use a setState, but this not the good way to use it.
The parameter maxLength from the flutter's textfield is designed to do not update the state, so that every statefull widgets don't have to rebuild.
So I would like to put the 0/50 inside, at the end of the textfield, on the same line as Title.
From this :
To this :
So somebody have an idea of how to do it without using the parameter onChanged ?
Does flutter has implemented this functionality ?
Try with this, hope you get a solution.
TextField(
maxLength: 250,
buildCounter: (_, {currentLength, maxLength, isFocused}) => Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Container(
alignment: Alignment.centerLeft,
child: Text(currentLength.toString() + "/" + maxLength.toString())),
),
)
Also, Try with this,
TextField(
controller: nameController,
maxLength: 60,
prefixIcon: Icon(
Icons.account_circle,
color: Colors.black45,
),
),

How to add a CircleAvatar to a Flutter TextField?

Trying to create a post screen, where the user can select an image and post a text.
The main problem that I have is that I need to add a Cirlce avatar for the user on the left side of the textField and a hint "Insert your text here"
this is what I achieved so far:
class CityRecommendations extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: DropdownAppBar(),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "Insert your message",
),
scrollPadding: EdgeInsets.all(20.0),
autofocus: true,
),
MessageBox(),
],
),
);
}
}
How to add a circleAvatar for the user?
I do not sure this is you wanted
Row(
children: <Widget>[
CircleAvatar(child: Icon(Icons.person)),
Expanded(
child: Padding(
padding: EdgeInsets.all(8),
child: TextField(
decoration: InputDecoration(
hintText: "Insert your message",
),
scrollPadding: EdgeInsets.all(20.0),
autofocus: true,
),
))
],
),
You can use CircleAvatar widget for that.
A circle that represents a user.
Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background color, for consistency.
If foregroundImage fails then backgroundImage is used. If backgroundImage fails too, backgroundColor is used.
The onBackgroundImageError parameter must be null if the backgroundImage is null. The onForegroundImageError parameter must be null if the foregroundImage is null.
You can wrap your TextField with CircleAvater

Give my round image a matching border in flutter

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!

Column widget draws a line between children when they are wrapped in specific widget with decoration. How can i cure this?

The problem is visible on the attached screenshot.
Code of a main widget:
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: Decor(
child: Container(),
),
flex: 1,
),
Flexible(
child: Decor(
child: Container(),
),
flex: 6,
)
],
);
Code of a Decor widget:
Container(
decoration: BoxDecoration(
color: COLOR,
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
Answering in advance "Why would you even need to do such a Decor Widget"? Both flexibles will be populated with data of some sort. Second flexible will be with a ListView inside and the first one will be a "Header" for what is inside a ListView. Data is retrieved from server every 10s, so the main widget is wrapped with a StreamBuilder.
Problem is that StreamBuilder cannot be shrinked to the size of its child, whereas ListView can, so I wrap both "Header" and a ListView in Decor so that grey background color doesn't take all available space on a screen which than produces black line seen on a screenshot?
So the question is: is there a way either to remove the black line between two widgets in a column?
Also, if you know magic of how to shrink StreamBuilder to the size of its child please answer here too.
Ok I know that this is not a very nice solution and more like workaround but I think the only way to get rid of the line is to set border color of the container in your Decor widget
Container(
decoration: BoxDecoration(
color: COLOR,
border: Border.all(width: 0, color: COLOR) //added line
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
First I thought setting border width to 0 will help it but that didn't work.. Color did

How do I add margins to my widget ? Understanding the effect of EdgeInsets

I am trying to wrap my head around ui placement in Flutter. So I currently have something that looks like this
I would like to add a little space b/w search Textfield and the button.
This is what the controlling part of my code looks like. I am trying to style my textFieldSearchBox so it has a little margin on the right, I tried trying to increase the Edge insets but it seems to increase the size of the TextField I don't know why? I know I could adding a padding element after TextField but I wanted to know what my other options are.Why does increasing the EdgeInsets in the decoration of textFieldSearchBox increase the size of the textbox? My ideal situation would be to add margin around all the borders of this textbox (LTRB).
Any suggestions?
TextField textFieldSearchBox = new TextField(
keyboardType: TextInputType.text,
controller: filterController,
autofocus: false,
decoration: new InputDecoration(
contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
border:
new OutlineInputBorder(borderRadius: BorderRadius.only()),
),
);
var optionRow = new Row(
children: <Widget>[
new Expanded(child:textFieldSearchBox),
searchButton,
new IconButton(
icon: new Icon(Icons.filter),
onPressed: (){print("Called....");},
),
],
);
return new Scaffold(
appBar: new AppBar(
title: new Text("Title goes here.."),
backgroundColor: Colors.lightBlueAccent,
),
body: new Container(
child:new Column(
children: <Widget>[
optionRow,
],
),
),
);
How to add margin to a widget
In Flutter we generally talk about adding Padding around a widget rather than margin. The Container widget does have a margin parameter, but even this just wraps it child (and any decoration that the child has) with a Padding widget internally.
So if you have something like this
and you want to add some space around the widget like this
then you just wrap the widget with Padding. This is easy to do if you put your cursor on the widget name and press Alt+Enter (or Option+Return on a Mac) in Android Studio. Then choose Add padding from the menu.
which gives you something like this
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"text",
style: TextStyle(fontSize: 20.0),
),
);
Meaning of EdgeInsets
When you are setting padding you can't directly use an integer or double. You have to specify the space (number of logical pixels) using the EdgeInsets. You can set all of the sides at once (as we saw in the example above), or you can set them individually like this:
Widget myWidget() {
return Padding(
padding: const EdgeInsets.only(
left: 40,
top: 20,
right: 40,
bottom: 20,
),
child: Text("text"),
);
}
Since in this example left and right are the same and top and bottom are the same, we can simplify EdgeInsets to
padding: const EdgeInsets.symmetric(
horizontal: 40,
vertical: 20,
),
Using a Container to set padding and margin
An alternate method is to wrap your widget in a Container. The Container widget has both a padding and a margin property. (This would only be necessary, though, if you were also adding a decoration like background color or a border.)
Widget myWidget() {
return Container(
margin: EdgeInsets.all(30),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.black),
),
child: Text(
"Flutter",
style: TextStyle(
fontSize: 50.0
),
),
);
}
Why does increasing the EdgeInsets in the decoration of textFieldSearchBox increase the size of the textbox ?
Because that padding is used for the internal padding. The one you see between the borders and the actual text.
My ideal situation would be to add margin around all the borders of this textbox (LTRB). Any suggestions ?
Wrap your TextField into a Padding. That is the ideal way to achieve the desired layout in flutter.
final textFieldSearchBox = new Padding(
padding: const EdgeInsets.only(right: 8.0),
child: new TextField(
keyboardType: TextInputType.text,
controller: filterController,
autofocus: false,
decoration: new InputDecoration(
contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
border: new OutlineInputBorder(borderRadius: BorderRadius.only()),
),
),
);
You can put the component inside a padding, like this
var optionRow = new Row(
children: <Widget>[
new Expanded(child:textFieldSearchBox),
new Padding(padding: new EdgeInsets.all(20.0),child:button,),
new IconButton(
icon: new Icon(Icons.filter),
onPressed: (){print("Called....");},
),
],
);
Since the layout of your widgets is Row, why do not you add the mainAxisAlignment property to it like this:
mainAxisAlignment : MainAxisAlignment.spaceAround
Or
mainAxisAlignment : MainAxisAlignment.spaceBetween
Simply use
EdgeInsets.fromLTRB
For example:
padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
You can also use SizedBox if you want to avoid using Container
There are some widgets which allow that using a parameter, but in most cases You can wrap the Widget in a Padding widget like so.
From this
YourWidget(
....
)
To This
Padding(
padding: EdgeInsets.all(value),
YourWidget(
....
)
)
Where "all" can be replaced with the variant of your choice
In Flutter we generally talk about adding Padding around a widget rather than margin. The Container widget does have a margin parameter, but even this just wraps it child (and any decoration that the child has) with a Padding widget internally.strong text