I am new to flutter and I have been trying to center my column widgets just to grasp an understanding of the layouts but the CrossAxisAlignment property of the Column doesn't seem to work.
I have tried enclosing the column into several other widgets like container but the solutions I have found so far just overwrite the core functionality of CrossAxisAlignment property.
If I wrap the entire the Column in a Center widget then it is centered on the horizontal axis by default and CrossAxisAlignment property wouldn't work.
The only solution I found was to wrap the column in a container and setting its width property to take up entire width of the screen but that seems like brute forcing the layout instead of using the dynamic behaviour of Flutter.
Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
leading: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
body: Container(
color: Colors.grey[500],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.orange,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.blue,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
],
),
)
);
Output:
Only by hard setting the width property does it center properly
Container(
width: MediaQuery.of(context).size.width,
Output:
My question is is there a better way to use CrossAxisAlignment property without manually fixing the width?
And in what use cases does it actually work without any wrapper code?
The thing is: the CrossAxisAlignment works, but your column is only as wide as it shows on the image. This way it looks like nothing is happening.
To get your items in the center of the screen, you have to move your entire Column to the center. You can achieve this by wrapping your column inside an Align widget and setting alignment: Alignment.center.
Add alignment
body: Container(
alignment: Alignment.topCenter, ...
If property CrossAxisAlignment doesn't work, you can wrap your widget in Row and set mainAxisAlignment: MainAxisAlignment.center. It isn't the best solution for this problem, because we create extra widget.
I have wrapped with Center: -Flutter 3.0
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
this is how you can do this also.
1. width = _width,
2. alignment = Alignment.center,
double width = MediaQuery.of(context).size.width;
Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
leading: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
body: Container(
width = _width,
alignment = Alignment.center,
color: Colors.grey[500],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.orange,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.blue,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
],
),
)
);
Related
here is the UI that I'm trying to build
but this is the output
I tried alignment also , but that also didn't working
but when setting a fixed height this is working fine
but I can't fill this using the fit parameter,
here is the code
Scaffold(
backgroundColor: kDarkTheme,
body: SafeArea(
child: Column(
children: [
const SizedBox(height: 10),
Row(
//code for top button
),
const SizedBox(height: 150),
Stack(
children: [
Center(
child: CircleAvatar(
radius: radiusSize + 5,
backgroundColor: kDarkCounterColor,
child: CircleAvatar(
backgroundColor: kDarkTheme,
radius: radiusSize,
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.only(top: 35),
child: Text(
'39',
style: GoogleFonts.italiana(
fontSize: 120, color: kDarkCounterColor),
),
),
),
],
),
const SizedBox(height: 15),
const Text(
'Tap To Count',
style: TextStyle(
fontFamily: 'Helvatica',
color: Color(0xff656158),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomRight,
child: SvgPicture.asset(
kDarkThemeImage,
)),
)
],
),
))
this is the code
then the first error appears again. how could I fix this?
You are using the Expanded widget on a column that doesn't have a set size. Try adding MainAxisSize attribute to your column, like this:
Column(
mainAxisSize: MainAxisSize.max, // Add this like
children: [
...
This will make your column fit the whole available size on the previous widget (a scaffold for the whole screen). Then the expanded widget will fill the remaining space not used by the other widgets inside the column.
In my app I have a bottomBar which is placed at the bottom right above the SafeArea:
The problem is that I would like to have a white Container at the bottom (red arrow in image) so that for bigger iPhones (where the bottom of the screen IS NOT EQUAL to the safeArea) the empty place in the image if filled white.
For phones where the bottom screen is equal to the safeArea the fillContainerHeight should simply be nil/zero.
This is my setup:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
// mainAxisSize: MainAxisSize.max,
children: [
SafeArea(
child: Row(
children: [
Expanded(
child: Container(
height: 49,
color: Colors.white,
)),
Container(
height: 49,
child: Image.asset('assets/images/bottomBar.png')),
Expanded(
child: Container(
height: 49,
color: Colors.white,
)),
],
),
),
Container(color: Colors.white) // -> fill container
],
)
Right now the container is not being shown. What is the best way to solve my problem here? I couldn't find anything on this. Let me know if you need any more info!
You could try to use the stack widget like this (the second child (align widget) is positioned above your SafeArea widget):
return Stack(
children: [
SafeArea(
child: Scaffold(
appBar: AppBar(),
body: // Your other widgets here
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.white,
height: MediaQuery.of(context).padding.bottom;,
),
)
],
);
Another option would be to wrap your SafeArea in a Container and give it a white background while setting the top property to false (= meaning the SafeArea will not be applied to the top):
return Container(
color: Colors.white,
child: SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(),
body: // Your other widgets here
),
),
);
I need This create text on Left I created simple UI using flutter. I have a problem. I need this Create
Text on Left side. I didn't add center tag to my code but when I add devider to my code the text automatically in center . I want devider but also I want this text on left align ? How can I do that ?
My code Flutter
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: new Center(child: new Text('Create',style: TextStyle(fontFamily: "Montserrat", color: Colors.black))),
leading: GestureDetector(
onTap: () { },
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
backgroundColor: Colors.white,
body: GestureDetector(
child: new SingleChildScrollView(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
),
Divider(
height: 2,
color: Colors.red,
),
SizedBox(
height: 17.0,
),
Container(
// margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
child: Text('Create')
)
],
)
),
),
);
}
}
Add this line to your text container.
alignment: Alignment.centerLeft,
example:
Container(
alignment: Alignment.centerLeft,
child: Text('Create'),
)
So I've never used flutter but as a front end developer this is the insight I can offer.
There's two reasons why this could be happening. Either the text is in a container which is not left aligned or the Text object is not left aligned.
To go about fixing this the first thing I would do is put borders around everything so that I can figure out the reason for this issue. This means add style "border: 2px solid green" or any variation to the text (and possibly eventually something like text-align and also adding a border to the container itself (and eventually possibly changing its width or finding a different method to realign it)
Add this to your column
mainAxisSize: MainAxisSize.max,
and this to your text container
alignment: Alignment.centerLeft,
So all code will be like this
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: new Center(child: new Text('Create',style: TextStyle(fontFamily: "Montserrat", color: Colors.black))),
leading: GestureDetector(
onTap: () { },
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
backgroundColor: Colors.white,
body: GestureDetector(
child: new SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
),
Divider(
height: 2,
color: Colors.red,
),
SizedBox(
height: 17.0,
),
Container(
// margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
alignment: Alignment.centerLeft,
child: Text('Create')
)
],
)
),
),
);
}
}
You have to pass the container as the child of Align. If you want to align every element to the left then you can just use :
Column(
crossAxisAlignment:CrossAxisAlignment.start,
children:[])
I'm building a layout with a GridView and Cards. I want to put a color to the bottom of each card. I found this question Fill an area with color in Flutter and tried to do the same trick for bottom, but each time The SizedBox Overflows the round card corners. Any idea of how to fix this?
The sample code below shows the issue. I try to color the bottom part of the card, and when I do this, the corners of the card are lost, like overflow from the Container.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue,
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Card(
margin: EdgeInsets.all(20),
elevation: 10,
child: SizedBox(
height: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text("line1"),
Text(
"line2",
),
Expanded(
child: Container(
/*color: Colors.orange,*/ child: Text("Bottom"),
)),
],
),
),
),
Expanded(
child: Container(),
)
],
),
);
}
Try using BoxDecoration in your Container and use the same radius as your Card (4.0)
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(4.0),
bottomRight: Radius.circular(4.0))),
child: Text("Bottom"),
),
),
I was trying to achieve an effect of allowing a widget to overflow to another widget as seen here
The code I've this far is this:
#override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return new Column(children: <Widget>[
new Container(
color: Colors.blue,
height: screenSize.height / 2,
width: screenSize.width,
child: new Center(
child: new Container(
margin: const EdgeInsets.only(top: 320.0),
color: Colors.red,
height: 40.0,
width: 40.0,
),
))
]);
}
This resulted in the following, the square is cut off by the container.Is there another approach to this?
Generally speaking you should never overflow in flutter.
If you want a specific layout, you'll need to explicitly separate the "overflowing" widget on a different layer.
One solution for that is Stack widget, which allow widgets to be above each others.
In the end to achieve this :
the flutter code would be
new Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Container(
color: Colors.blue,
),
),
new Expanded(
child: new Container(
color: Colors.white,
),
),
],
),
new Center(
child: new Container(
color: Colors.red,
height: 40.0,
width: 40.0,
),
)
],
);