appinioGmbH / flutter_packages

Dart and Flutter plugins/packages used and maintained by @appinioGmbH
193 stars 224 forks source link

[ BUG ] appinio_video_player: Control icons(play, pause, etc) doesn't load. #314

Open waged opened 1 month ago

waged commented 1 month ago

appinio_video_player

I have applied the library to my flutter web project and works perfectly fine except one thing unfortunately the play/pause icons doesn't show and appears as missing asset with small box.

Screenshot 2024-09-21 at 00 55 00

and here is the code snippet:


class ProductDetail extends ConsumerWidget {
  ProductDetail({super.key});

  final customVideoStateProvider =
      StateProvider.autoDispose<CustomVideoPlayerController?>((ref) {
    return null;
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    // Video control
    final customVideoProvider = ref.watch(customVideoStateProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text(product.name),
        leading: const BackButton(color: Colors.white),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                if (customVideoProvider != null)
                  CustomVideoPlayer(
                    customVideoPlayerController: customVideoProvider,
                  )
                else
                  Stack(alignment: Alignment.center, children: [
                    InkWell(
                      onTap: () async {
                        await _initializeVideo(ref,
                            'XXXXXXXXXX.mp4');
                      },
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(16.0),
                        child: Image.network(
                          "XXXXXX.png",
                          fit: BoxFit.cover,
                          errorBuilder: (BuildContext context, Object error,
                              StackTrace? stackTrace) {
                            return Container(
                              color: Colors.grey,
                              child: const Center(
                                child: Icon(Icons.error,
                                    color: Colors.red, size: 50),
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                    IconButton(
                        iconSize: 72,
                        color: Colors.grey[500],
                        onPressed: () async {
                          await _initializeVideo(ref,
                              'XXXXXXXXX.mp4');
                        },
                        icon: const Icon(Icons.play_arrow))
                  ]),
              ],
            ),
            const SizedBox(height: 166),
          ],
        ),
      ),
    );
  }

  // Method to initialize video
  Future<void> _initializeVideo(WidgetRef ref, String url) async {
    final videoController = VideoPlayerController.networkUrl(Uri.parse(url));
    await videoController.initialize();
    await videoController.play();
    ref.read(customVideoStateProvider.notifier).state =
        CustomVideoPlayerController(
            context: ref.context, videoPlayerController: videoController);
  }
}

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Product Details',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductDetail(),
    );
  }
}