I want to align the (+,-) icons and TextField on same Vertical Position. But i'm not getting this.
Here is My Code.
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
InkWell(
child: Icon(Icons.remove ,color: Colors.white),
onTap: (){},
),
Container(
width: 35,
height: 40,
child: TextField(
inputFormatters:[WhitelistingTextInputFormatter(RegExp(digit_Reg_Expression))],
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
cursorColor: Colors.green,
controller: Controler_size[index],
),
),
InkWell(
child: Icon(Icons.add,color: Colors.white),
onTap: (){},
)
],
)
Please Help me to position these Widgets Vertically so that they align in the same vertical position.enter image description here
If you want to place elements vertically, use the Column widget.
If you want to place elements horizontally use the Row widget.
Check the code below: It works perfectly:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
InkWell(
child: Icon(Icons.remove ,color: Colors.white),
onTap: (){},
),
Container(
width: 35,
height: 40,
child: TextField(
inputFormatters:[WhitelistingTextInputFormatter(RegExp(digit_Reg_Expression))],
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
cursorColor: Colors.green,
controller: Controler_size[index],
),
),
InkWell(
child: Icon(Icons.add,color: Colors.white),
onTap: (){},
)
],
)
I hope this helps.
I followed the link you attach in the question, I think the problem is at your Container which wraps the TextField:
Container(...
width: 35,
---> remove this: (height: 40) ...
)
set mainAxisAlignment to MainAxisAlignment.center
Related
I have learned that to make a Text wrap, you have to wrap it inside a Flexible() and set softWrap: true.
I have a ListView() with items generated by the following code:
return Container(
constraints: const BoxConstraints(maxWidth: 300),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Checkbox(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
GestureDetector(
onTap: () {},
child: Container(
color: Colors.white,
child: Row(mainAxisSize: MainAxisSize.min, children: [
Icon(getCustomIcon(name: f.icon), size: 20, color: Colors.black),
const SizedBox(width: 6),
Flexible(
child: Text(f.name,
softWrap: true, style: TextStyle(fontSize: 14))),
const SizedBox(width: 6),
]),
))
]),
);
The Container should have a maximum width of 300 (see the outer BoxConstraints), but the innermost Text() node does not wrap and overflows.
Somewhere in here the box constraints get lost, but I don't understand where.
Note: I removed UI non-relevant code like onTap/onChange/...
After some more testing around I was able to solve the problem myself.
The problem is wrapping a row inside a row (even with other containers in-between) removes the constraints.
The solution is to put a Flexible/Expanded as the child of the parent row:
// innerRow is unconstrained
Row( children: [
...otherElements,
Row() // innerRow
]);
// innerRow is constrained
Row( children: [
...otherElements,
Flexible( // Flexible or Expanded tells the child to fill in the remaining space.
child: Row() // innerRow
)
]);
try :
Wrap your Container with either Row() or Center().
here is Code :
return Center(
child: Container(
constraints: const BoxConstraints(maxWidth: 300),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (bool? value) {},
value: true,
),
GestureDetector(
onTap: () {},
child: Container(
color: Colors.white,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.abc,
size: 20, color: Colors.black),
const SizedBox(width: 6),
Flexible(
child: Text("f.name",
softWrap: true,
style: TextStyle(fontSize: 14))),
const SizedBox(width: 6),
]),
))
]),
),
);
Please see my code and scree shot below. I want locate Text("to be center") at center horizontally, but comparatively located right side as showen below.
I understand i'ts because I'm using expanded widget and set flex 1 & 4 and Text("to be center") are inclueded in latter block.
How can I located totally or relatively center but using expandede & flex property like this case ?
Also I understand I can adjust it by wrapping Text() with padding and set EdgeInsets.only(right:X) but I can not figure out if it is totally cenerized or not...
Row(
children: [
Expanded(
flex:1,
child:TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex:4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(
),
child: Text("to be center",style: MyText(myFontSize: 15).style()),
)
),
],
),
Just use Spacer at the end inside Row
Row(
children: [
Expanded(
flex: 1,
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex: 4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(),
child: Text(
"to be center",
style: MyText(myFontSize: 15).style(),
),
),
),
// like this
const Spacer(),
],
),
Learn more about the Spacer widget
Try below code: refer layout
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
const Expanded(
child: Center(
child: Text(
'to be center',
),
),
),
const Expanded(child: SizedBox())
],
),
Result->
The simple solutions could be:
Use textAlign attribute of Text widget or
Wrap Text widget with Center widget inside Expanded widget or
You can even explore the widget IntrinsicWidth with Center widget.
I tried adding a width to the container but it didn't do anything. By default it fills the page? Not sure what's happening. Do I have to use MediaQuery somewhere? I want the post to be the same size on both the phone and the tablet. I'm not great with explaining so I added a photo to help.
Here's my code:
body: ListView(
children: [
Container(
height: 132,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
child: Card(
margin: EdgeInsets.all(10),
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundColor: Color(0xFF192A4F),
),
title: SizedBox(
height: 39,
child: TextButton(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoSizeText(
'Username',
style: TextStyle(
color: Color(0xFF192A4F),
fontSize: 16,
fontWeight: FontWeight.bold),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(50, 30),
alignment: Alignment.centerLeft),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SeventhRoute(),
),
);
},
),
),
),
Divider(
height: 10,
color: Colors.black26,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.comment_outlined,
color: Colors.black),
SizedBox(width: 8.0),
Text(
'Comment',
style: TextStyle(color: Colors.black),
),
],
),
Row(
children: <Widget>[
Icon(Icons.bookmark_outline, color: Colors.black,),
SizedBox(width: 8.0),
Text('Bookmark', style: TextStyle(color: Colors.black),),
],
),
],
),
SizedBox(
height: 12.0,
)
],
),
),
),
],
),
double width = MediaQuery.of(context).size.width;
you can get screen width from here. Then add a logic
As example if screen width of right phone is 500 and left is 1000,
then you can set
if the screen width is <= 500 ,
set the container width as screen width
otherwise
set the container width as 500.
---Additionally---
You can get screen orientation like this
var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait
The reason specifying the width is ignored is because you didn't specify what should happen with the smaller card. The framework doesn't know if it should be aligned left, center, right, etc. To fix this, you can wrap your Card, Container, or even the whole ListView in a Center (or Align) widget.
Based on your images i can see that only the width is changing, height is constant, so i'd suggest in your container give width: MediaQuery.of(context).size.width;
And of course some padding to that container.
It looks like you want that widget to take as much width as it can, but no more than 500px wide. Trivial:
ConstrainedBox(
child: YourChild(...),
constraints: BoxConstraints(maxWidth: 500),
),
I'm trying to make a page through which the user can create a note for my Notes app. This is my build method so far:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Add Note"),
actions: <Widget>[
FlatButton(
child: Icon(
Icons.save,
color: Colors.white,
),
)
],
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField (
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "Title",
),
textCapitalization: TextCapitalization.words,
),
SizedBox(
height: 16,
),
Expanded(
child: Container(
child: TextField (
expands: true,
maxLines: 25,
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
),
)
],
),
),
)
);
}
This is how the page looks right now. How do I ensure that the cursor of the second TextField is placed at the top left and make said TextField stretch to fit the remaining height?
You should set the textAlign property of the TextField to start
textAlign: start
Edit:
based on #Andy_519's and community input please use the following
textAlignVertical: top
I would like to vertically align a DropdownButton right next to a TextField.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
DropdownButton<String>(
...
),
Flexible(
child: TextField(
...
),
),
],
)
The current behavior is:
As you can see, the bottom lines aren't aligned. I guess that's happening due to a differences in height. What would be a good practice to fix that? (I'm guessing not using a fixed height)
My final goal is something like this:
Where both lines and the text of DropdownButton and TextField are vertically aligned.
Hope this helps but I got it working! Key prop that did it for me was setting contentPadding for widgets in row to 0.0
Row(
children: <Widget>[
Flexible(
flex: 2,
child: TextFormField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
WhitelistingTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
labelText: 'Width',
contentPadding: EdgeInsets.all(0.0),
),
onChanged: (String newValue) {
_stashItem.width = "$newValue $_widthUnit";
},
)),
Flexible(
flex: 1,
child: DropdownButtonFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0.0)
),
value: _widthUnit,
items: ['cm', 'm', 'in', 'ft', 'yd']
.map((String unit) =>
DropdownMenuItem<String>(
value: unit, child: Text(unit)))
.toList(),
onChanged: (value) => setState(() {
_widthUnit = value;
})),
)
],
),
A bit late, but I had the same issue albeit with a slightly different layout:
I used TextFormField rather than TextField.
I used DropdownButtonFormField rather than DropDownButton.
Both fields were wrapped in Flexible widgets within the Row, with mainAxisSize set to MainAxisSize.min.
My text field was laid out to the left of the dropdown.
That being said, setting crossAxisAlignment to CrossAxisAlignment.end worked for me.
Try this:
Row(
mainAxisSize: MainAxisSize.min, // see 3
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible( // see 3
child: DropdownButtonFormField<String>( // see 2
...
),
),
Flexible(
child: TextFormField( // see 1
...
),
),
],
)
I am not sure whether this solution helps you or not, but I think its better than using row.
TextField(
decoration: InputDecoration(
prefix: DropdownButton(underline: Container(), ...)
),
)
Try this:
Row(
Row(mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end
children: <Widget>[
Expanded(
flex: 1
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton<String>(
...
))),
Expanded(
flex: 6
child: TextField(
...
),
),
],
)
Try this:
Container(
decoration: BoxDecoration(
border: Border(
//TODO: Customize the underline here
bottom: BorderSide(
color: Colors.white70,
width: 0.5,
),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
DropdownButton<String>(
onChanged: (c) {},
underline: Container(),
items: [
DropdownMenuItem<String>(
child: Text('Email'),
)
],
),
Flexible(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
],
),
),
I ended up editing the padding of the TextField's content, and used CrossAxisAlignment.center instead of CrossAxisAlignment.start:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
DropdownButton<String>(
...
),
Flexible(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(6.0),
),
),
),
],
)
Result:
(You see space between them due to a SizedBox added)
You can simply decrease contentPadding in InputDecoration of DropdownButtonFormField