Flutter RTL (localization) not working for grid view widget - arabic language

2,217

You should use the class EdgeInsetsDirectional

Such as use the code

  EdgeInsetsDirectional.only(end: 8.0)

to instead of

  EdgeInsets.only(right: 8.0)

by the way, you also should use AlignmentDirectional to instead of Alignment

Share:
2,217
Sana.91
Author by

Sana.91

Software engineer - Loves to code!

Updated on December 06, 2022

Comments

  • Sana.91
    Sana.91 11 months

    My flutter app has RTL (localiztion) support for arabic. I have a screen in flutter which has a GridView widget inside of a column widget.. that is showing data absolutely fine for English language but not at all when i switch to arabic. Following are the screenshots

    when language is English:

    enter image description here

    When language is switched to arabic

    enter image description here When language is switched to arabic, it is disturbing the overall look and feel of screen

    my code is:

    class TransactionSummary extends StatelessWidget {
      final String name;
      final String settlementDate;
      final int transactionCount;
      final String credit;
      final String debit;
      final String discount;
    
      TransactionSummary(
          {this.name,
          this.settlementDate,
          this.transactionCount,
          this.credit,
          this.debit,
          this.discount});
    
      @override
      Widget build(BuildContext context) {
        final ThemeData theme = Theme.of(context);
        final TextTheme textTheme = theme.textTheme.copyWith(
            title: theme.textTheme.title.copyWith(
                fontSize: 18.0,
                color: kMaximusBlue900,
                fontWeight: FontWeight.w600),
            subhead: theme.textTheme.subhead
                .copyWith(color: Colors.black, fontSize: 16.0),
            caption: theme.textTheme.caption
                .copyWith(color: theme.hintColor, fontSize: 14.0));
    
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(left: 24.0),
              child: Text(
                '$name',
                style: textTheme.title,
              ),
            ),
            Container(
              child: Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      '$settlementDate',
                      style: TextStyle(fontSize: 12.0),
                    ),
                    Text(Translations.of(context).settlementDate,
                        style:
                            TextStyle(color: theme.hintColor, fontSize: 10.0)),
                  ],
                ),
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Divider(
            color: Colors.grey,
            height: 2.0,
          ),
        ),
        IgnorePointer(
            child: GridView.count(
          padding: EdgeInsets.only(left: 24.0),
          shrinkWrap: true,
          crossAxisCount: 2,
          childAspectRatio: 2.5,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 50.0,
          children: [
            buildGridViewCell(transactionCount.toString(),
                Translations.of(context).transactions, textTheme),
            buildGridViewCell(
                discount, Translations.of(context).discount, textTheme),
            buildGridViewCell(
                debit, Translations.of(context).debit, textTheme),
            buildGridViewCell(
                credit, Translations.of(context).credit, textTheme),
          ],
        ))
      ],
    );
    
    
     }
    
      Widget buildGridViewCell(String data, String caption, TextTheme textTheme) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              data,
              style: textTheme.subhead,
            ),
            Text(caption, style: textTheme.caption),
          ],
        );
      }
    }
    

    Is there some thing wrong in GridView code?