Как сделать ар c в флаттере - PullRequest
Новая
       4

Как сделать ар c в флаттере

0 голосов
/ 09 июля 2020

Я хочу работать точно так же, как это изображение с кружками внутри, как я могу это сделать? введите описание изображения здесь

Ответы [ 2 ]

2 голосов
/ 09 июля 2020

образец 

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SO(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),
          child: CustomPaint(
            size: Size(250, 200),
            painter: SOP(
              fillColor: Colors.indigo,
              spreadColor: Colors.indigoAccent,
              spread: 25,
              radius: 100,
            ),
          ),
        ),
      ),
    );
  }
}

class SOP extends CustomPainter {
  final double spread; //the thickness of inner circles
  final Color spreadColor; //the color of inner circles
  final Color fillColor; //the background color
  final double radius; //the radius of inner circles
  final Paint p;

  SOP({
    @required this.spread,
    @required this.spreadColor,
    @required this.fillColor,
    @required this.radius,
  }) : p = Paint()
          ..strokeWidth = spread
          ..style = PaintingStyle.stroke
          ..color = spreadColor;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawColor(fillColor, BlendMode.src);
    canvas.drawCircle(Offset(0, 0), radius, p);
    canvas.drawCircle(Offset(size.width, size.height), radius, p);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
1 голос
/ 09 июля 2020

Вот ваш виджет 

       Center(
        child: Container(
          width: 200,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20.0)),
            gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Color(0xFF9B6EEF), Color(0xFF715ED7)]),
          ),
          child: ClipRect(child: CustomPaint(painter: CirclePainter())),
        ),
      ),

CustomPainter класс для колец внутри 

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.white10
      ..style = PaintingStyle.stroke
      ..strokeWidth = 25;

    canvas.drawCircle(Offset.zero, 60, paint);
    canvas.drawCircle(Offset(size.width, size.height), 60, paint);
  }

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

Результат

введите описание изображения здесь

...