Leer Ephemeral vs App State | Understanding State in Flutter

Before you can manage state effectively in Flutter, you need to understand the difference between ephemeral state and app state. Ephemeral state refers to data that is local to a single widget and only relevant for a short period—think of it as a note you jot down on a sticky pad for a quick reminder. In contrast, app state is data that must be shared across multiple widgets or even the entire app, like a family calendar hung on the wall for everyone to see and update.

Ephemeral state is best handled within the widget itself, typically using a StatefulWidget. It is short-lived, such as the current value of a TextField as the user types. App state, on the other hand, is long-lived and shared, such as a user's login status, a shopping cart, or a counter displayed in multiple places. This state needs to be accessible and modifiable from various parts of your app.

To make this distinction concrete, consider the following example.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
            
import 'package:flutter/material.dart';

// App state: a shared counter variable
int sharedCounter = 0;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ephemeral vs App State',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ephemeral vs App State'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Ephemeral state: TextField
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: EphemeralTextField(),
            ),
            SizedBox(height: 40),
            // App state: Shared counter
            AppStateCounter(),
          ],
        ),
      ),
    );
  }
}

// Ephemeral state: Only relevant to this widget
class EphemeralTextField extends StatefulWidget {
  @override
  _EphemeralTextFieldState createState() => _EphemeralTextFieldState();
}

class _EphemeralTextFieldState extends State<EphemeralTextField> {
  String _inputValue = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          decoration: InputDecoration(labelText: 'Type something'),
          onChanged: (value) {
            setState(() {
              _inputValue = value;
            });
          },
        ),
        SizedBox(height: 10),
        Text('Ephemeral state: $_inputValue'),
      ],
    );
  }
}

// App state: Shared counter widget
class AppStateCounter extends StatefulWidget {
  @override
  _AppStateCounterState createState() => _AppStateCounterState();
}

class _AppStateCounterState extends State<AppStateCounter> {
  void _incrementCounter() {
    setState(() {
      sharedCounter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('App state (shared counter): $sharedCounter'),
        SizedBox(height: 10),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment Counter'),
        ),
      ],
    );
  }
}

The EphemeralTextField uses ephemeral state because the entered text is local to the widget and not shared. The AppStateCounter uses app state since sharedCounter can be accessed by multiple widgets and exists beyond a single widget.

Use ephemeral state for short-lived, widget-local data. Use app state when data must be shared or persist across the app. Choosing the right scope keeps your code simple and avoids bugs.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 2

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.