Overlap leading Icon on form input field in flutter - flutter

Trying to implement this style of login in flutter. Any ideas? Tried using the prefix icon and row but not really getting it.
Example Login Image


You can use an Stack with two children, one for the leading icon and the other for the text input. I wrote the code you need to implement what you want. So, I will share it with you. You only have to set up the colors and the text style as you prefer.
Here we go...
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 6.0),
height: 36.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24.0),
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.fromLTRB(70.0, 0.0, 30.0, 0.0),
child: TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 8.0),
border: InputBorder.none,
hintText: 'Username',
),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.all(12.0),
child: Icon(Icons.person_outline),
),
),
],
),
SizedBox(height: 12.0),
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 6.0),
height: 36.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24.0),
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.fromLTRB(70.0, 0.0, 30.0, 0.0),
child: TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 8.0),
border: InputBorder.none,
hintText: 'Password',
),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 12.0)],
),
child: Padding(
padding: EdgeInsets.all(12.0),
child: Icon(Icons.lock_outline),
),
),
],
),
],
),
And the output is this:

Related

Bottom overflowed by 249 pixels when I click on a form field

Here is my code
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60),topRight: Radius.circular(60)),
),
child: Container(
padding: EdgeInsets.all(20),
child: Column( ----->line54:26
children: [
SizedBox(height: 40.0,),
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(225, 95, 27, .3),
blurRadius: 20.0,
offset: Offset(0,10)
)
]
),
child: Form(
child: Column(
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade200))
),
child: TextField(
decoration: InputDecoration(
hintText: "Votre nom",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none
),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade200))
),
child: TextFormField(
decoration: InputDecoration(
hintText: "Votre prénom"
),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade200))
),
child: TextField(
decoration: InputDecoration(
hintText: "Numéro client",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none
),
),
),
],
),
),
),
SizedBox(height: 40.0),
Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green
),
child: Center(
child: TextButton(
onPressed: (){print("gfhjk");},
child: Text(
"Activer",
style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white,fontSize: 16),
),
),
)
)
],
),
),
),
),
The following assertion was thrown during layout:
A RenderFlex overflowed by 249 pixels on the bottom.
The relevant error-causing widget was:
Column Column:file:///xxxxxxx/lib/ecrans/auth/activation_screen.dart:54:26
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#1a283 relayoutBoundary=up5 OVERFLOWING
... needs compositing
... parentData: offset=Offset(20.0, 20.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=371.4, h=148.1)
... size: Size(371.4, 148.1)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
I need help

Wrap your main container with SingleChildScrollView instead of the Expanded
SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60), topRight: Radius.circular(60)),
),
child: Container(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
SizedBox(
height: 40.0,
),
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(225, 95, 27, .3),
blurRadius: 20.0,
offset: Offset(0, 10))
]),
child: Form(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey.shade200))),
child: TextField(
decoration: InputDecoration(
hintText: "Votre nom",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey.shade200))),
child: TextFormField(
decoration:
InputDecoration(hintText: "Votre prénom"),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey.shade200))),
child: TextField(
decoration: InputDecoration(
hintText: "Numéro client",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none),
),
),
],
),
),
),
SizedBox(height: 40.0),
Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green),
child: Center(
child: TextButton(
onPressed: () {
print("gfhjk");
},
child: Text(
"Activer",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 16),
),
),
))
],
),
),
),
),

My second container is taking all the space.How to avoid that

The second Container which is in the red color is taking all the remaining space. How to avoid that. I want my second container to take the minimum space.
Container(
height: 600,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(60),
),
),
child: Padding(
padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: "Email or Phone Number"),
),
SizedBox(
height: 20,
),
TextField(
decoration:
new InputDecoration.collapsed(hintText: 'PassWord'),
)
],
),
),
),
),[![][1]][1]

Remove parent Container height and set Column <mainAxisSize: MainAxisSize.min,>.
It is taking full height because of Container height and the default behavior of Column.
And to improve UI, use padding on Container<padding:x,child Column>
Container(
// height: 600,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(60),
),
),
child: Padding(
padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
child: Container(
padding: const EdgeInsets.all(40), //here padding
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: "Email or Phone Number"),
),
const SizedBox(
height: 20,
),
const TextField(
decoration: InputDecoration.collapsed(hintText: 'PassWord'),
),
],
),
),
),
),

Try below code hope its helpful to you. Just remove your container extra/large height
Container(
height: 180,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(
60,
),
),
),
child: Padding(
padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: "Email or Phone Number",
),
),
SizedBox(
height: 20,
),
TextField(
decoration: InputDecoration.collapsed(
hintText: 'PassWord',
),
)
],
),
),
),
),
Your result screen->

How can I add a container inside a textField?

I have tried wrapping the textField in a row and adding a container to the row but it throws an error and the rest part of the form doesn't render.
And using the prefix property for textField also doesn't work as the container is shown when the textField is pressed but I want it to be seen even when the textField is not active.
this is the required UI for the mobile no. field I'm trying to build

Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
Container(
height: 50,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(
horizontal: 8,
),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
),
),
child: Text(
"+91",
style: TextStyle(
color: Colors.white,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Mobile No."
),
),
),
)
],
),
)
result:

Unable to build center () and text() widget

I am working on my new app. While creating the login page, i faced some issue. My code works fine till a point and after that point or line, it stops building more widgets.
My code(working portion):
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner:false,
home: Background1(),
),
);
class Background1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold( //Whole screen
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [
Colors.purple.shade700,
Colors.purple.shade500,
Colors.purple.shade300,
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox (height: 80),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Text("LOGIN", style: TextStyle(color: Colors.white,fontSize: 40,fontWeight: FontWeight.bold)),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20),bottomLeft: Radius.circular(20),bottomRight: Radius.circular(20)),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [BoxShadow(
color: Color.fromRGBO(225, 95, 27, 0.3),
blurRadius: 20,
offset: Offset(0,10),
)],
),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Email or phone number",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
],
),
),
SizedBox(height: 40),
Text("Forgot Password?", style: TextStyle(color: Colors.white)),
SizedBox(height: 40),
Container(
height: 40,
margin: EdgeInsets.symmetric(horizontal: 50),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.purple.shade800,
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text("LOGIN", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
),
),
],
),
),
),
),
],
),
),
),
);
}
}
Couldn't able to create center() and Text() widget, which is at the end of the code.
child: Text("LOGIN", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
),
),
And also it doesn't build widgets as i write further. I've attached an image showing my emulator where it doesn't show LOGIN in white color on the purple button. enter image description here

just remove the padding of the container and it will work fine.
code after removing the container padding:
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Background1(),
),
);
class Background1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
//Whole screen
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [
Colors.purple.shade700,
Colors.purple.shade500,
Colors.purple.shade300,
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 80),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Text("LOGIN",
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold)),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(225, 95, 27, 0.3),
blurRadius: 20,
offset: Offset(0, 10),
)
],
),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Email or phone number",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
],
),
),
SizedBox(height: 40),
Text("Forgot Password?",
style: TextStyle(color: Colors.white)),
SizedBox(height: 40),
Container(
height: 40,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
color: Colors.purple.shade800,
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text("LOGIN",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold)),
),
),
],
),
),
),
),
],
),
),
),
);
}
}

You might be using all of the space on the screen, rather then using a column use a listview, this will allow you to scroll. Additionally Listview.builder will allow you to build the children of the list view dynamically.
checkout https://api.flutter.dev/flutter/widgets/ListView-class.html for info on the listview class

How to style this kind of Text Field

I want to style this kind of TextField.
The main problem that I'm facing is to design the US$ part in leading the TextField. This is my code so far.
/// My Place Bid Text Field
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(4),
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(
child: Container(
//width: mySize.width * 0.2,
//height: 50,
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
bottomLeft: Radius.circular(4),
),
color: Colors.grey[200]),
child: Text(
"RS \u20B9",
style: TextStyle(fontSize: 24),
),
),
),
Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Place Bid",
labelStyle: TextStyle(fontSize: 24)),
),
),
],
),
),
Which gives me output
I know this question is not that complicated, but I'm still relatively new to flutter so your help would be much appreciated.

#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample"),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey[500],
),
borderRadius: BorderRadius.all(Radius.circular(8))),
width: double.infinity,
height: 50,
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
color: Colors.grey.shade300,
height: 50,
child: Align(
alignment: Alignment.center,
child: Text(
"RS \u20B9",
style: TextStyle(
fontSize: 24, fontWeight: FontWeight.bold),
),
)),
SizedBox(
width: 10,
),
Expanded(
child: Container(
height: 50,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter Bid",
labelStyle: TextStyle(fontSize: 24)),
)))
],
),
),
));
}
Output

You can use the prefixIcon to add a widget at the beginning of the textfield:
Container(
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
prefixIcon: Padding(
padding: const EdgeInsetsDirectional.only(start: 2.0),
child: Container(
padding: const EdgeInsets.all(13),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
bottomLeft: Radius.circular(4),
),
color: Colors.grey[200]),
child: Text(
"RS \u20B9",
style: TextStyle(fontSize: 24),
),
),
),
border: const OutlineInputBorder(),
labelText: 'Hint Text',
),
),
),
],
),
)
example:
https://dartpad.dev/a89aff20d67e2cb31da6a07ba7c17910

Based on your solution.
Notice the "IntrinsicHeight" widget. It makes all the children inside the child the same size (depending on the biggest one). The "Center" widget inside the prefix makes the Container go max height + center the text inside of it. Just make sure not to use IntrinsicHeight too much, since the docs state that it's a bit resource heavy.
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(color: Colors.grey[200]),
),
child: IntrinsicHeight(
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border(
right: BorderSide(color: Colors.grey[200]),
),
),
child: Center(
child: Text(
'RS \u20B9',
style: TextStyle(fontSize: 24),
),
),
),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
border: InputBorder.none,
labelText: "Place Bid",
),
),
),
],
),
),
),
The second code is almost the same, except there's no label after typing the text inside the TextField.
Container(
margin: EdgeInsets.symmetric(horizontal: 20.0),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(color: Colors.grey[200]),
),
child: IntrinsicHeight(
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border(
right: BorderSide(color: Colors.grey[200]),
),
),
child: Center(
child: Text(
'RS \u20B9',
style: TextStyle(fontSize: 24),
),
),
),
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
border: InputBorder.none,
hintText: "Place Bid",
),
),
),
],
),
),
),

Container(
decoration: BoxDecoration(
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(
child: Container(
//width: mySize.width * 0.2,
//height: 50,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border:Border.all(color:Colors.grey),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
bottomLeft:Radius.circular(4),
),
color: Colors.grey[200]),
child: Text(
"RS \u20B9",
style: TextStyle(fontSize: 24),
),
),
),
Expanded(
child: TextField(
decoration: InputDecoration(
border: new OutlineInputBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(4),
bottomRight:
Radius.circular(4),
),
),
isDense: true,
labelText: "Place Bid",
labelStyle:
TextStyle(fontSize:24)),
),
),
],
),
),