user12021836
user12021836

Reputation:

how to return to home/main page in flutter drawer

Flutter has findAncestorWidgetOfExactType ( old Element.ancestorWidgetOfExactType )and I suppose that can be used to return to main/home page ( in example below MyHomePage). Please help how I can navigate to home page when drawer item Home is tapped.

import 'package:flutter/material.dart';

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

DrawerOnly sameDrawerOnly = DrawerOnly();

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('My Page!')),
      drawer: sameDrawerOnly,
    );
  }
}

class DrawerOnly  extends StatefulWidget {
  const DrawerOnly ({
    Key key,
  }) : super(key: key);

  @override
  _DrawerOnlyState createState() => _DrawerOnlyState();
}

class _DrawerOnlyState extends State<DrawerOnly > {

  static int itemClicked = 0;

  @override
  Widget build(BuildContext ctxt) {
    return Drawer(
        child: new ListView(
          children: <Widget>[
            new DrawerHeader(
              child: new Text("DRAWER HEADER.."),
              decoration: new BoxDecoration(
                  color: Colors.orange
              ),
            ),
            new ListTile(
              title: new Text("Item => A", style: itemClicked==1 ? TextStyle(  fontWeight: FontWeight.bold, color: Colors.red.withOpacity(0.6) ) : null),
              onTap: () {
                Navigator.pop(ctxt);

                setState(() {
                  itemClicked=1;
                });
                Navigator.push(ctxt,
                    new MaterialPageRoute(builder: (ctxt) => new FirstPage()));
              },
            ),
            new ListTile(
              title: new Text("Item => 2", style: itemClicked==2 ? TextStyle(  fontWeight: FontWeight.bold , color: Colors.green.withOpacity(0.6) ) : TextStyle()),
              onTap: () {
                Navigator.pop(ctxt);

                setState(() {
                  itemClicked=2;
                });
                Navigator.push(ctxt,
                    new MaterialPageRoute(builder: (ctxt) => new SecondPage()));
              },
            ),
            new ListTile(
              title: new Text("Home", style: itemClicked==3 ? TextStyle(  fontWeight: FontWeight.bold , color: Colors.green.withOpacity(0.6) ) : TextStyle()),
              onTap: () {
                Navigator.pop(ctxt);

                setState(() {
                  itemClicked=3;
                });
              // how to get findAncestorWidgetOfExactType

              },
            ),
          ],
        )
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      drawer: sameDrawerOnly,
      appBar: new AppBar(title: new Text("First Page"),),
      body: new Text("I belongs to First Page"),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      drawer: sameDrawerOnly,
      appBar: new AppBar(title: new Text("Second Page"),),
      body: new Text("I belongs to Second Page"),
    );
  }
}

There is another SO post but does not elaborate to help navigator return to home by finding Ancestor widget.

Upvotes: 1

Views: 1874

Answers (1)

MickaelHrndz
MickaelHrndz

Reputation: 3842

If you want to get to the first page in the navigator, you can do :

Navigator.of(context).popUntil((route) => route.isFirst)

the post you linked is for when you're using named routes :

Navigator.popUntil(context, ModalRoute.withName('/'))

Upvotes: 2

Related Questions