Flutter setState not updating values - flutter

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.

Answer 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,),
),

Answer 2

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

Answer 3

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,),
),