How to align widgets left, center, right on single row widget flutter

Question

I need something that can align my widgets left, center, and right in a single row widget. Now I have already used mainAxisAlignment:MainAxisAlignment.spaceBetween, for my row widget. But here when I have some large content for my left widget then the spaceBetween can align my center widget on bit right side, which ruins my app design.

Is there any option to use Align widget for multiple widget in Row?

return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(left: 15.0),
      height: 27.0,
      child: Container(
        child: Center(
          child: Text(
            'TestDataTest',
          ),
        ),
      ),
    ),
    Container(
      height: 27.0,
      child: Container(
        child: Center(
          child: Text(
            'Test',
          ),
        ),
      ),
    ),
    Container(
      margin: EdgeInsets.only(right: 15.0),
      height: 27.0,
      child: Container(
        child: Padding(
          child: Center(
            child: Text(
              'T',
            ),
          ),
        ),
      ),
    ),
  ],
);

Here the image will describe the issue in brief. The above row is with the mentioned code and the next row is as expected output. Is there any solution that can align the widgets properly left, center, and right despite their content?

Answer 1

you can use widget structure like this

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row1(),
              Row2(),
            ],
          ),
        ),
      ),
    );
  }
}

class Row1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      color: Colors.orange,
      height: 48,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Colors.white,
                child: Text('TestDataTest'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.white,
                child: Text('Test'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                color: Colors.white,
                child: Text('T'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
class Row2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      color: Colors.orange,
      height: 48,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Colors.white,
                child: Text('LIVE'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.white,
                child: Text('LIVE'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                color: Colors.white,
                child: Text('\$ 80'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

One way is to adjust the width of the individual containers. That might work. When you give MainAxisAlignment.spaceBetween, automatic adjustment is done based on the available space, and number of widgets.

Answer 3

This is the simples way I found to do it and it adapts very well with the content you put inside

Container(
   margin: EdgeInsets.symmetric(horizontal: 20),
      child: Row(
          children: [
             Text(
               'Left'
             ),
             Spacer(),
             Text(
               'Center'
             ),
             Spacer(),
             Text(
               'Right'
             ),
           ],
         ),
      ),

If you want the left and right to be closer to the edges, you'll just need to change the margin of the Container.