how to alignment children of Row/Column? - flutter

Question

how to align children of Row? I tried crossAxisAlignment: CrossAxisAlignment.end, but I don't want CrossAxisAlignment my all children of Row widgets. and also I tried with Align widget for the specified widget(+1 and circle)
Container(
padding: EdgeInsets.only(top: 5.0),
child: Column(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Text('Colombo - New York'),
),
Column(
children: <Widget>[
Row(
children: [
Column(
children: <Widget>[Text('Upper Left')],
),
SizedBox(height: 200, child: const Card(child: Text('Column 1'))),
SizedBox(height: 200, child: const Card(child: Text('Column 2'))),
SizedBox(height: 200, child: const Card(child: Text('Column 3'))),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[Text('Bottom Right')],
)
]),
],
)
],
),
)
the output is all widgets is center
the way I want,

Answer 1

I am not sure that I totally understand the question, but it seemed in the comments of your code that you wanted to align something top left and something else bottom right with 3 columns vertically aligned with each other in the center.
If that is the case, you should probably study or do some tutorials on the layout system for Flutter.
Here is what it seemed you were trying to do based on reading your code comments:
This was generated with the following code:
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Layout Example'),
backgroundColor: Colors.blueGrey[900],
),
backgroundColor: Colors.blueGrey[50],
body:
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
Column(
children: <Widget>[Text('Upper Left')],
),
SizedBox(height: 200, child: const Card(child: Text('Column 1'))),
SizedBox(height: 200, child: const Card(child: Text('Column 2'))),
SizedBox(height: 200, child: const Card(child: Text('Column 3'))),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[Text('Bottom Right')],
)
]),
),
),
);
Whether that totally reflects what you are looking for, or not, perhaps you will find it to be a good starting point where you can get some ideas for what you want to do.
Edit:
In response to your question above, you did not include the Row widget from the example I gave. Note, there is a row that has 5 widgets that will all space evenly on the main/horizontal axis. The first widget is a column and by default the Text widget in it will go to the top of that column. The next 3 columns are widgets (I just chose Size Box as a way to force in some height). Those 3 widgets are centered vertically in the row. The last thing in the row is a Column widget that has a main axis alignment of end forcing the widget in that column (Text/BottomRight) to go at the bottom of that column.
I took your code which was missing the Row widget container and added it back in and the output looked like the screen shot I sent before. Here is your code after I modified it:
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Layout Example'),
backgroundColor: Colors.blueGrey[900],
),
backgroundColor: Colors.blueGrey[50],
body: Container(
// padding: EdgeInsets.only(top: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: <Widget>[Text('Upper Left')],
),
SizedBox(
height: 200,
child: const Card(child: Text('Column 1'))),
SizedBox(
height: 200,
child: const Card(child: Text('Column 2'))),
SizedBox(
height: 200,
child: const Card(child: Text('Column 3'))),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[Text('Bottom Right')],
)
]),
)),
),
);