story page

class StoryPage extends StatefulWidget {
  @override
  _StoryPageState createState() => _StoryPageState();
}

class _StoryPageState extends State<StoryPage> {
  late VideoPlayerController _controller;
  bool _isPlaying = false;
  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: CustomColors.primary,
      appBar: AppBar(
        title: AppBarTitle('Story'),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      extendBodyBehindAppBar: true,
      body: SingleChildScrollView(
        child: _buildItems(),
      ),
      bottomNavigationBar: _isPlaying == true ? pauseButton() : playButton(),
    );
  }

  Widget _buildItems() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 80),
        Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        SizedBox(height: 20),
        _buildLists(),
      ],
    );
  }

  Widget _buildLabel(String label) {
    return Container(
      padding: EdgeInsets.only(left: 20),
      child: Text(
        label,
        style: HeadingTextStyle.heading20,
      ),
    );
  }

  Widget _buildLists() {
    List<Widget> widgetLists = [];

    for (FeedItem feedItem
        in Store.instance.getAppData().storyPageFeed.feedItems) {
      if (feedItem.cardType == CardType_Enum.GROUP_STORY_SLIDER_CARD) {
        GroupStory groupStory = feedItem.groupStory;
        widgetLists.add(_buildLabel(groupStory.title));
        widgetLists.add(SizedBox(height: 20));
        widgetLists.add(_buildMusicSlider(groupStory.stories));
      } else {
        GroupStory groupStory = feedItem.groupStory;
        widgetLists.add(_buildLabel(groupStory.title));
        widgetLists.add(SizedBox(height: 5));
        widgetLists.add(_buildMusicGrid(groupStory.stories));
      }
      widgetLists.add(SizedBox(height: 10));
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: widgetLists,
    );
  }

  Widget _buildMusicGrid(List<Story> stories) {
    List<GridItem> items = [];

    for (Story story in stories) {
      GridItem item = GridItem(
        GridItemType.STORY,
        story: story,
      );
      items.add(item);
    }

    GridContainerData data = GridContainerData(items);

    return GridContainer(data, crossAxisCount: 2);
  }

  Widget _buildMusicSlider(List<Story> stories) {
    List<ListItem> items = [];

    for (Story story in stories) {
      ListItem item = ListItem(
        itemType: ListItemType.STORY,
        story: story,
      );
      items.add(item);
    }

    ListContainerData data = ListContainerData(items);

    return Container(
      padding: EdgeInsets.only(left: 20),
      height: 140,
      child: ListContainer(data: data),
    );
  }

  final Widget backgroundPicture = Container(
    width: double.infinity,
    height: 322,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/images/bg-3.png'),
        fit: BoxFit.cover,
      ),
    ),
  );

  /// FOR DEMO ONLY
  Widget playButton() {
    return IconButton(
      onPressed: () {
        audioHandler.play();
        setState(() {
          _controller.play();
          _isPlaying = true;
        });
      },
      icon: Icon(Icons.play_arrow),
    );
  }

  Widget pauseButton() {
    return IconButton(
      onPressed: () {
        audioHandler.pause();
        setState(() {
          _controller.pause();
          _isPlaying = false;
        });
      },
      icon: Icon(Icons.pause),
    );
  }
}