flutter 斜线进度条

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutterapp/line_scale_indicator.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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 {
  int progress = 0;
  Timer timer;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                Container(
                  height: 31,
                  width: 270,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(25.0)),
                      border: Border.all(
                        color: Colors.orange,
                        style: BorderStyle.solid,
                        width: 1,
                      )),
                  child: LineScaleIndicator(
                      lineColor: Colors.orange.withAlpha(99)),
                ),
                Container(
                  height: 31,
                  width: 270,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(25.0)),
                      border: Border.all(
                        color: Colors.orange,
                        style: BorderStyle.solid,
                        width: 1,
                      )),
                  child: LineScaleIndicator(
                      mProgress: progress, lineColor: Colors.orange),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  GestureDetector(
                    onTap: () {
                      startTime();
                    },
                    child: Container(
                        color: Colors.red,
                        padding: EdgeInsets.all(20),
                        child: Text("Start")),
                  ),
                  GestureDetector(
                    onTap: () {
                      timer?.cancel();
                      timer = null;
                    },
                    child: Container(
                        color: Colors.purpleAccent,
                        padding: EdgeInsets.all(20),
                        child: Text("Stop")),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  void startTime() {
    timer?.cancel();
    timer = null;
    progress = 0;
    setState(() {});
    timer = Timer.periodic(Duration(seconds: 1), (t) {
      setState(() {
        progress++;
        print("aaa 1 ${progress}");
      });
      if (progress >= 32) {
        timer?.cancel();
      }
    });
  }

  @override
  void dispose() {
    timer?.cancel();
    timer = null;
    super.dispose();
  }
}

 

 

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutterapp/infinite_progress.dart';

class LineScaleIndicator extends StatefulWidget {
  LineScaleIndicator({
    this.maxLength: 32,
    this.spacing: 4.5,
    this.lineWidth: 4,
    this.lineNum: 32,
    this.lineColor: Colors.orange,
    this.duration: const Duration(milliseconds: 1400),
    this.mProgress,
  });

  final int mProgress;
  final double maxLength;
  final double lineWidth;
  final double spacing;
  final int lineNum;
  final Color lineColor;
  final Duration duration;

  @override
  State createState() => _LineScaleIndicatorState();
}

class _LineScaleIndicatorState extends State {
  @override
  void initState() {
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: measureSize(),
      painter: _LineScaleIndicatorPainter(
        mProgress: widget.mProgress,
        maxLength: widget.maxLength,
        spacing: widget.spacing,
        lineNum: widget.lineNum,
        lineWidth: widget.lineWidth,
        lineColor: widget.lineColor,
      ),
    );
  }

  @override
  Size measureSize() {
    var width = widget.lineNum * widget.lineWidth +
        (widget.lineNum - 1) * widget.spacing;
    return Size(width, widget.maxLength);
  }
}

class _LineScaleIndicatorPainter extends CustomPainter {
  _LineScaleIndicatorPainter({
    this.mProgress,
    this.animationValue,
    this.minLength,
    this.maxLength,
    this.lineWidth,
    this.spacing,
    this.lineNum,
    this.lineColor,
  }) {}

  final double animationValue;
  final double minLength;
  final double maxLength;
  final double lineWidth;
  final double spacing;
  final int lineNum;
  final Color lineColor;
  final int mProgress;

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromLTWH(0, 0, 270, 30);
    RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(30));
    canvas.clipRRect(rRect);
    print("aaa  ${mProgress}");
    var paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.fill
      ..color = lineColor
      ..strokeWidth = 3;
    int size = mProgress ?? lineNum;
    for (int i = 0; i < size; i++) {
      var left = (lineWidth + spacing) * i;
      double dx1 = left + lineWidth;
      double dy1 = -1;
      double dy = maxLength;
      double dx = left - 10;
      canvas.drawLine(
        Offset(dx1, dy1),
        Offset(dx, dy),
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}