CODEWITHSUNDEEP
flutterdartflutter-layout
Kishan sharma
Kishan sharma

Reputation: 741

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

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

enter image description here

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?

Upvotes: 8

Views: 17612

Answers (3)

DaveRiseUp
DaveRiseUp

Reputation: 61

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.

Upvotes: 4

user14631430
user14631430

Reputation:

enter image description here

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

Upvotes: 18

jeugene
jeugene

Reputation: 231

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.

Upvotes: 1

Related Questions