main.dart

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

main() => runApp(MaterialApp(home: MyHomePage()));

const int _DefaultDashes = 20;
const Color _DefaultColor = Color(0);
const double _DefaultGapSize = 3.0;
const double _DefaultStrokeWidth = 2.5;

class DashedCircle extends StatelessWidget {
  final int dashes;
  final Color color;
  final double gapSize;
  final double strokeWidth;
  final Widget child;

  DashedCircle(
      {this.child,
      this.dashes = _DefaultDashes,
      this.color = _DefaultColor,
      this.gapSize = _DefaultGapSize,
      this.strokeWidth = _DefaultStrokeWidth});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: DashedCirclePainter(
        dashes: dashes,
        color: color,
        gapSize: gapSize,
        strokeWidth: strokeWidth,
      ),
      child: child,
    );
  }
}

class DashedCirclePainter extends CustomPainter {
  final int dashes;
  final Color color;
  final double gapSize;
  final double strokeWidth;

  DashedCirclePainter(
      {this.dashes = _DefaultDashes,
      this.color = _DefaultColor,
      this.gapSize = _DefaultGapSize,
      this.strokeWidth = _DefaultStrokeWidth});

  @override
  void paint(Canvas canvas, Size size) {
    final double gap = pi / 180 * gapSize;
    final double singleAngle = (pi * 2) / dashes;

    for (int i = 0; i < dashes; i++) {
      final Paint paint = Paint()
        ..color = color
        ..strokeWidth = strokeWidth
        ..style = PaintingStyle.stroke;

      canvas.drawArc(
          Offset.zero & size, gap + singleAngle * i, singleAngle - gap * 2, false, paint);
    }
  }

  @override
  bool shouldRepaint(DashedCirclePainter oldDelegate) {
    return dashes != oldDelegate.dashes || color != oldDelegate.color;
  }
}

final storyRadius = 32.0;

class UserStoryWidget extends StatelessWidget {
  final String url;

  const UserStoryWidget(this.url);

  @override
  Widget build(BuildContext context) {
    return DashedCircle(
      child: Padding(
        padding: EdgeInsets.all(3.0),
        child: CircleAvatar(
          radius: storyRadius,
          backgroundColor: Colors.grey,
          backgroundImage: NetworkImage(url),
        ),
      ),
      dashes: 40,
      gapSize: 2,
      strokeWidth: 2.0,
      color: Colors.green,
    );
  }
}

List<String> users = [
  "https://img.techpowerup.org/201029/user1.png",
  "https://img.techpowerup.org/201029/user2.png",
  "https://img.techpowerup.org/201029/user3.png",
  "https://img.techpowerup.org/201029/user4.png",
  "https://img.techpowerup.org/201029/user1.png",
  "https://img.techpowerup.org/201029/user2.png",
  "https://img.techpowerup.org/201029/user3.png",
  "https://img.techpowerup.org/201029/user4.png",
  "https://img.techpowerup.org/201029/user1.png",
  "https://img.techpowerup.org/201029/user2.png",
  "https://img.techpowerup.org/201029/user3.png",
  "https://img.techpowerup.org/201029/user4.png",
    "https://img.techpowerup.org/201029/user1.png",
  "https://img.techpowerup.org/201029/user2.png",
  "https://img.techpowerup.org/201029/user3.png",
  "https://img.techpowerup.org/201029/user4.png",
  "https://img.techpowerup.org/201029/user1.png",
  "https://img.techpowerup.org/201029/user2.png",
  "https://img.techpowerup.org/201029/user3.png",
  "https://img.techpowerup.org/201029/user4.png",
  "https://img.techpowerup.org/201029/user1.png",
  "https://img.techpowerup.org/201029/user2.png",
  "https://img.techpowerup.org/201029/user3.png",
  "https://img.techpowerup.org/201029/user4.png",
  "https://img.techpowerup.org/201029/user1.png",
  "https://img.techpowerup.org/201029/user2.png",
  "https://img.techpowerup.org/201029/user3.png",
  "https://img.techpowerup.org/201029/user4.png",
];

class StoriesSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80,
      child: ListView.builder(
        itemCount: users.length + 1,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, i) {
          Widget widget;
          if (i == 0) {
            widget = Container(
              width: storyRadius * 2,
              height: storyRadius * 2,
              padding: EdgeInsets.all(20),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Color(0xFF0B0A0A),
              ),
              child: Image.network('https://img.techpowerup.org/201029/addstory.png'),
            );
          } else {
            widget = UserStoryWidget(users[i - 1]);
          }

          return Padding(
            padding: EdgeInsets.symmetric(horizontal: 8),
            child: Center(child: widget),
          );
        },
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 4 Fun'),
      ),
      body: Center(child: StoriesSection()),
    );
  }
}