Обработка формы от круга до квадрата с помощью флаттера - PullRequest
Новая
       24

Обработка формы от круга до квадрата с помощью флаттера

0 голосов
/ 04 августа 2020
• 1000 CircularProgress

However when i try to change the shape into a Square im stuck on the implementation.

The idea that i have was using custom paths to draw the segments

//SQUARE WITH PATH
    var path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width / size.width, size.height);
    path.lineTo(0, 1);
    canvas.drawPath(path, paint);

however the result is close but no what i needed.SquaredProgress

and currently this is how im implementing the CustomPainter Widget.

import 'dart:math';

import 'package:flutter/widgets.dart';
import 'package:vector_math/vector_math_64.dart' as math;

class RadialPainter extends CustomPainter {
  final double progress;
  final Color color;
  final StrokeCap strokeCap;
  final PaintingStyle paintingStyle;
  //final double initialPercentage;
  //final double totalPercentage;

  RadialPainter(
      {this.progress, this.color, this.strokeCap, this.paintingStyle});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = 10
      ..color = color
      ..style = paintingStyle
      ..strokeCap = strokeCap;

    Offset center = Offset(size.width / 2, size.height / 2);
    double relativeProgress = 360 * progress;

    // Rect rect = new Rect.fromCircle(
    //   center: center,
    //   radius: 80.0,
    // );

    var initialPercentage = 10.0;

    //SQUARE WITH PATH
    var path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width / size.width, size.height);
    path.lineTo(0, 1);
    canvas.drawPath(path, paint);

    //SQUARE WITH RECT
    /*final left = 0.0;
    final top = 0.0;
    final right = size.width;
    final bottom = size.height;
    final rect = Rect.fromLTRB(left, top, right, bottom);
    canvas.drawRect(rect, paint);*/

    //CIRCULAR PROGRESS
    /*canvas.drawArc(
      Rect.fromCircle(center: center, radius: size.width / 2),
      math.radians(-90),
      math.radians(-relativeProgress),
      false,
      paint,
    );*/
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

at the end i need that the squared shape works as a progress indicator, if it's at 90% then it gonna be a segment missing, just like this. DESIRED IMAGE as you can see the square from a 100% completion, it's in a 85% of his entire shape.

if you wanna test the project i have it uploaded to github: GITHUB

Спасибо за вашу помощь.

Пользовательский интерфейс БЫЛ ВДОХНОВЛЕН КТО-ТО ЧТО ДРИББЛ: dribbble

...