Why does Drawer open on the wrong side?

I use drawer like this

return Scaffold(
  appBar: AppBar(...),
  body: ... ,
  endDrawer: const AppDrawer(), //where AppDrawer returns a Drawer()
);

in this case, the drawer is shown in the appbar at the end on the right side and opens on the right side of the screen too, and everything seems to be ok here.

But on another page (let it be a second screen) I use a custom AppBar and here I use Drawer like this

class PaginationAppBar extends StatelessWidget implements PreferredSizeWidget {
    ...
    Widget build(BuildContext context) {
      return AppBar(
        automaticallyImplyLeading: false,
        ...
        IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),
        ...
    } //build end
} //PaginationAppBar class end

this AppBar is used this way

return Scaffold(
  appBar: PaginationAppBar(),
  body: ....,
  drawer: const AppDrawer(),
);

and in this case, the drawer opens at the left border of the screen, i.e. from left to right.

Thus, Drawer is drawn differently on different screens, which is not good. In the latter case, how to draw the Drawer from right to left (as on the first screen)? The idea is to make the Drawer open in both cases at the right border of the screen.

Solution

It's Text Directionality related.

drawer : A panel displayed to the side of the body, often hidden on mobile devices. Swipes in left-to-right, that's when TextDirection is ltr.

endDrawer : A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from right-to-left, that's when TextDirection is ltr.

It's all revolves around the Text Direction of your app

suppose it's a ltr language like english:

drawer will open from ltr.

endDrwaer will open from rtl.

and vice versa. if the directionality changed.

so, to make Both Screens display the drawer from rtl, make the second screen like this:

return Scaffold(
  appBar: PaginationAppBar(),
  body: ....,
  endDrawer: const AppDrawer(),
);

Interact programmatically with the drawer to open and close it:

Open

Scaffold.of(context).openEndDrawer();

Navigator.of(context).pop();

or even using the scaffold to close it.

for more info drawer , endDrawer.