CODEWITHSUNDEEP
android-studioflutterdart
Zohaib Hamdule
Zohaib Hamdule

Reputation: 658

How to I update the layout of my home screen when something in the navigation drawer is pressed in Flutter?

I want to make a Navigation drawer application. But instead of a pushing a new screen when something is presses I want update my initial screen. I cannot use setState(){} in my drawer to update the state of my home screen.

Please help me with this.

Upvotes: 1

Views: 711

Answers (2)

JonnyH
JonnyH

Reputation: 368

You could also use a Provider for state management. Use the drawer to update the state (model) and use notifylisteners() to update your view. With conditionals pulled from the model, it is realy simple to create a 'single page' app.

Upvotes: 1

Benedikt J Schlegel
Benedikt J Schlegel

Reputation: 1939

You can pass a function from your HomeScreen to your Drawer.

In your Drawer:

    Class CustomDrawer{
        final function updateMainScreen;
        CustomDrawer(this.updateMainScreen);
    }

In your MainScreen:

child: CustomDrawer(updateScreenFunction), //this function is where your MainScreen state gets changed

This way you can change whatever you want in your HomeScreen from anywhere else.

UPDATE: More Complete example. Note that this is very rough and only so you get an idea of how this works.

HomeScreenState:

class _HomeScreenWidgetState extends State<HomeScreenWidget> {
  var containerColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: (Text('Hello')),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Container(
                height: 500,
                width: 300,
                color: containerColor,
              ),
              CustomDrawer(
                changeHomeScreen: changeContainerColor,
              )
            ],
          ),
        ));
  }

  void changeContainerColor(Color col) {
    setState(() {
      containerColor = col;
    });
  }
}

The Mock Drawer widget:

class CustomDrawer extends StatelessWidget {
  final Function changeHomeScreen;
  CustomDrawer({this.changeHomeScreen});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlatButton(
        child: Text("Action in Drawer"),
        onPressed: () => changeHomeScreen(Colors.blue),
      ),
    );
  }
}

Upvotes: 1

Related Questions