将 AppBar 中的文本方向从 LTR 更改为 RTL 颤振

Question

我有一个正在构建的应用程序，其中有一个 AppBar。我的文字是阿拉伯语，我想将文字位置从 LTR（从左到右）更改为 RTL（从右到左）

这是 AppBar

的屏幕截图

这是我的 AppBar

的代码

class MyAppBar extends StatelessWidget with PreferredSizeWidget {

  @override
  Size get preferredSize => Size.fromHeight(kToolBarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        kAppBarTitleFirst,
      ),
    );
  }
}

所以问题是：- 如何让文本 عنوان التطبيق 位于我标记的红色位置（见上面的屏幕截图）

Answer 1

使用 textDirection 属性 文本小部件。

class MyAppBar extends StatelessWidget with PreferredSizeWidget {

  @override
  Size get preferredSize => Size.fromHeight(kToolBarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        kAppBarTitleFirst,
        textDirection:TextDirection.rtl  // ← add this line
      ),
    ); 
  }
}

Answer 2

如果您希望整个应用中的文本方向从右到左，而不仅仅是在应用栏上，您可以提供 Directionality 到 MaterialApp

MaterialApp(
 builder: (context, child) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: child,
    );
  },
);

Answer 3

强制整个应用从左到右。

import 'package:flutter/material.dart';

void main(List<String> args) {
  return runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.rtl,
          child: Scaffold(
            appBar: AppBar(
              title: const Text(
                'عنوان التطبيق',
              ),
              backgroundColor: Colors.blue,
            ),
            backgroundColor: Colors.blue,
          ),
        );
      },
    ),
  );
}

这也是对原始演示 flutter 的更改

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Directionality( // <-- Add this Directionality
          textDirection: TextDirection.rtl,
          child: MyHomePage(title: 'الصفحة الرئيسية لعرض Flutter Demo')),
    );
  }
}

将 AppBar 中的文本方向从 LTR 更改为 RTL 颤振

Change the text direction in the AppBar from going LTR to RTL flutter

flutter

dart

flutter-appbar