Question 336470 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Align first child to the left and second child to the right in a Row

I have a row with effectively 2 children. The first is a label, and the second some icons. I would like the first child to be aligned left and the second to be aligned right.

If I change the spaceEvenly, it bunches them up together – it is just the alignment I want to change.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text("label here"),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.star, color: Colors.amber[500]),
        Icon(Icons.star, color: Colors.amber[500]),
        Icon(Icons.star, color: Colors.amber[500]),
        Icon(Icons.star, color: Colors.amber[500]),
      ],
    ),
  ],
),
Tags:

2

Answers


  1. 0

    First of all i didn’t get the question correctly. If you have a sample design please add it. And as per the question, I think this code could help you.

    Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("label here"),
          Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Icon(Icons.star, color: Colors.amber[500]),
              Icon(Icons.star, color: Colors.amber[500]),
              Icon(Icons.star, color: Colors.amber[500]),
              Icon(Icons.star, color: Colors.amber[500]),
            ],
          ),
        ],
      )
    Login or Signup to reply.
  2. 0

    Use can use crossAxisAlignment property of Row.

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contact Details'),
        ),
        body: Center(
          child: ContactDetails(),
        ),
      ),
    );
  }
}

class ContactDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.end,   //this
                children: [
                  Text("label here"),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.star, color: Colors.amber[500]),
                      Icon(Icons.star, color: Colors.amber[500]),
                      Icon(Icons.star, color: Colors.amber[500]),
                      Icon(Icons.star, color: Colors.amber[500]),
                    ],
                  ),
                ],
              );
          }
       }

    Output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search