IOS audio overlaps!.

[franquicidad]

Hello for your contribution ! great work! .Can you help me with this issue, I am using a GNav bottom nav bar the android app works fine and it is on production however the IOS app I click on the another tab on the bottom nav bar and the audio overlaps from the audio on the main Screen. I was thinking it was something on the state but if it works on android thennn .....

Here is my main code.

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

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

// This widget is the root of your application.
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Divina Voluntad'),
);
}
}

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

final String title;

@OverRide
State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
late PodPlayerController _controller;
int _currentIndex = 0;

@OverRide
void initState() {
_playvideo();
_getNameByIndex(_currentIndex);
super.initState();
}

@OverRide
void deactivate() {
_controller.pause();
super.deactivate();
}

@OverRide
void dispose() {
_controller.dispose();
super.dispose();
}

final screens = [PasionCristo(), NovenaNavidad(), LibroDelCielo()];
final colors = [Colors.blue, Colors.red, Colors.indigo];
final appText = ['Divina Voluntad', 'Novena de Navidad', 'Libro del cielo'];

@OverRide
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
decoration: BoxDecoration(),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
margin: EdgeInsets.only(bottom: 10),
child: GNav(
color: colors[_currentIndex],
tabBackgroundColor: colors[_currentIndex],
gap: 5,
textStyle: TextStyle(
fontSize: 18, color: Colors.white, fontWeight: FontWeight.w700),
selectedIndex: _currentIndex,
tabBorderRadius: 10,
padding: EdgeInsets.symmetric(vertical: 15, horizontal: 20),
onTabChange: (index) => {
setState(() => { _currentIndex = index})
},
tabs: [
GButton(
icon: Icons.add,
text: 'Pasion de Cristo',
iconActiveColor: Colors.white,
textColor: Colors.white,
),
GButton(
icon: Icons.ac_unit_outlined,
text: 'Novena Navidad',
iconActiveColor: Colors.white,
textColor: Colors.white,
),
GButton(
icon: Icons.cloud,
text: 'Libro del Cielo',
iconActiveColor: Colors.white,
textColor: Colors.white,
),
],
),
),
),
appBar: AppBar(
backgroundColor: colors[_currentIndex],
titleTextStyle: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w700,
),
title: Text(appText[_currentIndex]),
centerTitle: true,
),
body: screens[_currentIndex],
);
}

void _playvideo({
int index = 0,
bool init = false,
}) {
_controller = PodPlayerController(
playVideoFrom: PlayVideoFrom.youtube(pasion[index].url.toString()),
podPlayerConfig: const PodPlayerConfig(
autoPlay: true,
isLooping: false,
))
..initialise();
if (!init) {
_controller.pause();
}
}

String _getNameByIndex(int currentIndex) {
var methodCurrentIndex = currentIndex;
return pasion[methodCurrentIndex].name.toString();
}
}

I use this libraries

cupertino_icons: ^1.0.2
pod_player: ^0.1.0
google_fonts: ^3.0.1
google_nav_bar: ^5.0.6

[Lamia-Abdullah]

Use the “ didUpdateWidget ” method is a lifecycle method available in StatefulWidget.
Inside the method you have access to the (oldWidget) before it was updated, allowing you to compare the oldwidget with the current widget to Update the _playVideo();

  @override
  void didUpdateWidget(MyHomePage oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.id  != widget.id) {
      _playVideo(); // Update the video player when the widget updates

    }
  }

and Make sure to using a "ValueKey" with the video ID, the PlayVideo widget will be rebuilt whenever the video changes. This will ensure that the previous video is paused " before loading a new one ", preventing the audio overlap issue.

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

  @override
  Widget build(BuildContext context) {
    return PlayVideo(
      key: ValueKey(value.Id), // Use ValueKey to uniquely identify the PlayVideo widget
      id: value.Id,
    );
  }
}