CODEWITHSUNDEEP
flutterdart
SaySomething
SaySomething

Reputation: 279

different screens with PopupMenuButton

I am working on a small app on Flutter/Dart to get used to the language since I am new with it. I am checking to implement a PopupMenuButton in my app bar, which I did correctly. What I am trying to do is to get different screens (widgets), depending on which item from the PopupMenuButton is selected. For example: PopupMenuItems: Settings, profile, log out. So whenever the user selects one of them, it redirects to another widget (screen). So far, I achieved to do the PopupMenuBotton, and the different options renders a different value in the screen:

class _MyHomePage extends State<MyHomePage> {
  String _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // centers the title in the appBar
        centerTitle: true,
        title: Text(
          "Alba's Playground",
          // Mentioning the theme
          style: Theme.of(context).textTheme.headline1,
        ),
        actions: <Widget>[
          PopupMenuButton(onSelected: (String str) {
            setState(() {
              _selectedValue = str;
            });
          }, itemBuilder: (BuildContext context) {
            return <PopupMenuEntry<String>>[
              PopupMenuItem(
                child: Text(
                  "Item 1",
                  // Mentioning the theme
                  style: Theme.of(context).textTheme.headline2,
                ),
                value: "Item1",
              ),
              PopupMenuItem(
                child: Text(
                  "Item 2",
                  style: Theme.of(context).textTheme.headline2,
                ),
                value: "Item2",
              ),
              PopupMenuItem(
                child: Text(
                  "Item 3",
                  style: Theme.of(context).textTheme.headline2,
                ),
                value: "Item3",
              ),
            ];
          })
        ],
      ),
      body: Container(
        Text("$_selectedValue"),

So whenever the user acces to the option "item1", the value "item1" is rendered, but it does not change the screen. What I want to achieve is different screens for different buttons. If anyone knows how to do it or can give me a hint I would really appreciate it.

Thanks.

Upvotes: 1

Views: 115

Answers (2)

Parth Pitroda
Parth Pitroda

Reputation: 997

Use this :-

GestureDetector(onTap: () {
                  Navigator.push(context,
                  MaterialPageRoute(builder: (context) => SettingScreen()),
                },
                child://your child 
);

Upvotes: 1

wafL
wafL

Reputation: 655

Take a look at the setState((){}) function has to offer. Furthermore, you need to use the onTap: functionality buttons have. If that is not the case for the Widget that you are using as a button, check out GestureDetector.

Upvotes: 0

Related Questions