Nilen Patel Inc.

Tutorial and code of Amazing Story View in Flutter. Copy and paste the below code as per your requirements.

story_view: ^0.13.2

import 'package:flutter/material.dart';
import 'package:story_view/story_view.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Story View',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Home());
  }
}

class Home extends StatelessWidget {
  final StoryController controller = StoryController();

  Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text("Story View"),),
      ),
      body: Container(
        margin: const EdgeInsets.all(
          8,
        ),
        child: ListView(
          children: <Widget>[
            SizedBox(
              height: 300,
              child: StoryView(
                controller: controller,
                storyItems: [
                  StoryItem.text(
                    title:
                    "Hello there!\nHave a look at some great design. \n\nTap!",
                    backgroundColor: Colors.orange,
                    roundedTop: true,
                  ),
                  StoryItem.inlineImage(
                    url:
                    "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/268794272_299440832107118_408863640682183643_n.jpg?stp=dst-jpg_e35_s1080x1080&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=-1XSvaV_3a4AX8pu5on&edm=ALQROFkBAAAA&ccb=7-4&ig_cache_key=MjczMDEyNDAyMjYxMTQxNTY0OQ%3D%3D.2-ccb7-4&oh=00_AT_OUC-dQW_kqODAcG-D6wRB4XIkcx7BFWMq7ELeWFIUZA&oe=6247FD79&_nc_sid=30a2ef",
                    controller: controller,
                    caption: const Text(
                      "This is content.",
                      style: TextStyle(
                        color: Colors.white,
                        backgroundColor: Colors.black54,
                        fontSize: 17,
                      ),
                    ),
                  ),
                  StoryItem.inlineImage(
                    url:
                    "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/105947630_1439229316275118_7379310549518040610_n.jpg?stp=c180.0.1080.1080a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=rO1tJ20TTO4AX9ndcsZ&edm=APU89FABAAAA&ccb=7-4&oh=00_AT_a7cctAyAUzhF59txZA_p4sQQnlWoxHF7kv7DO64zu8g&oe=62472B3A&_nc_sid=86f79a",
                    controller: controller,
                    caption: const Text(
                      "This is content.",
                      style: TextStyle(
                        color: Colors.white,
                        backgroundColor: Colors.black54,
                        fontSize: 17,
                      ),
                    ),
                  )
                ],
                onStoryShow: (s) {
                  print("Showing a story");
                },
                onComplete: () {
                  print("Completed a cycle");
                },
                progressPosition: ProgressPosition.bottom,
                repeat: false,
                inline: true,
              ),
            ),
            Material(
              child: InkWell(
                onTap: () {
                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => MoreStories()));
                },
                child: Container(
                  decoration: const BoxDecoration(
                      color: Colors.black54,
                      borderRadius:
                      BorderRadius.vertical(bottom: Radius.circular(8))),
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const <Widget>[
                       Icon(
                        Icons.arrow_forward,
                        color: Colors.white,
                      ),
                       SizedBox(
                        width: 16,
                      ),
                       Text(
                        "View more stories",
                        style:  TextStyle(fontSize: 16, color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MoreStories extends StatefulWidget {
  @override
  _MoreStoriesState createState() => _MoreStoriesState();
}

class _MoreStoriesState extends State<MoreStories> {
  final storyController = StoryController();

  @override
  void dispose() {
    storyController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("More"),
      ),
      body: StoryView(
        storyItems: [
          StoryItem.text(
            title: "That's great.",
            backgroundColor: Colors.blue,
          ),
          StoryItem.text(
            title: "Nice!\n\nTap to continue.",
            backgroundColor: Colors.red,
            textStyle: const TextStyle(
              fontFamily: 'Dancing',
              fontSize: 40,
            ),
          ),
          StoryItem.pageImage(
            url:
            "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/60459163_112902099957867_5690124356666344359_n.jpg?stp=c0.117.937.937a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=103&_nc_ohc=8Jnr-EcqJT4AX_NI2eq&tn=Fasqrroe6u0sIt4E&edm=APU89FABAAAA&ccb=7-4&oh=00_AT_30fiMb7pQkvJ32kSkThxRmGsLEXWv7e7umByA8WfAYw&oe=624649F3&_nc_sid=86f79a",
            caption: "Caption 1",
            controller: storyController,
          ),
          StoryItem.pageImage(
              url: "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/64559893_2278926268822350_2656192327406265407_n.jpg?stp=c0.115.921.921a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=106&_nc_ohc=MYpda15x7rQAX-MG3hV&edm=APU89FABAAAA&ccb=7-4&oh=00_AT_OXnGpRl8uHYnFRQW3602l4Xz_uZHkkMJ-KxCr25x3TA&oe=62466937&_nc_sid=86f79a",
              caption: "Caption 2",
              controller: storyController),
          StoryItem.pageImage(
            url: "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/95720876_250476222990462_5275750181710461715_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=106&_nc_ohc=zu3hholhmNEAX-P-fsD&edm=APU89FABAAAA&ccb=7-4&oh=00_AT9dfF1MJuRTzrP6dMf1sUO3AFNtNTgcHXBMke1GCFMlUA&oe=6247423E&_nc_sid=86f79a",
            caption: "Caption 3",
            controller: storyController,
          ),
          StoryItem.pageImage(
            url: "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/120747101_181994376729586_1028673492314050184_n.jpg?stp=dst-jpg_e35&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=zSGZ9HEUpWoAX-RhnOu&tn=Fasqrroe6u0sIt4E&edm=ALQROFkBAAAA&ccb=7-4&ig_cache_key=MjQxMjYwMDQwODk4NDk0NDAzNw%3D%3D.2-ccb7-4&oh=00_AT_nxYAM19R-tJtI1I7DwGLmrQKKR331NuqT9uus5AbVnw&oe=62474D6B&_nc_sid=30a2ef",
            caption: "Caption 4",
            controller: storyController,
          ),
        ],
        onStoryShow: (s) {
          print("Showing a story");
        },
        onComplete: () {
          print("Completed a cycle");
        },
        progressPosition: ProgressPosition.top,
        repeat: false,
        controller: storyController,
      ),
    );
  }
}