I have a Column that has array of rows and each row has some container inside. Here is my code:
import 'package:flutter/material.dart';
Widget row() {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.amber,
width: 50,
height: 100,
),
Container(
color: Colors.amber,
width: 50,
height: 150,
),
Container(
color: Colors.blue,
width: 50,
height: 80,
),
],
);
}
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
row(),
Divider(),
row(),
Divider(),
row(),
],
);
}
}
Output:
I want to align blue containers to the bottom, without touching other containers position. How can I do that? This my expected result:
please try out this
import 'package:flutter/material.dart';
Widget row() {
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.amber,
width: 50,
height: 100,
),
Container(
color: Colors.amber,
width: 50,
height: 150,
),
],
),
Container(
color: Colors.blue,
width: 50,
height: 80,
),
],
);
}
class TestPage extends StatelessWidget {
const TestPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
row(),
Divider(),
row(),
Divider(),
row(),
],
);
}
}