Flutter- 实现 Instagram 等视频功能的最佳小部件

Question

I want to implement feature like Instagram story. I was wondering what widget comes into play in this situation. What I was thinking is horizontal list view or dismissible. But since each video has to be initialized before playing and I want go to next video or go back to previous video and play it as quick as possible. So, I want to ask what is the possibly best way to do this. Can someone please share your thoughts? Any help is highly appreciated!

Answer 1

When I started learning flutter, the first app I wrote was this one . The step-by-step of how to create this app is in the flutter website.

This app use the english_words package to generate random Startup names. There's a logic in the middle of the code that load the rest of content when certain quantity of lines is processed.

  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      // The itemBuilder callback is called once per suggested word pairing,
      // and places each suggestion into a ListTile row.
      // For even rows, the function adds a ListTile row for the word pairing.
      // For odd rows, the function adds a Divider widget to visually
      // separate the entries. Note that the divider may be difficult
      // to see on smaller devices.
      itemBuilder: (context, i) {
        // Add a one-pixel-high divider widget before each row in theListView.
        if (i.isOdd) return Divider();

        // The syntax "i ~/ 2" divides i by 2 and returns an integer result.
        // For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
        // This calculates the actual number of word pairings in the ListView,
        // minus the divider widgets.
        final index = i ~/ 2;
        // If you've reached the end of the available word pairings...
        if (index >= _suggestions.length) {
          // ...then generate 10 more and add them to the suggestions list.
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

It will make the app generate new lines when the user get to end of list. You could maybe take a look at this how-to. You could implement the logic for play/stop video on that part of code.