Newbie question related to Flutter StatefulWidget

PMF 0
Viewed 29

I just started using Flutter, and was testing the sample counter app created with "flutter create counter"

First thing I wanted to try, was to move the counter logic to another Widget, so I tried this code:


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child: CounterWidget(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: // How to call the widget increment funcion???,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({
    Key? key,
    void onCount,
  }) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void incrementCounter() {
    _counter++;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
      ],
    );
  }
}

But then I realized that now I don't know hot to call the incrementCounter function of the widget each time the button is pressed.

What would be the right way to accomplish this?

Regards

statefulwidget flutter
2 Answers

You could do it the other way around. Create a stateless widget Counter. Store the value in HomePage and on each press setstate with a new counter value passed to Counter.

This way Even the floating button could be a separate stateless widget with final VoidCallback increment; parameter. And keep the incrementing void in the HomePage.

int increment() {
setState((){counter++})
}

Then create floating button as a separate widget with

FloatingButton(increase: increment)

Now you have 3 widgets, 1 stateful with dynamic information and 2 stateless where one has some behavior that impacts the other stateless widget by passing new information to it on setState.

userGcnY0

You should make a incrementCounter function in main class and pass it to CounterWidget ,like this:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: CounterWidget(
          counter: _counter,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class CounterWidget extends StatelessWidget {
  const CounterWidget({Key? key, required this.counter}) : super(key: key);
  final int counter;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$counter',
          style: Theme.of(context).textTheme.headline4,
        ),
      ],
    );
  }
}
eamirho3ein0
Related