flutter|flutter 斜线进度条 flutter|paint

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(); } }

【flutter|flutter 斜线进度条】

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; }