Flutter: How to make such Edit text and remove the unexpected layout padding - flutter

I'm trying to implement this design:
i'm very beginner to flutter, and what i'm getting is this:
I don't want you guys to get me wrong, i'm not asking for someone to implement this for me.
i need guidance on how to:
remove the layout padding.
make a textview and edit text side by side look like one widget.
remove the space between the edit texts.
implement the CheckBox (i tried a row with check box and text, didn't work)
show a proper arrow in "Sign In" (instead of ->).
just some explanations, guidance and any documentation or tutorial that could be good for my case.
Here is my code

remove the layout padding.
make a textview and edit text side by side look like one widget.
Im not sure of this if your talking about inside TextFormField you can use contentPadding inside InputDecoration. But based on your layout design, you can separate the Label in TextFormField and create your own label text
Row(
children:[
Text("LABEL"),
Expanded(
child: TextFormField(),
)
]
)
4.implement the CheckBox (i tried a row with check box and text, didn't work)
Row(
children: [
Checkbox(
value: isValue,
onChanged: (bool value) {
setState(() {
isValue = value;
});
}),
Text("SOME TEXT"), //Read RichText widget for your design
],
),
For you arrow -> sign in
Try using Icon() widget

Related

How to prevent failedAssertion: size.isFinite in Flutter

I had a very basic Flutter layout which looked something like this:
Column
widget1
expanded
widget2
This worked great. Widgets 1 and 2 were rendered and my main "expanded" widget was taking the rest of the screen, great!
Next I wanted to add two buttons on each side of my expanded widget. So I tried this:
Column
widget1
Row
button1
expanded
button2
widget2
Now Flutter throws a layout error: failedAssertion: size.isFinite
Reading about it online, people are saying you cannot put an Expanded inside a Row or a Column because they use infinite main axis length, so if the child is also infinite this causes problems. However, I already had Expanded inside a Column and that worked fine! Why is putting it inside a Row problematic?
One SO suggestion was to put mainAxisSize: MainAxisSize.min in the Row, but that does not help.
Some of the other suggestions were to put the widget inside a Container with fixed sizes. This does resolve the error, but now the widget goes off screen. And this sort of defies the whole purpose of Flutter responsive UI. Why would anyone want to create a fixed sized object on a platform where screen sizes vary widely?
What am I doing wrong here? Seems I am misunderstanding something fundamental here...
it works fine and doesn't through any error
Column(
children:[
Container(
height:50,
width:50,
color:Colors.red),
Row(
children:[
Container(
height:50,
width:50,
color:Colors.red),
Expanded(
child:Text('hgdhj hdgakhjgck dgfkejg')
),
Container(
height:50,
width:50,
color:Colors.red),
]),
Container(
height:50,
width:50,
color:Colors.red),
])

How to align Text next to TextFormField in Flutter?

I have a Text widget (the +357) next to a TextFormField widget (the 12345678) like here:
They are put in a row (with the icon as well).
The problem is when there is error text in the TextFormField, the error text displaces the TextFormField entirely:
How can I keep the TextFormField in its place even when there is an error text to be displayed??
note: if it turns that showing some code is needed just ask about it, as I think that I explained it clearly above.
Try to add the property crossAxisAlignment: CrossAxisAlignment.start to your row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...
],
),

How do I put two text fields side by side on flutter

Hello I have a flutter form where the user will enter his card details. I want it to look exactly like in the picture below
I already know how to put the 'Number' and 'Card Holder' text fields. How do I put the Expiry Date and CVV text fields side by side like above?
Use the Row widget and put these two text widgets as children.
Example
Row(
children: [
Text( 'Expired Date'),
Text('CVV'),
],
),
Very simple row widget is used for side by side container
Column widget is used for side under side
Row(
Children [
Container (Text(’row 1’),
Container (Text(’row 1’)
],
);

Flutter, widget next to the last letter of TextFormField

I want to move the box that is full of red background over there to the position of the empty box.
In other words, I want to insert a container right next to the point where TextFormField ends.
Is this something that can be implemented in Flutter? Or is there no way?
-- UPDATE
I actually want to add a "send" Icon to the end of the text. All the examples I looked up were always going to the end of the Containers due to Rows, as shown in the photos I posted. Since the position of the send icon will always change, depending on the length of the text, in real time, this problem feels very difficult to me. and also for your information, this is not Text, but TextField or TextFormField widget.
Unfortunately, there is no way of doing this since TextFormField accepts string only and not a widget. Also, according to material guidelines, any such widget should be at the end of the text field as a suffix such as:
TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Enter a message",
suffixIcon: IconButton(
onPressed: () => _controller.clear(),
icon: Icon(Icons.clear),
),
),
)
May I ask what is the purpose?! maybe we can help find better solution then?
but if we have to then I can think of 2 ways.
1- Include the box as a Text - For example ▀ (Alt + 223)
var box = ▀
Text("efwewewefwewefe$box"),
2- Option 2: Wrap in a Stack widget
Stack(
children: [
Text("efwewewefwewefe"),
Container(height:5, width:5, color: Colors.red]),

Scroll Flutter's multi-line TextField to end

I have a periodic function which appends text to a TextField.
For this purpose I set a TextEditingController and invoke: controller.text += someText.
However, when the TextField is scrolled and text is added, the TextField automatically scrolls back to the top and the just appended text gets out of view.
Is there any way to change the scroll behavior?
Set the selection using the TextEditingController.
This will prevent the TextField from rebuilding every time and/or moving the cursor to the start of the TextField.
TextField(
controller: textEditController,
onChanged: (content) {
textEditController..text = someText
..selection = TextSelection.collapsed(offset: textEditController.text.length);
},
)
I don't know if this can serve you already today but in case someone else sees the publication I hope that helps, I'll say that I do this with a SingleChildScrollView() and I set the reverse property to true. I have to say that I don't use a TexField(), you use a Text(), but it behaves well and every time the text increases a line automatically the reverse property of the SingleChildScrollView() causes it to scroll down and always see the last thing that is being written.
This is a small example of how I do it in my code:
Container(
alignment: Alignment.bottomRight,
height: size.height*0.044,
child: SingleChildScrollView(reverse: true,child: Text(valorOperacion1, style: GoogleFonts.exo(color: tema.hintColor, fontSize: 18.0.sp, fontWeight: FontWeight.w600,),))
),