2

I just started flutter, this is a basic question but I am not able to solve. I created a stateful widget and I need to call the setState() method on click of a button. The button is not part of this stateful widget. The button is present in the footer of application.

complete application code:

import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override build(BuildContext context) { return new MaterialApp( title: "My app title", home: new Scaffold( appBar: new AppBar( title: new Text("My App"), backgroundColor: Colors.amber, ), body: new Container( child: new Center( child: new MyStateFullWidget(), ), ), persistentFooterButtons: <Widget>[ new FlatButton( onPressed: () { // I need to call the update() of MyStateFullWidget/MyStateFullWidgetState class }, child: new Text("Click Here"), color: Colors.amber, textColor: Colors.white, ), ], )); } } class MyStateFullWidget extends StatefulWidget { @override State<StatefulWidget> createState() { return new MyStateFullWidgetState(); } } class MyStateFullWidgetState extends State<MyStateFullWidget> { int count = 0; @override Widget build(BuildContext context) { return new Text("Count: $count"); } update() { setState() { count++; } } } 

2 Answers 2

6

I need to call the setState() method on click of a button

You may have a few options (or alternatives) to achieve the end result (all with different tradeoffs):

  • Elevate the state (i.e. count) to an Inherited Widget above the Button and Display Widget. This may be the easiest or most appropriate.
  • Leverage some kind of Action-based communication such as Flutter Redux (where you dispatch an action, which affects the display widget via a StoreConnector and rebuilds). This can be seen as just another way to 'elevate' state. However, this requires a whole new dependency and a lot of overhead given your simple example, but I wanted to point it out.
  • You can create some kind of Stream and StreamController that the Display widget subscribes/listens to. However, this may be overkill and I'm not sure how appropriate representing button clicks over a stream would be.

There may be other solutions that I'm not thinking of; however, remember that the goal of reactive UI is to keep state simple.

So if you have multiple leaf widgets that care about a piece of state (want to know it, want to change it), it might mean that this belongs to a higher level component (e.g a App-level piece of state, or maybe some other common ancestor - but both could use Inherited Widget to prevent passing the piece of state all around)

Sign up to request clarification or add additional context in comments.

5 Comments

I achieved the purpose by using Inherited Widget
Could you provide an example of how you did this @Anil8753?
Thank you @Anil8753! I would recommend creating a GitHub project showcasing this in case it stops working with a different version of Flutter / Dart
@Anil8753 , thanks for the code! btw I how do add input to it? for example if I wanna add another button/method for decrement?
-1

You should use your Scaffold in the State instead of using in StatelessWidget. Here is the working solution.

class MyApp extends StatelessWidget { @override build(BuildContext context) { return MaterialApp( title: "My app title", home: MyStateFullWidget()); } } class MyStateFullWidget extends StatefulWidget { @override State<StatefulWidget> createState() { return MyStateFullWidgetState(); } } class MyStateFullWidgetState extends State<MyStateFullWidget> { int count = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("My App"), backgroundColor: Colors.amber, ), body: Container( child: Center( child:Text("Count: $count"), ), ), persistentFooterButtons: <Widget>[ FlatButton( onPressed: update, child: Text("Click Here"), color: Colors.amber, textColor: Colors.white, ), ], ); } void update() { setState(() { count++; }); } } 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.