Custom Painter Example

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  double progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
         CustomPaint(
           size: Size(600,300),
           painter: MyPainter(progress),
         ),

          Padding(
            padding: const EdgeInsets.only(top: 24),
            child: Slider(
              value: progress, onChanged: (val) {
              setState(() {
                progress = val;
              });
            }),
          )
        ],
      ),
    )
    );
  }
}


class MyPainter extends CustomPainter{
  final double progress;

  MyPainter(this.progress);
  
  @override
  void paint(Canvas canvas, Size size) {
    // create and style your paint
    final paint = Paint()..color = Colors.indigo;
    
    
    final xOffset = progress * size.width;
    canvas.drawCircle(Offset(xOffset,20), 24, paint);
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }

}