So I am trying to create a layout like this. Where I have 2 text fields horizontally but upon wrapping it in a row. However upon reloading no text field shows up:
Through this code however upon reloading the none of this appears:
Column(
children: <Widget>[
SizedBox(height: 10.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.grey[400]
)
),
),
SizedBox(width: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.grey[400]
)
),
),
],
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Email/Mobile Number',
labelStyle: TextStyle(
color: Colors.grey[400],
)
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'Password',
labelStyle: TextStyle(
color: Colors.grey[400],
)
),
),
],
)
You have to use an Expanded widget .
Replace your Row widget with the one below:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
// optional flex property if flex is 1 because the default flex is 1
flex: 1,
child: TextField(
decoration: InputDecoration(
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.grey[400]
)
),
),
),
SizedBox(width: 10.0),
Expanded(
// optional flex property if flex is 1 because the default flex is 1
flex: 1,
child: TextField(
decoration: InputDecoration(
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.grey[400]
)
),
),
),
],
),
The TextField widgets in your Row have no specified width so Flutter doesn't know how much horizontal space the text fields should take up.
To fix, wrap both of your TextFields in an Expanded widget. Expanded sizes the text fields according to the available width in the row.
Related
I have a form widget which holds the Column as its child. The reason of Column widget is to have username and password fields one after another-password field in new line. In addition, I need to have username and password logos next to the respective fields, so I decided to use Row widget which will hold the Icon and TextFormField. However, flutter provides me error. Can someone please help?
Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 30),
child: TextFormField(
enabled: formFieldEditable,
validator: emptyNullValidatorForFormField,
decoration: InputDecoration(
focusedBorder: _inputFormFieldOutlineInputBorder(
borderSideWidth: ProjectSpecifics.signinScreenInputBorderWidth,
borderSideColor: ProjectSpecifics.signInPageInputBorder,
),
enabledBorder:_inputFormFieldOutlineInputBorder(
borderSideWidth: ProjectSpecifics.signinScreenInputBorderWidth,
borderSideColor: ProjectSpecifics.signInPageInputBorder,
),
/*icon: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFF5663FE),
width: 2,
),
borderRadius: BorderRadius.circular(5),
),
child: const Icon(
Icons.email,
color: ProjectSpecifics.signInPageInputBorder,
),
),*/
labelText: "EMAIL"),
onChanged: (val) {
emailVariableReference = val;
},
),
),],
),
Wrap TextFormField with Flexible or Expanded widget.
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.radar),
Expanded(child: TextFormField()),
],
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.abc),
Flexible(child: TextFormField()),
],
),
],
),
How to make modify Sliverappbar so I can see the background image with FlexibleSpaceBar when I scroll up?
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
fit: BoxFit.cover,
)),
),
I'm afraid this is the standard behavior of the FlexibleSpaceBar. You can change the color but not make it transparent.
A workaround I found is to use a Stack instead of the FlexibleSpaceBar:
SliverAppBar(
expandedHeight: 200.0,
floating: true,
pinned: true,
snap: true,
flexibleSpace: Stack(
children: <Widget>[
Positioned.fill(
child: Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
fit: BoxFit.cover,
),
),
Positioned.fill(
child: Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
),
textAlign: TextAlign.center,
),
),
),
),
],
),
),
I have different vertical spacing in two containers with the same contents. I have tried it with different widgets, it is always the same.
The 'Card' widget contains a 'Column' with two identical 'Containers', each containing an identical 'ListTile' with an identical 'child: Text'.
What can I do to make the vertical distances equal and as small as possible?
Container(
width: screenWidth * 0.5, height: 300,
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
width: screenWidth * 0.5, height: 280,
padding: EdgeInsets.all(1),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: const BorderRadius.all(Radius.circular(8.0),),
side: BorderSide(
color: Colors.black,
width: 1.0,),
),
color: Colors.white,
elevation: 4.0,
shadowColor: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children:[
Container(
padding: EdgeInsets.all(0.0),
margin: EdgeInsets.all(0.0),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.black),
),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 5.0),
dense: true,
isThreeLine: false,
title: Text(
selTitle,
style: TextStyle(
color:Colors.black,
//backgroundColor: Colors.limeAccent,
backgroundColor: selColor(selIndex),
fontSize: 20,
fontWeight: FontWeight.bold,
),
)
)
),
Container(
padding: EdgeInsets.all(0.0),
margin: EdgeInsets.all(0.0),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.black),
),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 5.0),
dense: true,
isThreeLine: false,
title: Text(
"noch ein sehr langer Text: jihiuwh uewua8h ieshg lisru hirluh spi",
style: TextStyle(
backgroundColor: myBTN_HELLGRAU,
fontSize: 16,
)
),
)
)
]
)
),
)
]
)
),
see details and
here is the whole application
The vertical distances in 'Andorra' are much larger than in the text below.
How do I get the spacing in the upper field smaller?
I have found a solution. Insert into the first ListTile solved my problem:
visualDensity: VisualDensity(horizontal: 0, vertical: -4),
I have a text which is basically a title in a box and I want to provide a background color to the space behind that text .
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Your Profile',
style: TextStyle(
color: Colors.blue,
fontSize: 26.0,
background: Paint()..color = Colors.blue,
),
This is what I tried but it seems not working.
Expected:Here
"Your profile" text has a background color, I need to achieve this.
You can wrap it with a Container() but, most probably you have to define the width with something like double.maxFinite
Check this
Container(
width: double.maxFinite,
color: Colors.red, //define the background color
child: Text("My Text"),
)
Short answer:
Text(
"Hello World",
style: TextStyle(backgroundColor: Colors.blue), // give any color here
)
Full answer
You can use this in your showDialog call, Here is the full widget you were looking for.
Dialog(
elevation: 12,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.blue[800],
width: double.maxFinite,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(vertical: 16),
child: Text(
"Your Profile...",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 32),
child: Column(
children: <Widget>[
SizedBox(height: 12),
TextField(decoration: InputDecoration(hintText: "Select a Photo")),
TextField(decoration: InputDecoration(hintText: "Take a Photo...")),
TextField(decoration: InputDecoration(hintText: "Choose form Library")),
],
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 12),
child: RaisedButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
child: Text("Back"),
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
),
)
],
),
I agree with Saeb Nabil's answer, the easiest way is to use a container. That way you can also control the padding around the text. You can also use .withOpacity() to add transparency if you wish:
Container(
width: 100,
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 10),
color: Colors.grey[900].withOpacity(0.6),
child: Text(
"Hello world!",
style: TextStyle(
fontSize: 14,
color: Colors.white),
), // Text
), // Container
With MediaQuery I can get height and width of my Samsung S7 Edge screen size so I can work with it. But how to use MediaQuery to layout the multiple column dynamic text in ListTile? In my demo project I set the text size to 12 and in Samsung S6 I get overflow issues... Any info or example for text scale factor in Flutter?
I found one solution here (How can Flutter handle dpi text and image size differences) and I try to build demo project. S6 textScaleFactor is 1.1 an the S7 is 1.0....
My original demo app that I test it with S7 text size was 12. And when I try to test it in S6 I get overflow issue... I need to scale down or up with MediaQuery to set text scale factor, so it can work most of the devices without getting a overflow issues?
In ListTile I have a column that has 4 separate lines of text and all the value comes from database. If the text value is long I get a overflow issues on S6 device. So my question is How to use MediaQuery to set scaleFactor for text in Flutter?
Update:
new ListTile(
trailing: new Icon(Icons.chevron_right),
onTap: () {
},
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
‘My Account Details:’,
style: new TextStyle(
fontSize: 14.0, fontWeight: FontWeight.bold, color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
subtitle: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(‘Hello Flutter’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(’Today is **************’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(‘Name’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(‘Dart’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(’Surname’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(‘Flutter’,
style: new TextStyle(
fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(‘Account Name: Let’s Flutter all day long till down with fancy User Interface’,
style: new TextStyle(
fontSize: 12.0, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(‘109.65’,
style: new TextStyle(
fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
],
),
),
You can solve your issue wrapping your Text widget into a Flexible to avoid the overflow. I put maxLines 1 to see the Fade overflow :
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: new Text(
"Account Name: Let's Flutter all day long till down with fancy User Interface",
maxLines: 1,
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
),
new Text(
"109.65",
style: new TextStyle(
fontSize: myTextSize,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
I added a global variable :
var myTextSize = 12.0;
Also you can use the LayoutBuilder in order to get the maxHeight or maxWidth of your device, after that you can change the text size like this example:
var myTextSize = 12.0;
return LayoutBuilder(builder: (context, boxConstraints) {
print(boxConstraints.maxHeight);
if (boxConstraints.maxHeight <= 667.0){
myTextSize = 10.0;
}
return Container(
child: new ListTile(
trailing: new Icon(Icons.chevron_right),
onTap: () {},
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"My Account Details:",
style: new TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
subtitle: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"Hello Flutter",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(
"Today is **************",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"Name",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(
"Dart",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
"Surname",
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
new Text(
"Flutter",
style: new TextStyle(
fontSize: myTextSize,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: new Text(
"Account Name: Let's Flutter all day long till down with fancy User Interface",
maxLines: 1,
style: new TextStyle(
fontSize: myTextSize, color: Colors.black54),
overflow: TextOverflow.fade,
),
),
new Text(
"109.65",
style: new TextStyle(
fontSize: myTextSize,
fontWeight: FontWeight.bold,
color: Colors.black),
overflow: TextOverflow.fade,
),
],
),
],
),
),
);
});
#override
Widget build(BuildContext context) {
return WidgetsApp(
// ...
builder: (context, child) {
final mediaQueryData = MediaQuery.of(context);
return MediaQuery(
data: mediaQueryData.copyWith(textScaleFactor: 1.5),
child: child,
);
},
);
}
If you want to make the Text font size to be Responsive
this is a simple trick
fontSize: MediaQuery.of(context).size.width * 0.05 //u can play with equation
or
fontSize: MediaQuery.of(context).size.width > 500 ?60
: MediaQuery.of(context).size.width < 300 ?40: 30,