Search code examples
flutteralignmentrow

Flutter align a single child in row


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:

Output

I want to align blue containers to the bottom, without touching other containers position. How can I do that? This my expected result:

enter image description here


Solution

  • 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(),
          ],
        );
      }
    }