flutterdarttextlocalizationoverflow

Text overflow in Flutter localization with easy_localization package

I made a Flutter application. I used the easy_localization package to provide localization for 12 different languages, but as I change the language in the strings, text overflow occurs. Is there any solution for this? If so, how should I implement it?

Example of the problem:

Text overflow

Code for the example above:

DebouncedButton(
  onTap: () => Navigator.of(context).push(MaterialPageRoute(
    builder: (context) => const PriceAlarmList(isPrice: true),
  )),
  child: Container(
    width: screenSize.width / 3.393,
    height: screenSize.width / 3.393,
    padding: EdgeInsets.only(top: screenSize.height / 42.666),
    decoration: ShapeDecoration(
      color: MarasColor.onSecondaryColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular((screenSize.width / 3.393) / 5.809),
      ),
    ),
    child: Column(
      children: [
        Container(
          width: screenSize.width / 6.9,
          height: screenSize.width / 6.9,
          decoration: ShapeDecoration(
            color: MarasColor.bgColor,
            shape: const CircleBorder(),
          ),
          alignment: Alignment.center,
          child: SvgPicture.asset("assets/maras/svg/price-alarm-grey.svg"),
        ),
        SizedBox(
          height: screenSize.height / 49.777,
        ),
        CustomText(
          data: 'profile.my_price_alert_list'.tr(),
          height: 1.181,
          color: MarasColor.txtColor,
          weight: FontWeight.w500,
          size: 11,
        )
      ],
    ),
  ),
),
Solution

  • Make sure the height of the card.

    If you want dynamic height of the card, use Expaned:

    Expanded(
  child: Text(
    'profile.my_price_alert_list'.tr(),
     style: TextStyle(
       color: MarasColor.txtColor,
       fontWeight: FontWeight.w500,
       fontSize: 11,
     ),
  ),
)

    Otherwise use this following property:

    Text(
  'profile.my_price_alert_list'.tr(),
   style: TextStyle(
     color: MarasColor.txtColor,
     fontWeight: FontWeight.w500,
     fontSize: 11,
   ),
   maxLines: 1, // Set maximum number of lines
   overflow: TextOverflow.ellipsis, // Add ellipsis if text overflows
)