Вивчайте When setState() Is Enough | Understanding State in Flutter

To manage user interface changes in a Flutter app, you often need to update the state of your widgets. The setState() method is the simplest and most direct way to update a widget’s state and trigger a rebuild of its UI. This method belongs to the State class, and you call it whenever you want Flutter to re-execute the build() method for that widget.

You should use setState() when the state you want to change is local to a single widget or a tightly-coupled group of widgets that are direct children. For example, toggling a button, updating a counter, or showing and hiding a widget based on user interaction are all cases where setState() is the right tool. It is best for managing ephemeral state—temporary state that does not need to be shared across many widgets or screens.

Here is how you might use setState() in a basic scenario.

main.dart


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

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

class ToggleVisibilityApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'setState Demo',
      home: ToggleVisibilityScreen(),
    );
  }
}

class ToggleVisibilityScreen extends StatefulWidget {
  @override
  _ToggleVisibilityScreenState createState() => _ToggleVisibilityScreenState();
}

class _ToggleVisibilityScreenState extends State<ToggleVisibilityScreen> {
  bool _isVisible = true;

  void _toggleWidget() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('setState() Visibility Toggle'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Visibility(
              visible: _isVisible,
              child: Container(
                padding: EdgeInsets.all(16),
                color: Colors.blue,
                child: Text(
                  'Hello, I am visible!',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleWidget,
              child: Text(_isVisible ? 'Hide Widget' : 'Show Widget'),
            ),
          ],
        ),
      ),
    );
  }
}

While setState() is simple and effective for local state like in the toggle example above, it has important limitations. If your app grows and the state needs to be shared across many widgets, or if you need to update state from widgets deep in the widget tree, setState() can quickly become difficult to manage. You might find yourself passing callbacks or state variables through many widget constructors, leading to code that is hard to read and maintain.

For instance, if multiple widgets need to know whether the blue box is visible, or if you want to change the visibility from another part of the app, setState() alone will not scale well. In these cases, you should consider more advanced state management solutions that allow you to separate state from UI and share it efficiently across your app.

Always use setState() for simple, local changes within a single widget or its direct children. Move to a more robust solution when state needs to be shared, persisted, or accessed from many places in your widget tree.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 4

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

What are some advanced state management solutions in Flutter?

When should I switch from setState() to another state management approach?

Can you give examples of when setState() is not enough?

Свайпніть щоб показати меню

Here is how you might use setState() in a basic scenario.

main.dart


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

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

class ToggleVisibilityApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'setState Demo',
      home: ToggleVisibilityScreen(),
    );
  }
}

class ToggleVisibilityScreen extends StatefulWidget {
  @override
  _ToggleVisibilityScreenState createState() => _ToggleVisibilityScreenState();
}

class _ToggleVisibilityScreenState extends State<ToggleVisibilityScreen> {
  bool _isVisible = true;

  void _toggleWidget() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('setState() Visibility Toggle'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Visibility(
              visible: _isVisible,
              child: Container(
                padding: EdgeInsets.all(16),
                color: Colors.blue,
                child: Text(
                  'Hello, I am visible!',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleWidget,
              child: Text(_isVisible ? 'Hide Widget' : 'Show Widget'),
            ),
          ],
        ),
      ),
    );
  }
}

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 4