Home > Software design >  When I call setState in StatefulWidget, other widgets refresh too
When I call setState in StatefulWidget, other widgets refresh too

Time:11-02

The Goal

Use setState without redraw other widgets

What I Did

I'm using youtube_player_flutter to show YouTube video.

            String id;
            YoutubePlayerController _youtubeController =
                YoutubePlayerController(
              initialVideoId: id,
              flags: YoutubePlayerFlags(....);


            //Then call this:
                          YoutubePlayer(
                            controller: _youtubeController,
                            showVideoProgressIndicator: true,
                          ),

In same StatefulWidget I have a Text, Button and YoutubePlayer.

String str = "abc";

//in Column or Row
Text(str),
ElevatedButton(child: Text("Push"), onPressed: () { setState((){ str = "ABC" });}),
YoutubePlayer(
 controller: _youtubeController,
 showVideoProgressIndicator: true,
),

The Problem

When I call setState, YoutubePlayer is refreshed. This means Youtube video is loaded again, and progress is initialized.

I can't define YoutubePlayer as const because initialVideoId is indefinite.

flutter doctor

[√] Flutter (Channel beta, 2.6.0-5.2.pre, on Microsoft Windows [Version 10.0.22000.282], locale ja-JP)
    • Flutter version 2.6.0-5.2.pre at D:\src\flutter_windows_2.5.0-stable\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 400608f101 (7 weeks ago), 2021-09-15 15:50:26 -0700
    • Engine revision 1d521d89d8
    • Dart version 2.15.0 (build 2.15.0-82.2.beta)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at D:\Android
    • Platform android-30, build-tools 29.0.3
    • Java binary at: D:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8 10-b944.6842174)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.2)
    • Android Studio at D:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8 10-b944.6842174)

[√] VS Code (version 1.61.2)
    • VS Code at C:\Users\yukik\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.27.0

[√] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 95.0.4638.54
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 95.0.1020.40

• No issues found!

CodePudding user response:

setState refresh widget itself and it child widgets. So, if you put widget which you want to refresh on level beneath YouTube player, it won't refresh that player

CodePudding user response:

Well, setState does exactly that, it redraws all the page. If you want to redraw only one widget, you have to use streams/state management. This is why using setState is not a good practice, the cost/benefit is too high. Try to use MobX, GetX, RxDart, Cubit for state management.

  • Related