I'm make a multi language application in flutter (ar/en), so i want to display my content in these languages, my problem is the text direction is based on the ui language, i want to change the direction dynamically based on the content if ar should be rtl, other wise ltr.
My current view My current view
desired effect desired effect
class ArticleCard extends StatelessWidget {
const ArticleCard({
Key key,
@required this.article,
@required this.isAuthor,
@required this.onDelete,
@required this.onEdit,
this.allowComments = true,
}) : super(key: key);
final ArticleModel article;
final bool isAuthor;
final bool allowComments;
final VoidCallback onDelete;
final VoidCallback onEdit;
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.only(bottom: 10),
child: Column(
children: <Widget>[
InkWell(
onTap: () {
ExtendedNavigator.ofRouter<Router>().pushNamed(
Routes.article,
arguments: ArticleScreenArguments(article: article),
);
},
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage:
CachedNetworkImageProvider(article.owner.avatar),
),
title: Text(article.title),
subtitle: Text(
article.owner.name,
textScaleFactor: .75,
),
trailing: Text(
'${DateFormat('d, MMMM y h:mm a', 'ar').format(article.createdAt)}',
textScaleFactor: .7,
),
),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 8),
child: Text(
article.content,
textAlign: TextAlign.start,
),
),
),
],
),
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FavoriteButton(
isFavorite: article.isFavorite,
count: article.favoriteCount,
type: FavoriteType.article,
targetId: article.id,
),
_buildLabeledIcon(
icon: Icon(Icons.message),
label: '${article.commentsCount}',
),
_buildLabeledIcon(
icon: Icon(Icons.share),
label: '${article.shares}',
),
_buildLabeledIcon(
icon: Icon(Icons.remove_red_eye),
label: '${article.views}',
),
],
),
SizedBox(height: 10),
Container(
height: 1.5,
color: Colors.black12,
),
if (isAuthor)
_buildAuthorRow(),
// Divider(),
if (allowComments) ...[
SizedBox(height: 10),
_buildCommentsSection(context),
]
],
),
);
}
Row _buildAuthorRow() {
return Row(
children: <Widget>[
Expanded(
child: InkWell(
onTap: onEdit,
child: Container(
height: 50,
alignment: Alignment.center,
child: Text(
'تعديل',
style: TextStyle(
color: appTheme.accentColor,
fontWeight: FontWeight.bold,
),
),
),
),
),
Container(
width: 1.5,
height: 50,
color: Colors.black12,
),
Expanded(
child: InkWell(
onTap: onDelete,
child: Container(
height: 50,
alignment: Alignment.center,
child: Text(
'حذف',
style: TextStyle(
color: appTheme.errorColor,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
);
}
Row _buildLabeledIcon({Widget icon, String label}) {
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
icon,
SizedBox(width: 5),
Text(
label,
textScaleFactor: .75,
),
],
);
}
Widget _buildCommentsSection(BuildContext context) {
return Column(
children: [
if (article.comments.isNotEmpty)
CommentTile(comment: article.comments.first),
_buildCommentTextInput(context),
],
);
}
Widget _buildCommentTextInput(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
IconButton(
icon: Icon(FontAwesomeIcons.paperPlane),
onPressed: () {},
),
Flexible(
child: TextField(
decoration: InputDecoration(
hintText: 'كتابة تعليق',
filled: true,
fillColor: Color(0xFFEFEFEF),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(50)),
borderSide: BorderSide.none,
),
contentPadding: EdgeInsets.all(12),
),
onSubmitted: (_) {},
onTap: () {},
),
),
],
),
);
}
}
class CommentTile extends StatelessWidget {
final CommentModel comment;
const CommentTile({Key key, this.comment}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage: CachedNetworkImageProvider(comment.user.avatar),
),
title: Text(comment.user.name),
subtitle: Text(
DateFormat.yMEd().format(comment.createdAt),
textScaleFactor: .75,
),
),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 8),
child: Text(
comment.text,
textAlign: TextAlign.end,
),
),
),
],
);
}
}