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

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

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.
Add Step Image

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.

Add Step Image in Spanish

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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,
              color: Colors.blue[100],
              child: Center(
                child: Text(
                  'Even End',
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: maxWidth,
              color: Colors.blue[100],
              child: Center(
                child: Text(
                  'Board Stop',
                ),
              ),
            )
          ]),
          SizedBox(
            height: 10,
          ),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(
              width: maxWidthLanguage,
              color: Colors.blue[100],
              child: Center(
                child: Text(
                  'Laseres',
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: maxWidthLanguage,
              color: Colors.blue[100],
              child: Center(
                child: Text(
                  'Final Parejo',
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: maxWidthLanguage,
              color: Colors.blue[100],
              child: Center(
                child: Text(
                  'Parada Del T',
                ),
              ),
            )
          ]),
        ],
      )),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search