CODEWITHSUNDEEP
flutterstate
Abiy Menberu
Abiy Menberu

Reputation: 133

What's a state in flutter?

I just started learning Flutter and as a beginner I'm facing some issues about understanding a state. I watched some videos on YouTube, read articles online. They explain the reason why one should use a Stateful Widget instead of Stateless. But I can't really understand what part of an app needs to be a Stateful Widget and what the use of the setState method is. Also what's the difference between the state of a widget and state of the app?

Upvotes: 5

Views: 9832

Answers (3)

Maroof Ansari
Maroof Ansari

Reputation: 11

if we want to make changes in our UI so that we use statefulWidget otherwise we use statelessWidget. in most case we will be using statefulWidget. that's it.

Upvotes: 0

X 2
X 2

Reputation: 373

Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app:

How layouts are built in flutter

State can be described as "whatever data you need in order to rebuild your UI at any moment in time".

When the state of your app changes (for example, the user flips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface. There is no imperative changing of the UI itself (like widget.setText)—you change the state, and the UI rebuilds from scratch.

The state that you do manage yourself can be separated into two conceptual types: ephemeral(widget state on your question) state and app state.

Ephemeral state

Ephemeral state (sometimes called UI state or local state) is the state you can neatly contain in a single widget.

There is no need to use state management techniques (ScopedModel, Redux, Provider, bloc, etc.) on this kind of state. All you need is a StatefulWidget. You only need to use setState to alter your current state.

For example, below, you see how the currently selected item in a bottom navigation bar is held in the _index field of the _MyHomepageState class. In this example, _index is ephemeral state.

    class MyHomepage extends StatefulWidget {
    const MyHomepage({Key? key}) : super(key: key);

    @override
    _MyHomepageState createState() => _MyHomepageState();
    }

    class _MyHomepageState extends State<MyHomepage> {
    int _index = 0;

    @override
    Widget build(BuildContext context) {
        return BottomNavigationBar(
        currentIndex: _index,
        onTap: (newIndex) {
            setState(() {
            _index = newIndex;
            });
        },
        // ... items ...
        );
    }
    }

Here, using setState() and a field inside the StatefulWidget’s State class is completely natural. No other part of your app needs to access _index. The variable only changes inside the MyHomepage widget. And, if the user closes and restarts the app, you don’t mind that _index resets to zero.

App state

State that is not ephemeral, that you want to share across many parts of your app, and that you want to keep between user sessions, is what we call application state (sometimes also called shared state).

Examples of application state:

  • User preferences
  • Login info
  • Notifications in a social networking app
  • The shopping cart in an e-commerce app
  • Read/unread state of articles in a news app

For managing app state, you’ll want to research your options. Your choice depends on the complexity and nature of your app, your team’s previous experience, and many other aspects.

Here's a link to an example on app wide state management using provider(one of many state management libraries), Example.

Here's a list of libraries that are used for app wide state management, Options.

In summary, there are two conceptual types of state in any Flutter app. Ephemeral state can be implemented using State and setState(), and is often local to a single widget. The rest is your app state. Both types have their place in any Flutter app, and the split between the two depends on your own preference and the complexity of the app.

Upvotes: 13

Sachin Mamoru
Sachin Mamoru

Reputation: 486

enter image description here

In the Stateless widget, the build function is called only once which makes the UI of the screen. It means through that widget you cannot change the UI again. It will render(build) the UI at once. So for those widgets, you need to send the information before building the widget.

Stateful Widgets: The widgets whose state can be altered once they are built are called stateful Widgets. This simply means the state of an app can change multiple times with different sets of variables, inputs, data. Below is the basic structure of a stateful widget. That means you can change the UI of this widget without building it again with help of the setState method.

For more information refer - https://medium.com/flutter-community/flutter-stateful-vs-stateless-db325309deae

Upvotes: 2

Related Questions