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

Layout problem in Flutter, text clipping and alignment

I want to display a row that has the following content:

  1. Aligned to the left of the row: an icon and a text inside a container. NB: I don’t want to use the standard Chip() widget.
  2. Aligned to the right of the row: a button.

If the width of the screen is to small, the text has to be clipped (ending with ellipsis).

If there’s enough screen width, then it should only take the space it needs; not taking the full available space.

I prefer not to use the IntrinsicWidth for performance reasons.

The following code example is made for test purposes:

import 'package:flutter/material.dart';

class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Flexible(
          child: Container(
            color: Colors.yellow,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.info),
                Flexible(
                  child: Text(
                    'This text might be clipped',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),

        ElevatedButton(
          onPressed: () {},
          child: Text('Button'),
        ),
      ],
    );
  }
}

The result is this:

enter image description here

That looks ok. But when I have more screen width it looks like this:

enter image description here

That’s not what I want. The button should be aligned to the right.

I’ve tried solving it with using a Spacer() in between the container and the button. I then get this:

enter image description here

The result is that the Spacer() takes too much space. There’s enough space for the text, but unfortunately it’s now clipped.

How can I solve this?

Tags:

2

Answers


  1. 0

    Use Expanded for that purpose. In the Row where to button is, wrap the Container within Expanded like this:

    class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // add Expanded here
        Expanded(
          child: Container(
            color: Colors.yellow,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.info),
                Flexible(
                  child: Text(
                    'This text might be clipped',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
        ElevatedButton(
          onPressed: () {},
          child: Text('Button'),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
  2. 0

    If I got you right you want something like that:

    import 'package:flutter/material.dart';

class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Expanded(
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.yellow,
            ),
            child: Row(
              children: [
                Icon(Icons.info),
                Flexible(
                  child: Text(
                    'This text might be clipped',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
        ElevatedButton(
          onPressed: () {},
          child: Text('Button'),
        ),
      ],
    );
  }
}

    That will force your text to fill as much space as it can.

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

Back To Top
Search