Question 319571 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter appbar not supporting RTL

I’m using appbar and I’ve added an Icon button in the leading.
by making the app RTL this button stays on the left and won’t come right.

because app is multi language and should support RTL. all the parts works but the appbar doesn’t.

// AppBar

appBar: AppBar(
        // automaticallyImplyLeading: false,
        elevation: 0.5,
        centerTitle: true,
        title: ValueListenableBuilder(
          valueListenable: globals.selectedBarIndex,
          builder: (context, value, Widget? child) {
            return Text(globals.navBarItems[globals.selectedBarIndex.value].text);
          },
        ),
        leading: IconButton(
          onPressed: _handleMenuButtonPressed,
          icon: ValueListenableBuilder<AdvancedDrawerValue>(
            valueListenable: widget.advancedDrawerController,
            builder: (_, value, __) {
              return AnimatedSwitcher(
                duration: const Duration(milliseconds: 250),
                child: Icon(
                  value.visible ? Icons.clear : Icons.menu,
                  key: ValueKey<bool>(value.visible),
                ),
              );
            },
          ),
        ),
      ),

enter image description here

Tags:

2

Answers


  1. 0

    To properly support RTL (Right-to-Left) in your app’s AppBar and handle the positioning of the leading IconButton based on the text direction, you can use the Directionality widget. Here’s an example of how you can modify your AppBar code.Please check this this below code

    AppBar(
  elevation: 0.5,
  centerTitle: true,
  title: ValueListenableBuilder(
    valueListenable: globals.selectedBarIndex,
    builder: (context, value, Widget? child) {
      return Text(globals.navBarItems[globals.selectedBarIndex.value].text);
    },
  ),
  leading: Directionality(
    textDirection: TextDirection.rtl, // Set the text direction based on your app's language/locale
    child: IconButton(
      onPressed: _handleMenuButtonPressed,
      icon: ValueListenableBuilder<AdvancedDrawerValue>(
        valueListenable: widget.advancedDrawerController,
        builder: (_, value, __) {
          return AnimatedSwitcher(
            duration: const Duration(milliseconds: 250),
            child: Icon(
              value.visible ? Icons.clear : Icons.menu,
              key: ValueKey<bool>(value.visible),
            ),
          );
        },
      ),
    ),
  ),
),
    Login or Signup to reply.
  2. 0

    You must use the Directionality widget.
    To use Directionality in the AppBar, see the following code:

     PreferredSize(
        preferredSize: Size(width, height),
        child: Directionality(
         // ----right or left---
          textDirection: TextDirection.rtl,
          child: AppBar(
            // automaticallyImplyLeading: false,
            elevation: 0.5,
            centerTitle: true,
            title: ValueListenableBuilder(
              valueListenable: globals.selectedBarIndex,
              builder: (context, value, Widget? child) {
                return Text(globals.navBarItems[globals.selectedBarIndex.value].text);
              },
            ),
            leading: IconButton(
              onPressed: _handleMenuButtonPressed,
              icon: ValueListenableBuilder<AdvancedDrawerValue>(
                valueListenable: widget.advancedDrawerController,
                builder: (_, value, __) {
                  return AnimatedSwitcher(
                    duration: const Duration(milliseconds: 250),
                    child: Icon(
                      value.visible ? Icons.clear : Icons.menu,
                      key: ValueKey<bool>(value.visible),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search