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
Comments
-
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:
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?