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

Question

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:

When language is switched to arabic

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?

Answer 1

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

Answer 2

This is fixed by giving equivalent padding from Right also,

`

return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 24.0,right: 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,right: 24.0),
        shrinkWrap: true,
        crossAxisCount: 2,
        childAspectRatio: 2.5,
        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 Wrap(
    direction: Axis.vertical,
    children: <Widget>[
      Text(
        data,
        style: textTheme.subhead,
      ),
      Text(caption, style: textTheme.caption),
    ],
  );
}
}

`

also , i had to remove mainAxisSpacing: 10.0, crossAxisSpacing: 50.0,