Flutter - Align elements in Row and Column - flutter

I'm trying to create a kind of custom App bar and I'm struggling with aligning the elements correctly.
Pretty sure the solution should be simple but I feel like missing something.
I would like the result to be the following:
Code I've tried so far:
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Column(mainAxisAlignment: MainAxisAlignment.start, children: [
InkWell(
onTap: (){Navigator.pop(context);},
child:Icon(Icons.arrow_back)
),
],),
Column(children: [
Container(child: Text("text"))),
], crossAxisAlignment: CrossAxisAlignment.center),
],)


I think it can be achieved very simply:
Row(
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: const Icon(Icons.arrow_back)),
const Expanded(child: Center(child: Text("text"))),
],
),


Container(
height: 100,
color: Colors.cyanAccent,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(
Icons.arrow_back,
),
),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text("text"),
),
],
),
),
],
),
),

Related

How can I manage alignment with multiple rows and columns?

I'm trying to make a card with some elements.
However it is hard to locate elements in right place with multiple rows and columns.
I tried with mainAxisAlignment, crossAxisAlignment, SizedBox, Expanded and so on.
Especially using Expanded make my widget disappear unlike my expectation.
How can I locate element to right place?
What I did
What I want
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Column(
children:[
Row(
children:[
Text('2'),
Text('3'),
Text('4'),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Text('7'),
Text('8'),
Text('9'),
Text('10'),
],
),
],
),
],
),
),
],
),
),

Here you go, this should be work as you wanted. i've tried to run it and yep it work
Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text('1'),
Row(
children: [
Flexible(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
width: 70,
height: 70,
color: const Color(0xffD9D9D9),
),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "2"),
PaddingText(text: "3")
],
),
Row(
children: [
PaddingText(text: "4"),
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "5"),
PaddingText(text: "6")
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "7"),
PaddingText(text: "8")
],
),
Row(
children: [
PaddingText(text: "9"),
PaddingText(text: "10")
],
),
],
),
],
),
),
],
),
],
),
),
and dont forget to add this to your project
class PaddingText extends StatelessWidget {
PaddingText({Key? key, required this.text}) : super(key: key);
String text;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Text(text),
);
}
}

This must work
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Expanded(
child: Column(
children:[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
Expanded(
child: Row(
children: [
Text('2'),
Text('3'),
],
),
),
Expanded(child: Row(
children: [
Text('4')
],
)),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Expanded(child: Row(
children: [
Text('7'),
Text('8'),
],
)),
Expanded(child: Row(
children: [
Text('9'),
Text('10'),
],
))
],
),
],
),
),
],
),
),
],
),
)

How to make a rectangles in this order?

How to make a rectangles in this order at flutter ?
Look here

Column(
children: [
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.green,
),
),
Expanded(
child: Container(
color: Colors.red,
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.yellow,
),
),
Expanded(
child: Container(
color: Colors.purple,
),
),
],
),
),
],
);

The correct approach is to wrap a container and two rows in a column.
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.red
),
),
Expanded(
child: Container(
color: Colors.green
),
),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.yellow
),
),
Expanded(
child: Container(
color: Colors.orange
),
),
],
),
),
],
)

It can be something like this:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text('Top Rectangle'),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(child: Text('Row 1 - Col 1'),),
Expanded(child: Text('Row 1 - Col 2'),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(child: Text('Row 2 - Col 1'),),
Expanded(child: Text('Row 2 - Col 2'),),
],
)
],
),
Or this:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text('Top Rectangle'),
),
Container(
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text('Row 1 - Col 1'),
),
Expanded(
child: Text('Row 1 - Col 2'),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text('Row 2 - Col 1'),
),
Expanded(
child: Text('Row 2 - Col 2'),
),
],
)
],
),
),
],
),
It's not a good idea to have a bunch of Expanded widgets in a parent widget, you should have Containers or similar widgets and give them fixed or dynamically calculated heights, then you can have an Expanded which gets all remaining space

Flutter Flexible in Card

i'm having problems using flexible widget in card. I used Constrained Box but i'd like to use a widget without setting width. But if i use Flexible widget, card doesn't show up anymore.
My goal is to make text use all the available space without setting a constant width
Here is my code:
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:wemaind_mobile_app/pages/tasks/tasks_page.dart';
import 'package:wemaind_mobile_app/theme/colors.dart';
import 'board_entity.dart';
import 'task_counter.dart';
class BoardWidget extends StatelessWidget {
final BoardEntity board;
static const colors = WemaindColors();
BoardWidget(this.board);
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return ConstrainedBox(constraints: BoxConstraints(maxWidth: 500, minWidth: 280, minHeight: 300),
child:GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)
{return TasksPage(board: board);
}));
},
child:
Container(
height: MediaQuery.of(context).size.height * 0.2,
child: Card(margin: EdgeInsets.only(top: 0, bottom: 16, left: 16, right: 16),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic,
children: [
Flexible(
child: Text(board.name,
style: theme.textTheme.headline2,
)),
if (board.bookmarked) Icon(Icons.star, color: colors.orange),
],
),
Row(children:[
Flexible(
child: Text(board.role.toUpperCase(),style: theme.textTheme.headline4,overflow: TextOverflow.ellipsis,)),
]),
]),
Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,children: [
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text(board.tasks.all.toString(), style: theme.textTheme.headline1),
Icon(Icons.more_vert, color: colors.blue.shade800, size: 32),
]),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text('TASK'.toUpperCase(), style: theme.textTheme.headline5),
])
]),
]),
Table(
children: [
TableRow(children: [
TaskCounter('PRIORITARI', Icons.bolt, colors.orange, board.tasks.prioritized),
TaskCounter('IN SCADENZA', Icons.alarm, colors.red, board.tasks.expiring),
Container(),
]),
TableRow(children: [
TaskCounter('MIEI', Icons.person, theme.accentColor, board.tasks.owned),
TaskCounter('DEL TEAM', Icons.group, theme.accentColor, board.tasks.teamOwned),
TaskCounter('IN AVVIO', Icons.calendar_today, theme.accentColor, board.tasks.starting),
])
]
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
),
),
),
)
)
);
}
}
Hope someone can help me :)

try to use the space smarter. this code will save you from your problems
class BoardWidget extends StatelessWidget {
// final BoardEntity board;
// static const colors = WemaindColors();
// BoardWidget(this.board);
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
body: SafeArea(
child: GestureDetector(
// onTap: () {
// Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)
// {return TasksPage(board: board);
// }));
// },
child:
Container(
height: 300,
width: 400,
child: Card(margin: EdgeInsets.only(top: 0, bottom: 16, left: 16, right: 16),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Expanded(
child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text("board.name",
),
),
if (true) Icon(Icons.star, color: Colors.orange),
],
),
),
Expanded(
child: Row(children:[
Expanded(child: Text("board.role.toUpperCase()", overflow: TextOverflow.ellipsis,)),
]),
),
]),
),
Expanded(
child: Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,children: [
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Expanded(child: Text("board.tasks.all.toString()")),
Icon(Icons.more_vert, color: Colors.blue.shade800, size: 32),
]),
),
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text('TASK'.toUpperCase()),
]),
)
]),
),
]),
),
Table(
children: [
TableRow(children: [
Container(child: Icon(Icons.bolt)),
Container(child: Icon(Icons.alarm)),
Container(),
]),
TableRow(children: [
Container(child: Icon(Icons.person),),
Container(child: Icon(Icons.group),),
Container(child: Icon(Icons.calendar_today),),
])
]
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
),
),
),
)
),
),
);
}
}

Flutter: A RenderFlex overflowed by 34 pixels on the right

I am getting Error when try to run below script. I am using Expanded widget for showing user followers.
Expanded(
flex: 1,
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildCountColumn("posts", postCount),
buildCountColumn("followers", followerCount),
buildCountColumn("following", followingCount),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildProfileButton(),
],
),
],
),
),

Remove the Expanded parentWidget and get an Expanded Widget for every Widget
Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
child: Text("Hello"),
),
),
Expanded(
child: Container(
color: Colors.red,
child: Text("Hello"),
),
),
Expanded(
child: Container(
color: Colors.yellow,
child: Text("Hello"),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text("Hello"),
),
),
],
),
],
),

your **buildProfileButton() or row ** is creating more size widgets then the space available in screen;
Two solutions:
you can put your row in listview to make it scrollable
put each one in Expanded like:
Expanded(
child:buildCountColumn("posts", postCount),
)
to take limited available size in screen -> divided equally within all childs
:: always use expanded/listview/scrollable/widget size less than total screen width
you can get it by mediaQuery.of(context).size.width for flexible row

How to add a label below images in a row in flutter and to add a card in flutter

This is my code and here I just want to know how to add text below the images.
Just let me know, please?
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Image.asset('assets/cat.jpg',
),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
],
),

Card(
elevation: 5,
child: Column(
children: <Widget>[
Expanded(
child: Image.asset('assets/img.jpg'),
),
Text('My Image'),
],
),
),
You can put this code row or as you want. You can also put some padding to arrange the text image. If you want constant height and weight put this into a Container Widget and specify the height and weight. Thanks.

child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Column(
children: <Widget>[
Image.asset(
'assets/cat.jpg',
),
Text('cat')
],
),
),
Expanded(
child: Column(
children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('cat')
],
),
),
Expanded(
child: Column(
children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('cat')
],
),
),
],
)
]);
},
)

If you want to add a line of text below the images at once
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Image.asset('assets/cat.jpg',
),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
],
),
Text("Your text here"),
]), // column widget ends here
If you want to add text below each image then
change your Expanded widget with this.
Expanded(
child: Column(
children : <Widget>[
Image.asset('assets/cat.jpg'),
Text("your text here")
]
)
),
else create a function to return a widget as it seems you have plenty of widgets of that kind
Widget getWidget(imagePath, text){
return Expanded(
child: Column(
children : <Widget>[
Image.asset(imagePath),
Text(text)
]
)
)
}
and then use this
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
getWidget('assets/cat.jpg','your text here'),
getWidget('assets/cat.jpg','your text here'),
getWidget('assets/cat.jpg','your text here'),
],
),
]),

You just need to wrap the image in a Column/Stack
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
],
),