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