Confused about Flutter StatefulWidget and StatelessWidget

Question

I've inherited an existing more or less working Flutter app I need to maintain. I have some basic Flutter knowledge, but I'm not an expert.

The app uses StatelessWidget, but then it defines a state...what is going on? Can someone please help. See the code below.

class MyApp extends StatelessWidget {
   ...
}

void main() async{
...

  runApp(
    ChangeNotifierProvider(
      child: MyApp(),
      create: (_) => AppState(),
    ),
  );
}

Update: I mistakenly assumed that the class AppState makes it "stateful" in some way, but it is defined as "class AppState extends ChangeNotifier". But then this AppState class does contain some information (e.g. in-app-purchase related info) which is being filling in during the app's execution, so it is "kinda stateful".

What do you mean by `but then it defines a state`? I can't see anything like that in the code you paste above. — Adnan Alshami, Jul 09 '21 at 09:05
I mean this "create: (_) => AppState(),", but now I'm thinking that however wrote it called it a "state" by mistake, as AppState is defined as "class AppState extends ChangeNotifier" — Tatyana Sirotkin, Jul 09 '21 at 09:10
But then this AppState class does contain some "stateful stuff", like information filling in during app's execution and being used later...totally confused.. — Tatyana Sirotkin, Jul 09 '21 at 09:13
This has been responded a thousand times and the information is over the official Flutter website. Please, always check official docs before creating a new question in SoF. — Mariano Zorrilla, Jul 09 '21 at 13:28

score 0 · Answer 1 · answered Jul 09 '21 at 13:20

A Stateful Widget:

A stateful widget is a flutter widget which consists of two classes: the widget and its State. Refer to this link to see why there are two classes in a stateful widget. A stateful widget can be rebuilt (due to which it is called stateful) and is used in places like forms where the content will change after submission. It is implemented like so:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Widget build(BuildContext context) {
    return Container();
  }
}

Advantages:

Can be rebuilt (recreated) using the setState() method
Has a state

Disadvantages:

Lots of boilerplate code

A Stateless Widget:

A stateless widget is a widget which cannot be rebuilt resulting in no State class and therefore, less boilerplate code. However, it is by no means faster than a stateful widget. It is implemented like so:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Advantages:

Less boilerplate code

Disadvantages:

Cannot be rebuilt

score -1 · Answer 2 · answered Jul 09 '21 at 08:52

Stateful and stateless widgets

A widget is either stateful or stateless. If a widget can change—when a user interacts with it, for example—it’s stateful.

A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

A widget’s state is stored in a State object, separating the widget’s state from its appearance. The state consists of values that can change, like a slider’s current value or whether a checkbox is checked. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.

got from Flutter Stateful and StatelessWidget

Confused about Flutter StatefulWidget and StatelessWidget

2 Answers2

A Stateful Widget:

A Stateless Widget: