How to sequentially iterate through object values of a Map in Flutter and to return each value one by one as you iterate?

Question

  Map<String, VideoPlayerController> controllers = {
    'one${1 + 1}': VideoPlayerController.asset('assets/videos/6.mp4'),
    'one${1 + 2}': VideoPlayerController.asset('assets/videos/2.mp4'),
    'one${1 + 3}': VideoPlayerController.asset('assets/videos/3.mp4'),
    'one${1 + 4}': VideoPlayerController.asset('assets/videos/4.mp4'),
    'one${1 + 6}': VideoPlayerController.asset('assets/videos/1.mp4'),
    'one${1 + 7}': VideoPlayerController.asset('assets/videos/7.mp4'),
    'one${1 + 8}': VideoPlayerController.asset('assets/videos/8.mp4'),
  };

  controllerLooper3() {
    for (value in controllers.values) {
      return value;
    }
  }

I am trying to iterate and return each value of the Map/to access each value sequentially. However, when I try to loop and return the value I am only getting the first value of the object. How do I do it so that it loops through the the value data but without changing that data into a string type.That is each objects value is maintained without changing its raw make up. That is I do not want to print it I just want a mechanism that is accessing the values sequentially one by one and returning each value one by one as it iterates.

Answer 1

The below is a demo using the video player plugin. Instead of a Map, per Remi's recommendation in the comments to your question above, I created a basic video model with title and controller properties and added them to a List. It's much easier to use a List (with proper models) if you're looking to make a YouTube-like feed (most likely using a ListView or CustomScrollView). Ensure your pubspec.yaml is updated with your video assets (and change the below filenames), and the example should work for you. The listeners below will print when the video is initialized and the duration.

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Video Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Video Player Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<VideoModel> _controllers = [];

  @override
  void initState() {
    super.initState();

    _controllers = [
      VideoModel(
          title: 'Alpha',
          controller: VideoPlayerController.asset('assets/videos/small.mp4')),
      VideoModel(
          title: 'Beta',
          controller: VideoPlayerController.asset('assets/videos/small.mp4')),
      VideoModel(
          title: 'Gamma',
          controller: VideoPlayerController.asset('assets/videos/small.mp4')),
    ];
    _controllerLooper();
  }

  _controllerLooper() {
    for (VideoModel video in _controllers) {
      final listener = () {
        if (video.controller.value.initialized) {
          print('${video.title} - video initialized');
        }
        print('${video.title} duration: ${video.controller.value.position}');
      };
      video.controller
        ..addListener(listener)
        ..setVolume(1.0)
        ..setLooping(true)
        ..initialize();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: _controllers.length,
          itemBuilder: (context, index) {
            final controller = _controllers[index].controller;
            return GestureDetector(
              onTap: () {
                if (controller.value.isPlaying) {
                  controller.pause();
                } else if (!controller.value.isPlaying) {
                  controller.play();
                }
              },
              child: AspectRatio(
                aspectRatio: 16.0 / 9.0,
                child: VideoPlayer(_controllers[index].controller),
              ),
            );
          }),
    );
  }
}

class VideoModel {
  VideoModel({this.title, this.controller});

  final String title;
  final VideoPlayerController controller;
}