Flutter setState not updating values

Question

Hi there a Flutter newbie here. I have a project to be submitted via flutter. This is my main code and it's not updating text to stop when button was clicked.

import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher_string.dart';

import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FM Mahanama',
      theme: ThemeData(
        primaryColor: const Color(0xfffbc02d),
        primarySwatch: Colors.amber,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        primaryColor: const Color(0xfffbc02d),
        primarySwatch: Colors.amber,
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'FM Mahanama'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _selectedAppIndex = 0;

  IconData iconPlayStop = Icons.play_arrow_rounded;
  String txtPlayStop = "Play";

  static final assetsAudioPlayer = AssetsAudioPlayer();

  @override
  void initState() {
    WidgetsFlutterBinding.ensureInitialized();
    initFirebaseActivities();
  }

  void initFirebaseActivities() {
    Firebase.initializeApp();
  }

  static Future<void> initRadioPlayer(param0) async {
    try {
      await assetsAudioPlayer.open(
        Audio.liveStream(param0),
        showNotification: true,
        autoStart: true,
      );
    } catch (t) {
      AlertDialog(title: const Text("Error"), content: Text(t.toString()),);
    }
  }

  void updateButtonText(String txt, IconData iconData){
    setState(() {
      txtPlayStop = txt;
      iconPlayStop = iconData;
    });
  }

  @override
  void dispose() {
    if(assetsAudioPlayer.isPlaying.value){
      assetsAudioPlayer.stop();
    }
  }

  static void _openFacebookPage() async {
    String fbProtocolUrl = "fb://page/865683116816630";
    String fallbackUrl = "https://www.facebook.com/mcrcofficial/";
    try {
      bool launched = await launchUrlString(fbProtocolUrl);
      if (!launched) {
        await launchUrlString(fallbackUrl);
      }
    } catch (e) {
      await launchUrlString(fallbackUrl);
    }
  }

  late final Set<Widget> _appPages = <Widget>{
    Center(
      child: StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
        stream: FirebaseFirestore.instance
            .collection("public")
            .doc("stream")
            .snapshots(),
        builder: (BuildContext context,
            AsyncSnapshot<DocumentSnapshot<Map<String, dynamic>>> data) {
          if (data.hasData) {
            if (!data.data?.get("onair")) {
              if (assetsAudioPlayer.isPlaying.value) {
                assetsAudioPlayer.stop();
              }
            }

            return Visibility(
              replacement: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 20.0),
                      child: Image.asset(
                        "assets/images/app_logo.png",
                        width: 200.0,
                        fit: BoxFit.cover,
                      ),
                    ),
                    const Text(
                      "FM Mahanama is currently offline!",
                      style: TextStyle(fontSize: 18.0),
                    ),
                    const Padding(
                      padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 20.0),
                      child: Text(
                          "Checkout our Facebook for page more information"),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 20.0),
                      child: TextButton.icon(
                        onPressed: () {
                          _openFacebookPage();
                        },
                        icon: const Icon(Icons.link_rounded),
                        label: const Text("Facebook Page"),
                      ),
                    ),
                  ],
                ),
              ),
              visible: data.data?.get("onair"),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 30.0),
                      child: Card(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0)),
                        elevation: 10.0,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(30.0),
                          child: Image.network(
                            data.data?.get("cover_img"),
                            width: 300.0,
                            height: 300.0,
                            fit: BoxFit.fitHeight,
                          ),
                        ),
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 5.0),
                      child: Text(
                        "Now Playing",
                        style: TextStyle(fontSize: 22.0),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 20.0),
                      child: Text(
                        data.data!.get("nowplaying").toString(),
                        style: const TextStyle(
                            fontSize: 24.0, fontWeight: FontWeight.w600),
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 5.0),
                      child: Text(
                        "By",
                        style: TextStyle(fontSize: 18.0),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 30.0),
                      child: Text(
                        data.data!.get("by").toString(),
                        style: const TextStyle(
                            fontSize: 22.0, fontWeight: FontWeight.w600),
                      ),
                    ),
                    ElevatedButton.icon(
                      onPressed: () {
                        if(!assetsAudioPlayer.isPlaying.value) {
                          initRadioPlayer(data.data?.get("link"));
                          updateButtonText("Stop", Icons.stop_rounded);
                        }else{
                          assetsAudioPlayer.stop();
                          updateButtonText("Play", Icons.play_arrow_rounded);
                        }
                      },
                      label: Text(getButtonString(), style: const TextStyle(fontSize: 24.0),),
                      icon: Icon(iconPlayStop, size: 24.0,),
                    ),
                  ],
                ),
              ),
            );
          } else {
            return const Text("There is a error loading data!");
          }
        },
      ),
    ),
    const Center(
      child: Text("Scoreboard"),
    ),
    const Center(
      child: Text("About"),
    ),
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(widget.title),
        ),
      ),
      body: Center(
        child: _appPages.elementAt(_selectedAppIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.transparent,
        elevation: 0,
        currentIndex: _selectedAppIndex,
        selectedFontSize: 14,
        unselectedFontSize: 14,
        showUnselectedLabels: false,
        onTap: (value) {
          setState(() {
            _selectedAppIndex = value;
          });
        },
        items: const [
          BottomNavigationBarItem(
            label: "Player",
            icon: Icon(Icons.music_note_rounded),
          ),
          BottomNavigationBarItem(
            label: "Scoreboard",
            icon: Icon(Icons.scoreboard_rounded),
          ),
          BottomNavigationBarItem(
            label: "About",
            icon: Icon(Icons.info_rounded),
          ),
        ],
      ),
    );
  }

  static String getButtonString() {
    if(assetsAudioPlayer.isPlaying.value){
      return "Stop";
    }else{
      return "Play";
    }
  }
}

What I want is to update the button text and icon stop text and icon to when the button is pressed and the player is playing and vice versa.

I am using the latest build of flutter with material design widgets. I am building for android and ios.

Fatiha IMOUSSAINE · Accepted Answer · 2022-06-21 10:36:28Z

1

you need to tell your code when did you change the state by doing setState()

ElevatedButton.icon(
                  onPressed: () {
                  setState(() {// add this whenever you want to change the values and update your screen
                    if(!assetsAudioPlayer.isPlaying.value) {
                      initRadioPlayer(data.data?.get("link"));
                      updateButtonText("Stop", Icons.stop_rounded);
                    }else{
                      assetsAudioPlayer.stop();
                      updateButtonText("Play", Icons.play_arrow_rounded);
                    }
                  });
                  },
                  label: Text(getButtonString(), style: const 
                  TextStyle(fontSize: 24.0),),
                  icon: Icon(iconPlayStop, size: 24.0,),
                ),

answered Jun 21, 2022 at 10:36

Fatiha IMOUSSAINE

3681 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rusiru Wijethilake Over a year ago

I updated my cord like this but it isn't updating the values

Rusiru Wijethilake Over a year ago

onPressed: () { setState((){ if(!assetsAudioPlayer.isPlaying.value) { initRadioPlayer(data.data?.get("link")); txtPlayStop = "Stop"; iconPlayStop = Icons.stop_rounded; }else{ assetsAudioPlayer.stop(); txtPlayStop = "Play"; iconPlayStop = Icons.play_arrow_rounded; } }); },

iremtasci · Accepted Answer · 2022-06-21 11:25:36Z

0

You can use like that:

   ElevatedButton.icon(
        onPressed: () async {
          await getButtonString();
          setState(() {
          });
        },
        label: Text(getButtonString(), style: const
        TextStyle(fontSize: 24.0),),
        icon: Icon(iconPlayStop, size: 24.0,),
      ),

For more information https://dart.dev/codelabs/async-await

answered Jun 21, 2022 at 11:25

iremtasci

11 bronze badge

1 Comment

Rusiru Wijethilake Over a year ago

I tried this but it's not working

Rusiru Wijethilake · Accepted Answer · 2022-06-21 15:02:15Z

I found a solution for this. It seems that setState isn't working for my app. So I implemented ValueNotifier and ValueListenableBuilder to update the values.

First I initialised the variables

ValueNotifier<IconData> iconPlayStop = ValueNotifier(Icons.play_arrow_rounded);
ValueNotifier<String> txtPlayStop = ValueNotifier("Play");

Then in button on click I updated the code to change the values on both value notifiers.

                      onPressed: () {
                        if(!assetsAudioPlayer.isPlaying.value) {
                          initRadioPlayer(data.data?.get("link"));
                          txtPlayStop.value = "Stop";
                          iconPlayStop.value = Icons.stop_rounded;
                          iconPlayStop.notifyListeners();
                        }else{
                          assetsAudioPlayer.stop();
                          txtPlayStop.value = "Play";
                          iconPlayStop.value = Icons.play_arrow_rounded;
                        }
                      },

Then on both label and icon I added ValueListenableBuilders

                      label: ValueListenableBuilder(
                        valueListenable: txtPlayStop,
                        builder: (BuildContext context, String value, Widget? child) => Text(value, style: const TextStyle(fontSize: 24.0),),
                      ),
                      icon: ValueListenableBuilder(
                        valueListenable: iconPlayStop,
                        builder: (BuildContext context, IconData value, Widget? child) => Icon(value, size: 24.0,),
                      ),

Collectives™ on Stack Overflow

Flutter setState not updating values

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related