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