How can I make a text take a fixed width based on the length of a string in flutter?-CodePudding

I have a widget tree as follows:

Widget example() {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Text('25.00%')
          ],
        ),
        Row(
          children: [
            Expanded(
              child: Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Text('125.00%')
          ],
        ),
        Row(
          children: [
            Expanded(
              child: Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Text('1250.00%')
          ],
        ),
      ],
    );
  }

How can I make all texts take the same horizontal space without using pixels in width so that all containers are aligned vertically?

I would like to set a fixed length for my percentages and the ones that are shorter are padded with spaces and the ones that are longer get cropped with the text elipsis.

Is there a clean build in method to do that?

CodePudding user response：

You can use the Flexible widget to specify the desired width of the Text widgets and to make them take up the remaining space in the Row widget.

Here's an example of how you could modify your code to achieve the desired layout:

Widget example() {
return Column(
  children: [
    Row(
      children: [
        Expanded(
          child: Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.red),
          ),
        ),
        Flexible(
          child: Text(
            '25.00%',
            textAlign: TextAlign.end,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    ),
    Row(
      children: [
        Expanded(
          child: Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.red),
          ),
        ),
        Flexible(
          child: Text(
            '125.00%',
            textAlign: TextAlign.end,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    ),
    Row(
      children: [
        Expanded(
          child: Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.red),
          ),
        ),
        Flexible(
          child: Text(
            '1250.00%',
            textAlign: TextAlign.end,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    ),
  ],
);}

This will make the Text widgets take up the remaining space in the Row widgets, and will align them vertically with the Container widgets. The overflow property of the Text widgets is set to TextOverflow.ellipsis, which will add an ellipsis (...) to the text if it overflows the available space. The textAlign property is set to TextAlign.end, which will align the text to the right.

CodePudding user response：

Do you want something like this?

You can try this code in the dartpad:

focus at // focus

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  // focus
  Widget _textBuilder(String text, Color containerColor) {
    return Expanded(
      child: Container(
        color: containerColor,
        child: Text(text, overflow: TextOverflow.clip, maxLines: 1),
      ),
    );
  }

  // focus
  late final List<Widget> _widgets = [
    _textBuilder('short', Colors.blue),
    _textBuilder('Textt5ttttttttttttttttxjxjdkdndjjdjdjjdjfjfjd', Colors.green),
    _textBuilder('-', Colors.red)
  ];

  @override
  Widget build(BuildContext context) {
    return Row(children: _widgets);
  }
}

Use the text overflow and max lines properties.