Flutter Localization - Can buttons be equal dimensions based on localized text?

Question

I'm building my first production Flutter app that needs to support localization. I have everything setup and working when it comes to text replacement. I have a widget that shows a series of steps and each step having their own properties associated with them. At the bottom of this list of steps are 3 buttons that a user can click to add a step.

These button dimensions are manually defined based on what would fit the widest text. When I switch to Spanish (based on Google Translate for now) it cuts off one of the buttons.

Is there a way to define the dimensions, based on localization, in such a way where whatever ends up being the widest button is what all three buttons are set to?

Answer 1

Try below code...

List<String> stringList = ["Lasers", "Even End", "Board Stop"];
List<String> stringListLanguage = ["Laseres", "Final Parejo", "Parada Del T"];

  double getTextWidth(String text, BuildContext context) {
    final textStyle = TextStyle(fontSize: 16); // Define the text style
    final textPainter = TextPainter(
      text: TextSpan(text: text, style: textStyle),
      textDirection: TextDirection.rtl,
    )..layout();

    return textPainter.size.width; // Return the width of the text
  }

Get max length text from list

    String maxLengthText = stringList.reduce(
        (current, next) => current.length >= next.length ? current : next);

    String maxLengthTextLanguage = stringListLanguage.reduce(
        (current, next) => current.length >= next.length ? current : next);

    double maxWidth = getTextWidth(maxLengthText, context) + 10;
    double maxWidthLanguage = getTextWidth(maxLengthTextLanguage, context) + 10;

After getting max length, use it as width for Container

   Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(
              decoration:BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.blue[100],) ,
              width: maxWidth,
              child: Center(
                child: Text(
                  'Lasers',
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: maxWidth,
              decoration:BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.blue[100],) ,
              child: Center(
                child: Text(
                  'Even End',
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: maxWidth,
              decoration:BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.blue[100],) ,
              child: Center(
                child: Text(
                  'Board Stop',
                ),
              ),
            )
          ]),
          SizedBox(
            height: 10,
          ),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(
              width: maxWidthLanguage,
             decoration:BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.blue[100],) ,
              child: Center(
                child: Text(
                  'Laseres',
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: maxWidthLanguage,
              decoration:BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.blue[100],) ,
              child: Center(
                child: Text(
                  'Final Parejo',
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: maxWidthLanguage,
              decoration:BoxDecoration(borderRadius: BorderRadius.circular(5),color: Colors.blue[100],) ,
              child: Center(
                child: Text(
                  'Parada Del T',
                ),
              ),
            )
          ]),
        ],
      )),

Answer 2

If you want to use fixed-width and equally sized boxes and ensure that the text inside fits within these boxes, you can use the auto size text package. This package adjusts the fontSize of the text to fit within the container.