CODEWITHSUNDEEP
flutternavigation
Emanuel
Emanuel

Reputation: 722

Flutter align AppBar back button to right side

I am using textDirection: TextDirection.rtl on the MaterialApp:

return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      home: Directionality(
        textDirection: TextDirection.rtl,
        child: MyHomePage(title: appTitle),
      ),
    );

Everything is aligned to right and works perfectly, except for the back button of the AppBar.

When you navigate to other pages (specifically I'm using drawer) the back button is aligned to the left and not to the right.

appbar back button left aligned

Navigation code:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) => const SettingsView(),
  ),
);

"Settings" page:

return Scaffold(
      appBar: AppBar(title: Text("Settings"))
    );

As you can see I didn't touch the leading property, I thought it should be automatically...

Upvotes: 1

Views: 438

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63549

I am using builder to handle this.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
      builder: (context, child) => Directionality(
        textDirection: TextDirection.rtl,
        child: child ?? const SizedBox.shrink(),
      ),
    );
  }
}

class SettingPage extends StatelessWidget {
  const SettingPage({super.key});

  @override
  Widget build(BuildContext context) {
    print(Directionality.of(context).toString());
    return Scaffold(
      appBar: AppBar(
        title: Text("Settings"),
      ),
    );
  }
}

Upvotes: 1

Related Questions