颤动文本和文本字段小部件中的自动文本方向（基于输入的文本）

Question

我正在flutter（ar / en）中制作多语言应用程序，所以我想用这些语言显示我的内容，我的问题是文本方向基于ui语言，我想根据如果 ar 的内容应为 RTL，否则为 LTR。

\n

我的当前视图\n我的当前视图

\n

期望的效果\n期望的效果

\n

class ArticleCard extends StatelessWidget {\n  const ArticleCard({\n    Key key,\n    @required this.article,\n    @required this.isAuthor,\n    @required this.onDelete,\n    @required this.onEdit,\n    this.allowComments = true,\n  }) : super(key: key);\n  final ArticleModel article;\n  final bool isAuthor;\n  final bool allowComments;\n  final VoidCallback onDelete;\n  final VoidCallback onEdit;\n\n  @override\n  Widget build(BuildContext context) {\n    return Card(\n      margin: EdgeInsets.only(bottom: 10),\n      child: Column(\n        children: <Widget>[\n          InkWell(\n            onTap: () {\n              ExtendedNavigator.ofRouter<Router>().pushNamed(\n                Routes.article,\n                arguments: ArticleScreenArguments(article: article),\n              );\n            },\n            child: Column(\n              children: <Widget>[\n                ListTile(\n                  leading: CircleAvatar(\n                    backgroundImage:\n                        CachedNetworkImageProvider(article.owner.avatar),\n                  ),\n                  title: Text(article.title),\n                  subtitle: Text(\n                    article.owner.name,\n                    textScaleFactor: .75,\n                  ),\n                  trailing: Text(\n                    \'${DateFormat(\'d, MMMM y  h:mm a\', \'ar\').format(article.createdAt)}\',\n                    textScaleFactor: .7,\n                  ),\n                ),\n                SizedBox(\n                  width: MediaQuery.of(context).size.width,\n                  child: Padding(\n                    padding: EdgeInsets.symmetric(horizontal: 8),\n                    child: Text(\n                      article.content,\n                      textAlign: TextAlign.start,\n                    ),\n                  ),\n                ),\n              ],\n            ),\n          ),\n          SizedBox(height: 10),\n          Row(\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            children: <Widget>[\n              FavoriteButton(\n                isFavorite: article.isFavorite,\n                count: article.favoriteCount,\n                type: FavoriteType.article,\n                targetId: article.id,\n              ),\n              _buildLabeledIcon(\n                icon: Icon(Icons.message),\n                label: \'${article.commentsCount}\',\n              ),\n              _buildLabeledIcon(\n                icon: Icon(Icons.share),\n                label: \'${article.shares}\',\n              ),\n              _buildLabeledIcon(\n                icon: Icon(Icons.remove_red_eye),\n                label: \'${article.views}\',\n              ),\n            ],\n          ),\n          SizedBox(height: 10),\n          Container(\n            height: 1.5,\n            color: Colors.black12,\n          ),\n          if (isAuthor)\n            _buildAuthorRow(),\n          // Divider(),\n          if (allowComments) ...[\n            SizedBox(height: 10),\n            _buildCommentsSection(context),\n          ]\n        ],\n      ),\n    );\n  }\n\n  Row _buildAuthorRow() {\n    return Row(\n      children: <Widget>[\n        Expanded(\n          child: InkWell(\n            onTap: onEdit,\n            child: Container(\n              height: 50,\n              alignment: Alignment.center,\n              child: Text(\n                \'\xd8\xaa\xd8\xb9\xd8\xaf\xd9\x8a\xd9\x84\',\n                style: TextStyle(\n                  color: appTheme.accentColor,\n                  fontWeight: FontWeight.bold,\n                ),\n              ),\n            ),\n          ),\n        ),\n        Container(\n          width: 1.5,\n          height: 50,\n          color: Colors.black12,\n        ),\n        Expanded(\n          child: InkWell(\n            onTap: onDelete,\n            child: Container(\n              height: 50,\n              alignment: Alignment.center,\n              child: Text(\n                \'\xd8\xad\xd8\xb0\xd9\x81\',\n                style: TextStyle(\n                  color: appTheme.errorColor,\n                  fontWeight: FontWeight.bold,\n                ),\n              ),\n            ),\n          ),\n        ),\n      ],\n    );\n  }\n\n  Row _buildLabeledIcon({Widget icon, String label}) {\n    return Row(\n      crossAxisAlignment: CrossAxisAlignment.end,\n      children: <Widget>[\n        icon,\n        SizedBox(width: 5),\n        Text(\n          label,\n          textScaleFactor: .75,\n        ),\n      ],\n    );\n  }\n\n  Widget _buildCommentsSection(BuildContext context) {\n    return Column(\n      children: [\n        if (article.comments.isNotEmpty)\n          CommentTile(comment: article.comments.first),\n        _buildCommentTextInput(context),\n      ],\n    );\n  }\n\n  Widget _buildCommentTextInput(BuildContext context) {\n    return Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: Row(\n        children: <Widget>[\n          IconButton(\n            icon: Icon(FontAwesomeIcons.paperPlane),\n            onPressed: () {},\n          ),\n          Flexible(\n            child: TextField(\n              decoration: InputDecoration(\n                hintText: \'\xd9\x83\xd8\xaa\xd8\xa7\xd8\xa8\xd8\xa9 \xd8\xaa\xd8\xb9\xd9\x84\xd9\x8a\xd9\x82\',\n                filled: true,\n                fillColor: Color(0xFFEFEFEF),\n                border: OutlineInputBorder(\n                  borderRadius: BorderRadius.all(Radius.circular(50)),\n                  borderSide: BorderSide.none,\n                ),\n                contentPadding: EdgeInsets.all(12),\n              ),\n              onSubmitted: (_) {},\n              onTap: () {},\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n\nclass CommentTile extends StatelessWidget {\n  final CommentModel comment;\n\n  const CommentTile({Key key, this.comment}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: <Widget>[\n        ListTile(\n          leading: CircleAvatar(\n            backgroundImage: CachedNetworkImageProvider(comment.user.avatar),\n          ),\n          title: Text(comment.user.name),\n          subtitle: Text(\n            DateFormat.yMEd().format(comment.createdAt),\n            textScaleFactor: .75,\n          ),\n        ),\n        SizedBox(\n          width: MediaQuery.of(context).size.width,\n          child: Padding(\n            padding: EdgeInsets.symmetric(horizontal: 8),\n            child: Text(\n              comment.text,\n              textAlign: TextAlign.end,\n            ),\n          ),\n        ),\n      ],\n    );\n  }\n}\n

\n

Answer 1

您必须将intl包添加到您的项目中，并使用此代码作为整个应用程序的 AppTextField：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart' as intl;

class AppTextField extends StatefulWidget {
  final int maxLines;
  final String title;
  final TextInputType? textInput;
  final bool autoFocus;
  final TextInputAction inputAction;

  AppTextField(this.title,
      {this.maxLines: 1,
      this.textInput,
      this.autoFocus: false,
      this.inputAction: TextInputAction.next});

  @override
  State<StatefulWidget> createState() => AppTextFieldSate();
}

class AppTextFieldSate extends State<AppTextField> {
  String? text = '';

  bool isRTL(String text) {
    return intl.Bidi.detectRtlDirectionality(text);
  }

  @override
  Widget build(BuildContext context) => Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      child: TextField(
          textDirection: isRTL(text!) ? TextDirection.rtl : TextDirection.ltr,
          textInputAction: widget.inputAction,
          keyboardType: widget.textInput,
          autofocus: widget.autoFocus,
          maxLines: widget.maxLines,
          decoration: InputDecoration(
            labelText: widget.title,
          ),
          onChanged: (value) {
            setState(() {
              text = value;
            });
          }));
}

我希望它有用:)

Answer 2

• 如果您无法检测应用程序用户当前使用的语言，您可以尝试firebase ml lnaguage 检测套件，它将帮助您检测帖子的语言

• 根据检测到的语言，您可以将小部件textAlign的属性设置Text 为TextAlign.left或 TextAlign.right

IE

Text("$content", textAlign: lang=='ar'?TextAlign.right:TextAlign.left )