Change fragment from current fragment

Hi, I’m very new to flutter, but I have made some android application already.

In android, we can navigation between fragment using FragmentTransaction, which is basicaly the thing i’m trying to achieve here.

I’ve follow this link : https://medium.com/@kashifmin/flutter-setting-up-a-navigation-drawer-with-multiple-fragments-widgets-1914fda3c8a8 to create a drawer working with fragment (but I don’t have the back arrow on the appbar to go back, I need sometime to have it and sometimes not…).

Inside my first fragment, I need to open another fragment, but I can’t achieve this.

I’ve tried several things such as

Navigator.pushNamed(context, “/monCompte”);

Or other stuff… It’s making me crazy, I’ve been working on this problems for hours…
Thanks for your help !

1 Like

I saw the tutorial that you are following, so basically what tutorial is showing is how to display different widgets from side drawer, but if you are pushing a new page then the Widget has to be wrapped in Scaffold.

In the tutorial, you are just changing the displayed widget rather than pushing a new page onto the stack so there is nothing in the route to go back to.

Appbar has a property called automaticallyImplyLeading: which is true by default. So, whenever there are existing pages in the stack, a back arrow appears in the appbar by default.

onTap: <em>() {</em> Navigator.of( context ) .pop() ; Navigator.of(context).push(MaterialPageRoute( builder: (BuildContext context) => NewPage( "Page two" ))) ; }

If you have some time on your hand, I will write up a blog on this with step-by-step tutorial.

You could refer this one till then, https://medium.com/flutterpub/navigation-drawer-using-flutter-cc8a5cfcab90

Feel free to share your code snippet for further assistance :slight_smile:

hi Sakina, thanks for your answer, it’s a little more clear, and I’ll try it.

Basically, my code is the same than the tutorial, except the “fragment”

Each fragment is a .dart file which is devided like this :

Statefull
extends State<>

Is this a good practice or not ? I’m working with many technologies, it’s easy to get lost :rofl::joy:

I’ll share my code ASAP. Thanks !

1 Like

Yes, I understand. :):sweat_smile:

If you have some variable data in your class and if you want to maintain the state then you should use Stateful Widget, else Stateless is fine.

Thanks for your advices ! I’ve changed the structure of my project (following your link) and now the navigation is lot easier !

But for some screen where I need the back arrow, the arrow still not appearing (maybe because I’m using a custom appbar with a custom icon ?)

Here’s my appbar :

Thanks for your advices ! I’ve changed the structure of my project (following your link) and now the navigation is lot easier !

But for some screen where I need the back arrow, the arrow still not appearing (maybe because I’m using a custom appbar with a custom icon ?)

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color backgroundColor = Colors.white;
  final String title;
//  final AppBar appBar;

  /// you can add more fields that meet your needs

  const BaseAppBar({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
return AppBar(
  title: Text(
    title,
    style: TextStyle(color: Colors.black),
  ),
  backgroundColor: backgroundColor,
  bottomOpacity: 0.0,
  elevation: 0.0,
  leading: Builder(
    builder: (context) => IconButton(
      icon: new Image(
        image: AssetImage('images/menu.png'),
        width: 20,
      ),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
  ),
);
  }

  @override
  Size get preferredSize => new Size.fromHeight(AppBar().preferredSize.height);
}

If it helps, for the last small question it’s yes, it’s because of the custom appbar.

To avoid this, I’ve created a custom BACK appbar (with the back arrow).

On icon press, do this

Navigator.of(context).pop();

To go back to previous screen

Any reason why you decided to use custom app bar?

A needed to change the drawer logo, and I created an appbar.dart file to have it on each page