Related
Design I want:
My current design:
Hello. I want to ask. How to make a search column that has a button and a textfield like the design image I want. My design is now a textfield with an icon. The icon is in the textfield.
This is my code for search design:
Container(
width: 1120,
alignment: Alignment.topRight,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: SizedBox(
width: 310,
height: 40,
child: TextFormField(
decoration: InputDecoration(
suffixIcon: IconButton(
iconSize: 25,
icon: const Icon(
Icons.search,
),
color: Colors.blue,
onPressed: () => ""),
hintText: 'Search Document',
contentPadding:
EdgeInsets.symmetric(
vertical: 20,
horizontal: 15),
border: OutlineInputBorder(),
),
),
), Container(
width: 1120,
alignment: Alignment.topRight,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: SizedBox(
width: 310,
height: 40,
child: TextFormField(
decoration: InputDecoration(
suffixIcon: IconButton(
iconSize: 25,
icon: const Icon(
Icons.search,
),
color: Colors.blue,
onPressed: () => ""),
hintText: 'Search Document',
contentPadding:
EdgeInsets.symmetric(
vertical: 20,
horizontal: 15),
border: OutlineInputBorder(),
),
),
),
Try this code:
TextFormField(
decoration: InputDecoration(
suffixIcon: InkWell(
onTap: () => "",
child: Container(
height: 25,
color: Colors.blue,
child: AspectRatio(
aspectRatio: 2 / 1,
child: Center(
child: Icon(
Icons.search,
color: Colors.white,
)),
),
),
),
hintText: 'Search Document',
contentPadding: EdgeInsets.symmetric(horizontal: 15),
border: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Colors.black),
),
),
)
SizedBox(
width: 150,
child: TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
suffixIcon: Icon(
Icons.keyboard_arrow_down_outlined,
color: kGreyColor,
),
hintStyle: TextStyle(fontSize: 20),
hintText: "Bugün"),
),
),
how can i make this design I did something but it didn't turn out well
eddit:Content padding coming theme but not looking exactly center
You can achieve this by using a Container and a Stack.
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.grey)),
child: Stack(
children: const [
Padding(
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 5),
child: Text("Bugün"),
),
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.keyboard_arrow_down_outlined,
),
),
)
],
),
)
You can check the code on this DartPad
/* Don't change your code just add this you will get your exact answer. */
SizedBox(
width: 150,
child: TextField(
textAlign: TextAlign.end,
decoration: InputDecoration(
suffixIcon: Icon(
Icons.keyboard_arrow_down_outlined,
color: Colors.grey,
),
hintStyle: TextStyle(fontSize: 20,),
hintText: "Bugün"),
),
),
What I'm trying to do is have an image widget at the top of the screen then have some inputs and a button at the bottom for logging in like so:
And then when the user opens the keyboard I want the inputs to stick to the bottom of screen being pushed up by the keyboard which is pretty easy to do on a large device but on smaller devices the inputs hit the image and get covered by the keyboard causing errors so instead I want to have the image simply pushed upwards and off the screen by the inputs but I can't figure out how to do it so far I've managed to get this:
Which is obviously not quite what I'm after as I don't want the image to shrink I just want it to be pushed off the screen any suggestions would be much appreciated
Minimal code to get the results shown in the images
return Stack(
children: [
Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(child: Image.asset('assets/temp.png', height: 115)),
),
Padding(
padding: EdgeInsets.fromLTRB(
50, 0, 50, isKeyboardVisible ? 10 : 50),
child: Column(
children: [
TextFormField(
style: TextStyle(fontSize: 20.0),
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey[350],
hintText: 'Username',
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(40.0),
),
),
),
SizedBox(height: 20.0),
TextFormField(
style: TextStyle(fontSize: 20.0),
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey[350],
hintText: 'Password',
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(40.0),
),
),
),
SizedBox(height: 20.0),
Center(
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(20),
color: Colors.lightGreen,
child: MaterialButton(
onPressed: () {},
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
),
),
),
],
),
),
],
),
),
],
);
EDIT: So I've been playing around for a little while and I've managed to get further but now all the way this is the code I have now:
return Stack(
children: [
Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height -
MediaQuery.of(context).viewInsets.bottom, // screen height minus keyboard height but interestingly if i just do MediaQuery.of(context).size.height i dont get errors so its almost working
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Image.asset('assets/temp.png', height: 115),
),
Padding(
padding: EdgeInsets.fromLTRB(
50, 0, 50, isKeyboardVisible ? 10 : 50),
child: Column(
children: [
TextFormField(
style: TextStyle(fontSize: 20.0),
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey[350],
hintText: 'Username',
contentPadding: EdgeInsets.fromLTRB(
20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(40.0),
),
),
),
SizedBox(height: 20.0),
TextFormField(
style: TextStyle(fontSize: 20.0),
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey[350],
hintText: 'Password',
contentPadding: EdgeInsets.fromLTRB(
20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(40.0),
),
),
),
SizedBox(height: 20.0),
Center(
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(20),
color: Colors.lightGreen,
child: MaterialButton(
onPressed: () {},
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
),
),
),
],
),
),
],
),
),
),
),
],
);
As you can see in the comment thats in the code I'm taking the screen height then taking the keyboard height away as it then shrinks the Columns pushing the inputs up but I get errors however if I don't take the keyboard height away it almost works but there is a massive gap between the image and the inputs which is not what I want hence why I'm removing the keyboard height but then that causes issues so I can't figure out what I'm supposed to do to get the desired result.
remove Flexible and then
try wrapping your column with SingleChildScrollView
Scaffold(
body: SingleChildScrollView(child:Column(
I am trying to design the ui page and i successfully reduces the width of bottomnavigationbar buy using padding on left and right. But the problem is if i reduces the with of bottomnavigationbar then it is take space at each corner of navigationbar which is in second image (black arrow). Below i have added the code and two images,the first image is the image from adobe xd which i trying to achieve this and second image is after trying to reduce the width of bottomnavigationbar.
class _SettingsState extends State<Settings> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.yellow,
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 65.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "اسمك (اسم صفحتك)",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "التصنيف",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "حساب تويتر",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.number,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "حساب انستقرام",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "موقع الكتروني",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "وصف",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(top: 25.0,left: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'مشاركة صفحتي',
style: TextStyle(
color: Colors.redAccent, fontSize: 18.0,
decoration: TextDecoration.underline,),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: MaterialButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0),
),
minWidth: 280.0,
height: 47.0,
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home1()));
},
textColor: Colors.white,
color: Colors.redAccent,
child: Text(
'تسجيل خروج ',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25.0),
),
),
),
],
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(left: 50.0,right: 50.0),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40)))),
child: BottomNavigationBar(
backgroundColor: Colors.grey[200],
currentIndex: 3,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.add,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.search,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.star_border,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline,color: Colors.redAccent,size: 35.0,),
title: Text(''),
),
],
),
),
),
);
}
The vertical unwanted space is because the Text() widget.
Please try changing this, inside each BottomNavigationBarItem
Replace your --> title: Text('')
With this --> title: Container()
To reduce or increase the left and right space in the bottomNavigationBar, change the values of Padding() like
Padding(padding: const EdgeInsets.only(left: 10.0,right: 10.0),
This is the screenshot of the screen. When the floatingActionButton is clicked, I'm presenting modekBottomSheet. The modelBottomSheet has 4 TextFields and 1 RaisedButton. I want the textField and raised button go up along with the keyboard. The RaisedButton bottom should be the top of the keyboard.
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) {
return _showModelBottomSheetContent(context);
},
);
},
backgroundColor: Colors.blue,
child: Icon(
Icons.add,
size: 30,
),
),
Container _showModelBottomSheetContent(BuildContext context) {
return Container(
color: Color(0xFF737373),
height: 440,
child: Container(
padding: EdgeInsets.only(top: 20, left: 12, right: 12, bottom: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
"Add Customer",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
),
TextField(
style: TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: "Customer Name",
fillColor: Colors.white54,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(8.0),
borderSide: new BorderSide(),
),
),
),
TextField(
keyboardType: TextInputType.number,
style: TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: "Mobile No",
fillColor: Colors.white54,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(8.0),
borderSide: new BorderSide(),
),
),
),
TextField(
keyboardType: TextInputType.number,
style: TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: "Altername mobile no.",
fillColor: Colors.white54,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(8.0),
borderSide: new BorderSide(),
),
),
),
TextField(
style: TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: "Address",
fillColor: Colors.white54,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(8.0),
borderSide: new BorderSide(),
),
),
),
RaisedButton(
padding: EdgeInsets.only(top: 10, bottom: 10),
color: Colors.blue,
child: Text(
'ADD',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w700),
),
onPressed: handleAddCustomer,
),
SizedBox(
height: 20,
)
],
),
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(12),
topRight: const Radius.circular(12),
),
),
),
);
}