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