How center widget behave as a parent? - flutter

By default,center widget take its child and center it in itself.But in my case it is not working.I want to center my Column which contain multiple rows so we rap our column in a center widget.
Center widget should take column as a child and center it.But its behave unexpectedly.
Here is my code
child: Column(
children: <Widget>[
Row(
children: <Widget>[
//This is widget 1
Expanded(
child: Text(
"Spice Jet",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 35.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
//This is widget 2
Expanded(
child: Text(
"From Mubabi to Banglore via New dehli",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
],
),
Row(
children: <Widget>[
//This is widget 1
Expanded(
child: Text(
"Air India",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 35.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
//This is widget 2
Expanded(
child: Text(
"From Jaipur to Goa",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
],
),
],
),
),
);
}
}
output of this code on emulator

Row has crossAxisAlignment to center as default. But when you wrap it into a column,
it doesnot appear in center because it has default crossAxisAlignment as start, not center. You will have to manually add this line :
crossAxisAlignment: CrossAxisAlignment.center
Your code should be like this :
....
color: Colors.deepPurple,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center
children: <Widget>[
Row(
children: <Widget>[....
Hope it helps! Happy coding:)

Try using axis alignments.
For Row,
mainAxisAlignment: MainAxisAlignment.center
For Column,
crossAxisAlignment: CrossAxisAlignment.center

Related

Why textAlign of AutoSizeText Widget and crossAxisAlignment of Wrap Widget doesn't align correctly?

I'm using a Wrap and AutoSizeText for represent a value and the unit of measure on the same line.
I'm trying to align the value and the unit of measure at the end of the Container but it doesn't happen and what I get is this:
Below I attach the code:
Wrap(
crossAxisAlignment: WrapCrossAlignment.end,
children: [
Container(
color: Colors.red,
height: calculatedHeight,
child: AutoSizeText(
val.toString() + ' ',
minFontSize: 5,
textAlign: TextAlign.end,
style: TextStyle(
fontSize: item.textSize),
)),
Container(
color: Colors.amber,
height: calculatedHeight,
child: AutoSizeText(
unit,
textAlign: TextAlign.end,
minFontSize: 5,
style: TextStyle(
fontSize: item.unitSize),
)),
],
),
if I remove the Container it obviously aligns correctly but the problem is that if I remove it, the text is not resized..
Surely the problem is wrapping the AutoSizeText with the Containers, you can try this and replace the Wrap with the Row and wrap it with a FittedBox:
FittedBox(
fit: BoxFit.fitHeight,
child:
Row(
crossAxisAlignment:
CrossAxisAlignment.end,
children: [
AutoSizeText(
val.toString() + ' ',
minFontSize: 1,
style: TextStyle(
fontSize: item.textSize,
fontWeight: FontWeight.bold,
color: HexColor(
item.colors!.back!,
),
),
),
AutoSizeText(
unit,
textAlign: TextAlign.end,
minFontSize: 1,
style: TextStyle(
fontSize: item.unitSize,
color: HexColor(
item.colors!.back!,
),
),
),
),

Container not going to bottom of screen in flutter?

I am working on flutter layouts and i am trying to get the last container to be placed exactly like bottom navigation bar, in my body used columns to set widgets and in second last widget is list view. i want list view to fill the bottom screen until last container which is acting as bottom bar.
But my last container has a lot of space at the bottom how to fix that.
class _MyPersondataState extends State<Persondata> {
double height;
double width;
final Color lightbluecolor = Color(0xFF3AB5FF);
List<int> getListItems(){
List<int> numberlist = List(10);
numberlist[0] = 5700;
numberlist[1] = 1200;
numberlist[2] = 970;
numberlist[3] = 1840;
numberlist[4] = 2520;
numberlist[5] = 5700;
numberlist[6] = 6200;
numberlist[7] = 4970;
numberlist[8] = 6840;
numberlist[9] = 7520;
var items = numberlist;
return items;
}
Widget getListView(){
var listitems = getListItems();
var listView = ListView.builder(
itemCount: listitems.length,
itemBuilder: (context, index){
return ListTile(
title: Text('Gross Salary'),
trailing: Text(listitems[index].toString()),
);
}
);
return listView;
}
#override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(''),
),
body: Container(
margin: EdgeInsets.only(left:15.0,right: 15.0),
color: Colors.white,
width: width,
alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
Text(
'What a loss carryforward is',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
SizedBox(height: 8),
Flexible(
child: new Text(
'If your costs exceeded your salary, then you will have loss for this tax year.'
' You can carry this loss.'
' This will reduce next year’s tax\n\n. '
'*How do i do that?*\n\n'
' In order to make use of this, you must send a tax return to office.'
' You do not have to worry.'
' You will then receive acknowledgement from the office.\n\n'
,
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
height: 1.2,
fontSize: 14.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w400,
),
),
),
SizedBox(height: 20),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Your Taxes in detail',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
SizedBox(height: 20),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Your income',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
SizedBox(height: 6,),
Expanded(
child: getListView(),),
Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
color:Colors.amber,
margin: EdgeInsets.only(left:2.0,right: 2.0,bottom: 1.0, top: 24.0),
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
Text(
"REFUND :",
textDirection: TextDirection.ltr,
textAlign: TextAlign.left,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
Text(
"0,00"+"$",
textDirection: TextDirection.ltr,
textAlign: TextAlign.left,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 20.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
],
),
Spacer(),
MaterialButton(
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(12.0) ),
height: 50,
onPressed: (){
// Navigator.push(context, MaterialPageRoute(builder: (context)=>Persondata()));
print("cilcked");
},
child: Text(
"Submit",
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
color: lightbluecolor ,
),
],
),
),
),
],
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
this is pic where is shpwing white space.
Give the last Container desired height and finally wrap your listView in Expanded.
Expanded(
child: ListView(
children: <Widget>[]
),
),
child: Containter(
height: x,
), //last one
),
Give the listview desired height by wrapping it inside a container and finally wrap your last container in Expanded. Here's an example!
Container(
height: x,
child: ListView(
children: <Widget>[]
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Containter(), //last one
),
),

How to align text widget in rows in google flutter?

I'm trying to align several a text which is in rows (a number, a small padding, followed by said text) in a column and don't know how to achieve it.
I already tried out every MainAxisAlignment setting in the rows property.
This screenshot should clarify my issue: The left part is the mockup and how it's supposed to look like, right-hand side is the current state in flutter.
I want the text to be aligned at the green line that I added to visualize my problem (so the first text needs to start a bit more to the right).
My code:
Widget singleStep(BuildContext context, int numToPrint, String text,
{String fineprint = ""}) {
return Padding(
padding: EdgeInsets.only(
bottom: 0.023 * getScreenHeight(context),
left: 0.037 * getScreenWidth(context)),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "#",
style: GoZeroTextStyles.regular(_NUMBERFONTSIZE,
color: GoZeroColors.green)),
TextSpan(
text: numToPrint.toString(),
style: GoZeroTextStyles.regular(_NUMBERFONTSIZE))
])),
Padding(
padding: EdgeInsets.only(left: 0.017 * getScreenWidth(context)),
child: RichText(
text: TextSpan(
style: GoZeroTextStyles.regular(_TEXTSIZE),
children: <TextSpan>[
TextSpan(text: text + "\n"),
TextSpan(
text: fineprint,
style: GoZeroTextStyles.regular(_FINEPRINTSIZE))
])))
],
));
}
All steps are wrapped in a column, which is a child of a Stack.
Advice is gladly appreciated. Also if you got any other advice to improve the code, feel free to leave a comment :)
Thank you in advance!
Cheers,
David
I hope I understand you well. There are some advices for your problem to solve it:
Consider to add SizedBox(width:20.0) before RichText widgets to achieve the align in mockup.
Looks like you want to make all Text widgets centered. Consider to add center widget so they align themselves at the center of column or row.
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Column(children: [
Expanded(
flex: 4,
child: Container(
alignment:Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey, width: 1.0)),
child:Text('I\'m in Circle',textAlign: TextAlign.center,
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.black)))),
SizedBox(height: 15),
Text('Title',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.black)),
SizedBox(height: 10),
Expanded(
flex: 3,
//Use listview instead of column if there are more items....
child: Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: [
Row(children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#1',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
]),
Row(children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#2',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
]),
Row(
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#3',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
])
]))
]));
}
My suggestion would be to return Container instead of Padding from the Widget singleStep and use the property padding of the container to set the padding.
Screenshot
Below is a very basic code snippet using Container using which I could add padding to the left of texts:
void main() {
runApp(
MaterialApp(
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: Container(
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.only(
left: 20.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
],
),
),
),
),
),
);
}
Hope this is helpful.

Flutter Flexible not wrapping text within a column

I am trying to make a widget that may have some long text that I would want to wrap a few lines.
I am trying to use the "Flexible" widget to wrap my Text but it is still overflowing and I do not know what is going wrong.
Here is what is happening:
Here is my code for the Columns which will be relevant to the Text:
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
And in case it is relevant, here is the whole widget:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Material(
color: Colors.transparent,
child: Container(
height: 100.0,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
],
),
),
),
),
);
}
You can use Expanded Here. Expanded, which forces the child to expand to fill the available space. you can expand column here.
Here is code snippet for column:-
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
)
Here is what you expect:-
Hope it will work.
You need to put the Container to Expanded inside Row widget
Like this
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Expanded(child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
) ],
),
The problem is if you didn't put the Container into Expanded, the Row widget keeps expand itself to horizontal and it would overflow.
you can try this approach by placing the width of the container to 70% and for an image 30%. There is no need for Flexible widget over here
Container(
width:MediaQuery.of(context).size.width*0.7
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black
)
],
),
),

How to center two Texts in Flutter

I have the next widget:
class PoinstsDisplayState extends State<PoinstsDisplay> {
#override
Widget build(BuildContext context) {
return new Container(
width: MediaQuery.of(context).size.width*0.9,
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Color(0xff2b2b2b),
borderRadius: BorderRadius.circular(10.0),
),
child: new Text(
'5000 Pts',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Karla'
),
)
);
}
}
That looks like this:
That have the perfect position, now I want to style the number 5000 and the 'Pts' text separately but I have not managed to make it work (center two text like the image), I am try with a Row, more Containers, the Center Class etc, etc.
This is a perfect use of the rich text constructor with a couple of TextSpans.
Taking from the 2nd sample in the flutter docs, try:
Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(text: '5000 ', style: TextStyle(color: Colors.white)),
TextSpan(text: 'pts', style: TextStyle(color: Colors.red)),
],
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Karla'
),
)
You probably want to use some combination of mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, and placing some padding or an empty Container with a set width between the two text widgets for the space.
class PointsDisplay extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'5000',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
fontFamily: 'Karla'
),
),
Container(width: 5.0,height: 0,),
Text(
'Pts',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Times'
),
),
],
);
}
}
When you have a WidgetSpan as a children of TextSpan, you can use:
WidgetSpan(
child: Icon(Icons.access_time),
alignment: PlaceholderAlignment.middle
)
Use RichText: Video | Document
RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Hello ',
children: const <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' world!'),
],
),
)