flutterflutter-localizations

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?


Solution

  • 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',
                    ),
                  ),
                )
              ]),
            ],
          )),