I'm sorry for my bad english
I just want to center the icon widget on the row. How can I do that?
here is the screenshot
what i want is here
here is my code
Container(
color: Colors.red,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 40.r,
//backgroundImage: AssetImage(_imagaPath),
backgroundColor: Colors.blue,
),
Padding(
padding: EdgeInsets.all(6.0.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextWidget(
"Good morning",
fontSize: 12.sp,
color: silver,
fontWeight: semiBold,
),
TextWidget(
"John",
fontSize: 20.sp,
fontWeight: bold,
),
],
),
),
const Spacer(),
Container(
color: Colors.yellow,
child: const Icon(Icons.add),
),
],
),
)
wrap your widget with Center like:
Center(
child: Container(
color: Colors.yellow,
child: const Icon(Icons.add),
),
),
the output would look like:
maybe you just make this crossAxisAlignment: CrossAxisAlignment.start,
to
crossAxisAlignment: CrossAxisAlignment.center, for first Row
Related
I don't want the button to be in the centre instead of that I want to change the location of the button to the right and I don't know how to do that. I need some help
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
),
),
I tried to use Padding, but I'm new to Flutter
Try using Align widget like
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
Wrap the ElevatedButton in Row and add Expanded(child: SizedBox.expand()) as first child to this row and ElevatedButton as 2nd child.
You can give crossAxisAlignment to your column:
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
If this doesn't work, you can also do this:
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(child: Container()),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
],
),
SizedBox(
height: 50.0,
),
],
It depends on the widget tree, how its aligned. Your Padding widget may be wrapped inside some widget which is center aligned. So assuming that your Padding widget alignment is not affected by any parent widget. Here is solution to this.
There are multiple approaches for that. For example,
You can add crossAxisAlignment: CrossAxisAlignment.end, in Column attributes.
You can wrap your ElevatedButton inside a Row and add the mainAxisAlignment: MainAxisAlignment.end, attributes.
You can use Align class to make it work.
Just like this, here i have used both Column and Row alignments for the sake of demonstration. But you can use whatever suits best to your situation.
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
],
),
),
),
I'm new to flutter. I have a alignment-centered column with dynamically sized children widgets. I want to add a title Text widget on the top left most of that column based on its width. I want all the other child widgets to be centered. How can I achieve this?
Problem Visualized
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"Title",
style: themeData.textTheme.titleMedium!.copyWith(
fontWeight: FontWeight.bold,
fontSize: 20
)
),
ColoredBox(color: Colors.red, child: SizedBox.fromSize(size:const Size(100, 30))),
ColoredBox(color: Colors.blue, child: SizedBox.fromSize(size:const Size(200, 60))),
ColoredBox(color: Colors.green, child: SizedBox.fromSize(size:const Size(170, 40))),
]
)
Just wrap your Text widget with Align widget
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Align(
alignment: Alignment.centerLeft,
child:
Text(
"Title",
)),
ColoredBox(color: Colors.red, child: SizedBox.fromSize(size:const Size(100, 30))),
ColoredBox(color: Colors.blue, child: SizedBox.fromSize(size:const Size(200, 60))),
ColoredBox(color: Colors.green, child: SizedBox.fromSize(size:const Size(170, 40))),
]
);
Try below code and set CrossAxisAlignment.start refer layout
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('Title'),
ColoredBox(
color: Colors.red,
child: SizedBox.fromSize(size: Size(100, 30)),
),
ColoredBox(
color: Colors.blue,
child: SizedBox.fromSize(size: Size(200, 60)),
),
ColoredBox(
color: Colors.green,
child: SizedBox.fromSize(size: Size(170, 40)),
),
],
),
Result->
So, I'm new in the Flutter scene and I'm having some trouble finishing a message bubble for a chat practice app. It's working ok, like this:
https://i.ibb.co/1qstjqR/now.jpg
The code that generates the bubble is like this:
Widget bubble(){
return Padding(
padding: padding(),
child: Row(
mainAxisAlignment:
mine ? MainAxisAlignment.end : MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 30),
Flexible(
child: Row(
mainAxisAlignment:
mine ? MainAxisAlignment.end : MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//BUBBLE TAIL
mine
? Container()
: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(math.pi),
child: CustomPaint(
painter: CustomShape(colorChat),
),
),
Flexible(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: colorChat,
borderRadius: border(),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
//MESSAGE STR CONTENT
Text(
messageStr,
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 16),
),
//TIMESTAMP (AND DETAIL IN FUTURE)
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(
dateTimeStr,
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
],
),
),
),
//BUBBLE TAIL
mine ? CustomPaint(painter: CustomShape(colorChat)) : Container(),
],
)),
],
),
);
The problem is: I'm trying to put a string containing more detail about de message (like the extension and size of a file) in the same row of the datetime, to the far left.
The closest I've managed to do is the code below:
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"some detail",
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Text(
dataMsg,
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
],
),
)
But that makes the bubble being always big:
https://i.ibb.co/JjYx0vY/detail-bad.jpg
That's because of the Expanded. But without it the first Align widget don't work and stay to the far right.
How I'd like it to be:
https://i.ibb.co/gt633Gc/detail-ok.jpg
Thanks!
Remove the Expanded and Align widgets. And add property mainAxisAlignment: MainAxisAlignment.end to the Row widget.
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"some detail",
style: TextStyle(color: Colors.white, fontSize: 10),
),
Align(
alignment: Alignment.centerRight,
child: Text(
"hello",
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
],
),
)
I'm currently writing my first Flutter App and I got a little stuck here. Basically what I'm trying to do is display an image at the top of the screen (with 100px top-margin) and display a Column which contains some Text and a Button on the centre of the screen. I tried moving mainAxisAlignment crossAxisAlignment into the outer Column Widget but that centres everything.
Here's my code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
Opacity(
opacity: 0.25,
child: Container(
child: Image.asset('assets/images/logo.png'),
margin: EdgeInsets.only(top: 100),
width: 75,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Please enter your first name:'),
TextButton(onPressed: () {}, child: Text('Submit'))
],
)
],
),
),
);
You actually only need to wrap the second column in an Expanded widget, "so that the child fills the available space", that's all:
Column(
children: [
Expanded(
child: Column(
children: [],
),
)],
),
try, wrap your second Column inside a Center widget.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
Opacity(
opacity: 0.25,
child: Container(
child: Image.asset('assets/images/logo.png'),
margin: EdgeInsets.only(top: 100),
width: 75,
),
),
Center(
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Please enter your first name:'),
TextButton(onPressed: () {}, child: Text('Submit'))
],
)
],
),
),
),
);
If this doesn't work you could also wrap it in an Align widget and add the alignment property to it.
Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Please enter your first name:'),
TextButton(onPressed: () {}, child: Text('Submit'))
],
),
),
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 200,
width: 200,
color: Colors.pink,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
),
],
),
),
),
),
);
}
you have to use mainAxisAlignment property to set MainAxisAlignment.center.
In order to center align your second column,
Make sure MainAxisAlignment of your Second Column is MainAxisAlignment.center
Wrap your second column inside a Align Widget
Now, wrap your Align widget with Expanded widget.
This should solve your issue.
Check this refrence.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 18.0,
),
const Padding(
padding: EdgeInsets.only(left: 16.0),
child: Text(
'Recent Search(s)',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
),
Expanded(
child: Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
MdiIcons.magnify,
color: Colors.grey.shade600,
size: 72.0,
),
const SizedBox(
height: 8.0,
),
Text(
'Search for places',
style: TextStyle(
fontSize: 14.0,
color: Colors.grey.shade600,
fontWeight: FontWeight.w600),
),
Text(
'You haven\'t serached for any items yet...',
style: TextStyle(
fontSize: 12.0,
color: Colors.grey.shade700,
fontWeight: FontWeight.w500),
),
Text(
'Try now - we will help you!',
style: TextStyle(
fontSize: 12.0,
color: Colors.grey.shade700,
fontWeight: FontWeight.w500),
)
],
),
),
)
],
How to place the "question mark" at center of row?
Expected result is "?" are all at center regardless of the values on left/right.
body: ListView.builder(
itemCount: testList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.green,
child: Text(testList[index].n1.toString(), style: TextStyle(fontSize: 80,)),
),
Container(
color: Colors.red,
child: Text(testList[index].x, style: TextStyle(fontSize: 80,)),
),
Container(
color: Colors.green,
child: Text(testList[index].n2.toString(), style: TextStyle(fontSize: 80, )),
),
],
),
Text('>'),
Text('<'),
Text('='), //
],
),
);
}),
You can use row and Expanded with flex widget to achieve your desire output.
Following minimal code help you more.
Card(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: Row(
children: [
Expanded(child: Container()),
Container(
color: Colors.green,
child: Text('10',
style: TextStyle(
fontSize: 80,
)),
),
],
),
),
Container(
color: Colors.red,
child: Text("?",
style: TextStyle(
fontSize: 80,
)),
),
Expanded(
flex: 1,
child: Row(
children: [
Container(
color: Colors.green,
child: Text('100',
style: TextStyle(
fontSize: 80,
)),
),
Expanded(child: Container()),
],
),
),
],
),
Text('>'),
Text('<'),
Text('='), //
],
),
)