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->
Related
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
I'm trying to align a Text button to the bottom of a column in a row but everything I'm trying is keeping it aligned to the top of the column.
I have a Container Child → ROW with 3 sections Image, SizedBox, (Column→ Button.)
I want to align the button to the bottom right.
The alignment properties in the Column doesn't appear to have any effect and are staying with the ROW alignment.
I have tried Align also and still nothing moves
CrossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
Here is my code:
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.network(
constants.baseImages + snapshot.data[index].logo,
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
SizedBox(
width: 215,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(snapshot.data[index].restaurantName),
Padding(
padding: const EdgeInsets.only(
top: 2.0, bottom: 2.0),
child: Text(
snapshot.data[index].address,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 12.0,
color: Colors.black54,
),
maxLines: 2,
),
),
],
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Align(
alignment: Alignment.bottomLeft,
child: TextButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(
Colors.blue),
),
onPressed: () {},
child: Text('More Info'),
),
),
],
),
]),
);
Can someone explain where I am going wrong
Thanks
On your last Column use MainAxisAlignment.end, Also you can include Spacer widget and rebuild the app.
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// Spacer(), //
TextButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
print("more infor ");
},
child: Text('More Info'),
),
],
Column isn't required, try
Align(
alignment: Alignment.bottomLeft,
child: TextButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(
Colors.blue),
),
onPressed: () {},
child: Text('More Info'),
),
),
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),
)
],
),
),
)
],
I want to make this card which i have divided into columns (Expanded widget), The problem i am facing is : i am unable to set color container (parent of right column) to full height, so only part of it shows colored background.
What I Have:
What I Want:
I tried Flutter Inspector tool and noticed that Container and its child Column are not getting full height (Even after typing mainAxisSize: MainAxisSize.max)
Instead of Using Expanded i also tried using FractionSized.. but not luck.
Code :
import 'package:flutter/material.dart';
class SubjectPage extends StatelessWidget {
final String dayStr;
SubjectPage(this.dayStr);
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 0),
child: Column(
children: <Widget>[
Card(
child: Row(
children: <Widget>[
// Column 1
Expanded(
flex: 7,
child: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
getTitle("UEC607"),
getSubName("Data Communication & Protocol"),
getVenue("E-204"),
],
),
),
),
// Column 2
// The Place where I am Stuck//
Expanded(
flex: 3,
child: Container(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
getType("L"),
getTime("9:00"),
],
),
),
)
// COlumn 2 End
],
),
)
],
),
);
}
// Get Title Widget
Widget getTitle(String title) {
return Padding(
padding: EdgeInsets.only(bottom: 8.0),
child: Text(title),
);
}
// Get Subject Name
Widget getSubName(String subName) {
return Padding(
padding: EdgeInsets.only(bottom: 25.0),
child: Text(subName),
);
}
// Get Venue Name
Widget getVenue(String venue) {
return Padding(
padding: EdgeInsets.only(bottom: 0.0),
child: Text(venue),
);
}
Widget getType(String type) {
return Padding(
padding: EdgeInsets.only(bottom: 10.0),
child: Text(type),
);
}
Color getColor(String type) {
if (type == "L") {
return Color(0xff74B1E9);
}
}
Widget getTime(String time) {
return Text(time);
}
}
Set the container height
Expanded(
flex: 3,
child: Container(
height: double.infinity,
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
getType("L"),
getTime("9:00"),
],
),
),
)
For me it helps to make sure which Widget should be using a fixed space / size and which should expand to fit a space / size
Then I build the layout of the widget using Column and Row (this makes it easy to prepair and decide where to wrap widgets in a Expanded or Flexible widget)
But here is the short example:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Stackoverflow'),
),
body: Container(
margin: EdgeInsets.all(10),
width: double.infinity,
height: 100,
child: Row(
children: <Widget>[
// Texts
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// UEC607 & Digital communication text
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'UEC607',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.grey
),
),
],
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Digital communication',
style: TextStyle(
fontSize: 20,
color: Colors.black
),
),
],
)
],
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'E-206',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black
),
),
],
),
)
],
),
),
// Card
Container(
width: 90,
color: Colors.lightBlue.withOpacity(.8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'L',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white
),
),
SizedBox(
height: 5,
),
Text(
'09:00',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white
),
),
],
),
)
],
),
),
);
}
And it will look like this:
Use a FittedBox for wrapping the blue container
Expanded(
flex: 2,
child: FittedBox(
child: Container(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
getType("L"),
getTime("9:00"),
],
),
),
),
)
You should put your Row widget inside an IntrinsicHeight widget and set crossAxisAlignment property of your Row equal to CrossAxisAlignment.stretch. It will solve your problem.
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[]
),
)
I have spent a couple hours just to create a reusable widget in flutter. My expected result is gonna be like this:
but I'm stuck to fill the opacity width depending on it's parent like this:
here's the code I've tried:
Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.all(12),
child: Image.network(
"https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg",
fit: BoxFit.cover
)
),
Positioned(
left: 15,
bottom: 15,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.5)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
)
)
],
)
any suggestion?
Short answer:
You need to add right property in your Positioned widget. Like this
Positioned(
left: 15,
bottom: 15,
right: 0,
...)
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Title")),
body: Container(
width: 300,
height: 300,
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
Image.asset(
"assets/images/chocolate_pic.png",
width: 300,
height: 300,
fit: BoxFit.cover,
),
Container(
color: Colors.black.withOpacity(0.5),
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text("Awesome", style: TextStyle(fontSize: 28)),
Text("Chocolate", style: TextStyle(fontSize: 22)),
],
),
)
],
),
),
);
}
Instead of this
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
You can use ListTile widget inside the positioned and container which has title, subtitle and trailing(book now button can be placed here). And make the background color of container to black/white with opacity.