2

What is the rule of thumb to use an initial method for a widget. Shall I use the:

  • A. classical stateful widget approach?

enter image description here

  • Or is it better to stick with the B. stateless widget approach?

enter image description here

Both seem to work from my testing. In terms of code reduction, it seems the B. approach is better, shorter, cleaner, and more readable. How about the performance aspect? Anything else that I could be missing?

3
  • 1
    initializing a controller should be a one-time operation; if you do it on a StatelessWidget's build method, it will be triggered every time this widget is rebuilt. If you do it on a StatefulWidget's initState, it will only be called once, when this object is inserted into the tree when the State is initialized. Feb 21, 2022 at 19:08
  • Thanks @RomanJaquez. You cleared it up very simply. :) Don't you want to add it as an answer? I'd like to select it as a correct one :) Feb 21, 2022 at 20:11
  • One note:Implementations of this method should start with a call to the inherited method, as in super.initState() api.flutter.dev/flutter/widgets/State/initState.html Jul 28, 2022 at 12:28

4 Answers 4

9

Initializing a controller should be a one-time operation; if you do it on a StatelessWidget's build method, it will be triggered every time this widget is rebuilt. If you do it on a StatefulWidget's initState, it will only be called once, when this object is inserted into the tree when the State is initialized.

2

I was looking for initializing some values based on values passed in constructor in Stateless Widget. Because we all know for StatefulWidget we have initState() overridden callback to initialize certain values etc. But for Stateless Widget no option is given by default. If we do in build method, it will be called every time as the view update. So I am doing the below code. It works. Hope it will help someone.

import 'package:flutter/material.dart';

class Sample extends StatelessWidget {
  final int number1;
  final int number2;

  factory Sample(int passNumber1, int passNumber2, Key key) {
    int changeNumber2 = passNumber2 *
        2; //any modification you need can be done, or else pass it as it is.
    return Sample._(passNumber1, changeNumber2, key);
  }

  const Sample._(this.number1, this.number2, Key key) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text((number1 + number2).toString());
  }
}
0

Everything either a function or something else in widget build will run whenever you do a hot reload or a page refreshes but with initState it will run once on start of the app or when you restart the app in your IDE for example in StatefulWidget widget you can use:

void initState() {
    super.initState();
    WidgetsBinding.instance!
        .addPostFrameCallback((_) => your_function(context));
  }
1
  • StatelessWidget does not seem to have a super with initState () :( Feb 20 at 17:29
-1

To use stateful functionalities such as initState(), dispose() you can use following code which will give you that freedom :)

class StatefulWrapper extends StatefulWidget {
  final Function onInit;
  final Function onDespose;
  final Widget child;
  const StatefulWrapper(
      {super.key,
      required this.onInit,
      required this.onDespose,
      required this.child});

  @override
  State<StatefulWrapper> createState() => _StatefulWrapperState();
}

class _StatefulWrapperState extends State<StatefulWrapper> {
  @override
  void initState() {
    // ignore: unnecessary_null_comparison
    if (widget.onInit != null) {
      widget.onInit();
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }

  @override
  void dispose() {
    if (widget.onDespose != null) {
      widget.onDespose();
    }
    super.dispose();
  }
}

Using above code you can make Stateful Wrapper which contains stateful widget's method.

  • To use Stateful Wrapper in our widget tree you can just wrap your widget with Stateful Wrapper and provide the methods or action you want to perform on init and on dispose.

Code available on Github

NOTE: You can always add or remove method from Stateful Wrapper Class according to your need!!

Happy Fluttering!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.