I am trying to align something to the right without resizing it's parent. So technically the box size should be dependent on the text object, and the icon should be aligned to the right.
return new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("this is a test string"),
new Align(
alignment: Alignment.topRight,
child: new Icon(Icons.speaker_notes),
),
]);
Once the alignment is set to Alignment.topRight the box gets drawn with the full screen width. I understand why it gets rendered like this, but can't think of a solution either. Any ideas?
You could try something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Align(
alignment: Alignment.topLeft,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Text("this is a test string"),
new Icon(Icons.speaker_notes),
]),
),
);
}
Result
Related
I have Column but issue is if screen very small height there is error:
BOTTOM OVERFLOWED BY 5.0 PIXELS
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CenterBoxText(),
SizedBox(height: 1),
RaisedButton(
child: Text(‘Example’),
),
],
),
I have try replace Column with ListView and this stop error. But now on large screen Widget are display from top and not in center. Because ListView no have mainAxisAlignment: MainAxisAlignment.center.
How to solve?
Thanks!
Try wrapping your Column widget with SingleChildScrollView widget, It will provide the ability to scroll.
Like this :
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CenterBoxText(),
SizedBox(height: 1),
RaisedButton(
child: Text(‘Example’),
),
],
),
),
If you are having problems with the Column creating an overflow, then it is probably overflow in the vertical axis. ListView enables scrolling in the vertical axis and allows the overflow pixels to be below the viewing screen. That is why ListView works for you and Column doesn't. Since you want Column, then you just need to wrap the Column in an Expandable so the Column fits within the available space.
Here is a complete example:
import 'package:flutter/material.dart';
class ColumnTest extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//CenterBoxText(),
SizedBox(height: 1),
RaisedButton(
child: Text('example'),
),
],
),
))
],
),
);
}
}
Replace your Column with ListView.
In your ListView - add - shrinkWrap: true, then wrap your ListView with Center widget.
Good morning. I'm trying to create this screen. Two problems with that:
1) I can't stretch the green horizontal line to the entire width. This is my code, more or less:
Scaffold(
Stack(
Center(
Column(
...
),
),
Align(
alignment: Alignment.center,
child: Image(
image: AssetImage('assets/load_line.png'),
fit: BoxFit.fitWidth,
),
),
And this is what my code is giving me. Seems like there is a padding or margin somewhere, but I can't find it.
2) As you can see in my first screenshot, I need the logo and the horizontal line to center one on top of the other, but they obviously miss align. I thought using a single image, but I'm afraid the stretching would ruin it. What can I do to achieve this result?
Thanks, everyone.
You can try this way.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(title: Text("Title")),
body: Stack(
children: <Widget>[
Align(child: Image.asset("assets/images/profile.jpg")),
Align(child: Container(height: 1, color: Colors.black12)),
Align(
alignment: Alignment(0.0, 0.2),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Your first text here!"),
Text("Your second text here"),
Text("Your third text here!"),
],
),
)
],
),
);
}
Output
I want to center a Text vertically in the bottom: Sektion of my AppBar.
Some things I allready tried are:
1. wrap the Text in a Center(...) Widget
2. wrap the Text in a Column(...) and use crossAxisAlignment: CrossAxisAlignment.center
The bottom: Sektion is a PreferredSizeWidget and does not provide anything to format a Widget.
appBar: new AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
print("Settings Icon");
},
),
],
bottom: PreferredSize(
preferredSize: Size(130.0, 130.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text(
'N/A',
),
],
),
),
),
I have have found this issue here: https://github.com/flutter/flutter/issues/16262 where the Text was centered but the reproduce code did not worked out for me.
The Text should me somewhere like the red line is (see Image)
Thank you!
PreferredSizeWidget does not impose a size constraint on its child, so you must wrap the Column in a widget with defined height in order to add alignment.
Also, mainAxisAlignment should be used, since this is the vertical alignment in a Column.
bottom: PreferredSize(
preferredSize: Size(130.0, 130.0),
child: Container(
height: 130,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'N/A',
),
],
),
),
)
I'm trying to build a generic home page and I want to align the last child of my column (which contains all the widgets for the page) to the bottom of the screen but the widget wrapped in the Align is not moving. The following is what makes the most sense to me:
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ChildA(),
ChildB(),
Align(
alignment: Alignment.bottomCenter,
child: BottomAlignedChild()
)
]
)
What am I doing wrong?
You can use Expanded to make the last widget expand to the whole remaining space.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Layout',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Align Bottom Demo"),
),
body: new Column(children: <Widget>[
new Text("Text 1"),
new Text("Text 2"),
new Expanded(
child: new Align(
alignment: Alignment.bottomCenter,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.star),
new Text("Bottom Text")
],
)))
]),
);
}
}
Here is the result
Another approach is using Spacer():
...
Column(children: [Text1, Text2, Spacer(), YourBottomWidget()]),
...
I have always used Spacer for these kind of cases in Column or Row. Spacer takes up all the available space between two widgets of Row/Column.
For given example, you can try following
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ChildA(),
ChildB(),
Spacer(),
BottomAlignedChild()
]
)
There are multiple ways of doing it.
Use Spacer:
Column(
children: <Widget>[
TopContainer(),
Spacer(), // <-- Spacer
BottomContainer(),
],
)
Use mainAxisAlignment:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
children: <Widget>[
TopContainer(),
BottomContainer(),
],
)
Combine Expanded and Align:
Column(
children: <Widget>[
TopContainer(),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: BottomContainer(),
),
),
],
)
Screenshot (same for all)
If you are flexible to change column to a stack, you can do the following.
body: Container(
child: Stack(children: <Widget>[
Text('Text 1'),
Text('Text 2'),
Align(
alignment: Alignment.bottomCenter,
child: Text(
"Text in bottom",
),
),
]),
),
You can try wrapping the widgets which needs to be at the top inside another Column widget, thereby making the root widget containing only two children. 1st child containing all the widgets which need to be aligned at the top and the 2nd child containing widget which is to be placed at the bottom. Now you use mainAxisAlignment: MainAxisAlignment.spaceBetween to align 1st child to the top and second to the bottom.
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
children: <Widget>[
ChildA(),
ChildB(),
]
),
BottomAlignedChild(),
]
);
I have a Stack widget with some children. One of those children is an Align which has a Container child which has a Column child. This Column has some children. Now, in my Stack, the Column is way bigger than it should be (it fills the complete screen) although a third of that space would be enough. I'd like to know how I can use something like Flexible so I can use the fit property to tighten up the space. Is this possible?
Here is a representation of my code:
new Stack(
children: <Widget>[
new Container(...),
new Align( // This takes up way more space than needed!
alignment: new Alignment(1.0, 1.0) // This widget should be displayed at the bottom
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget> [
new Container(child: new Center(child: new Text("text"))),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
]
)
)
)
]
)
I tried playing around with the fit property but without any luck.
By default, Column has mainAxisSize defaulting to MainAxisSize.max.
Which means that Column will take all the available height.
In your case, you don't want that. So you can set that value to MainAxisSize.min, which will do the opposite : fit it's children.
The end result is :
child: new Stack(
children: <Widget>[
new Container(...),
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
color: Colors.purple,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[new Text("foo"), new Text("hello world")],
),
),
)
],
),