автоматическое направление текста (на основе введенного текста) в виджетах флаттер-текста и текстовых полей - PullRequest
0 голосов
/ 20 июня 2020

Я делаю многоязычное приложение на флаттере (ar / en), поэтому я хочу отображать свой контент на этих языках, моя проблема в том, что направление текста основано на языке пользовательского интерфейса, я хочу динамически изменять направление на основе содержимого, если ar должно быть rtl, иначе ltr.

Мой текущий вид Мой текущий вид

желаемый эффект желаемый эффект

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,
            ),
          ),
        ),
      ],
    );
  }
}

1 Ответ

0 голосов
/ 20 июня 2020
  • Если у вас нет возможности определить текущий язык, который использует пользователь приложения, вы можете попробовать firebase ml lnaguage набора , который поможет вам определить язык сообщение

  • В зависимости от обнаруженного языка вы устанавливаете для свойства textAlign виджета Text значение TextAlign.left или TextAlign.right

т.е.

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