CODEWITHSUNDEEP
androidflutterdartalignment
BradG
BradG

Reputation: 750

Why is a Text element centered and how to align it to the right in Dart

I have a text element which should be aligned to the left but for some reason it appears centered and I can't figure out why.

What code should be changed / added to make the result string aligned to the right?

return Positioned(
    bottom: 0,
    right: 0,
    left: 0,
    child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
            margin: EdgeInsets.fromLTRB(10, 0, 10, 30),
            padding: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                //First row here. The one below is the second row:
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.only(left: 5.0),
                      child: Icon(Icons.comment),
                    ),
                    Expanded(
                      child: Column(children: [
                        Padding(
                            padding: EdgeInsets.only(
                                top: 10.0, left: 5.0, right: 0),
                            child: Text(
                              result, //This text is centered. Why?
                              maxLines: 7,
                              overflow: TextOverflow.ellipsis,
                            )),
                      ]),
                    )
                  ],
                ),                    
              ],
            )
        )
    )
);

Upvotes: 0

Views: 298

Answers (3)

Manifest Man
Manifest Man

Reputation: 905

In accordance to https://api.flutter.dev/flutter/widgets/Column-class.html on Column-Class, the Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView. For a horizontal variant, see Row. Also, if you only have one child, then consider using Align or Center to position the child.

For your case, you could add the property crossAxisAlignment to your column as following

... Column(crossAxisAlignment: CrossAxisAlignment.end, ...

as mentioned by @nuts so the text will be align right. Here is a full example also from the above reference under https://api.flutter.dev/flutter/widgets/Expanded-class.html, that i just modified to illustrate how to do it:

    /// Flutter code sample for Expanded

// This example shows how to use an [Expanded] widget in a [Column] so that
// its middle child, a [Container] here, expands to fill the space.
//
// ![This results in two thin blue boxes with a larger amber box in between.](https://flutter.github.io/assets-for-api-docs/assets/widgets/expanded_column.png)
import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
    const MyApp({
        Key ? key
    }): super(key: key);

    static
    const String _title = 'Flutter Code Sample';

    @override
    Widget build(BuildContext context) {
        return const MaterialApp(
            title: _title,
            home: MyStatelessWidget(),
        );
    }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
    const MyStatelessWidget({
        Key ? key
    }): super(key: key);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Expanded Column Sample'),
            ),
            body: Center(
                child: Column(
                    children: < Widget > [
                        Container(
                            color: Colors.blue,
                            height: 100,
                            width: 100,
                        ),
                        Expanded(
                            child: Container(
                                color: Colors.amber,
                                width: 100,
                            ),
                        ),
                        Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: < Widget > [
                                Text('We moved this text to the right')
                            ],
                        ),
                        Container(
                            color: Colors.blue,
                            height: 100,
                            width: 100,
                        ),
                    ],
                ),
            ),
        );
    }
}

Hope, this will help!

Upvotes: 0

sajjad sarookhani
sajjad sarookhani

Reputation: 21

You can use direction for this purpose.

For example:

MaterialApp(
  builder: (context, child) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: child,
    );
  },
);

Upvotes: 2

Adelina
Adelina

Reputation: 11931

It's because row or column alignment.

By default column is centering children, to change that update:

Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
        ...

If this does not solve your problem check: Under which circumstances textAlign property works in Flutter?

More info on column/row alignment: https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041

Upvotes: 2

Related Questions