CODEWITHSUNDEEP
flutteralignmentrow
ERFANIUM
ERFANIUM

Reputation: 41

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

Upvotes: 2

Views: 1516

Answers (2)

Paresh Mayani
Paresh Mayani

Reputation: 128428

Take the main Row with CrossAxisAlignment end and wrap the Amber inside one more row and declare that with the CrossAxisAlignment start.

How this works?

Since your blue container will now inside the main row and which is now declared with the CrossAxisAlignment.end and hence it will go with the parent alignment.

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(
        alignment: Alignment.bottomCenter,
        color: Colors.blue,
        width: 50,
        height: 80,
      ),
    ],
  );
}

Upvotes: 3

Jahidul Islam
Jahidul Islam

Reputation: 12575

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

Upvotes: 2

Related Questions