How to draw a shape like this

Question

I want to draw something like image below but I have no clue how to do this:( I think I should use paint method to draw this.

using row and creating 2 container with decoration and circle shape(using box decoration and borderRadius) but I do Not know how to handle center shape between circles .

Answer 1

You can use CustomPainter. The code will be two circles with a line between them, and a Plus/Minus text within the cirlces.

Result

Example

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CircleShapeWidget(),
        ),
      ),
    );
  }
}



class CircleShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Color(0xff3D3C3B)
      ..strokeWidth = 5
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(115, 100), 50, paint); // first circle
    canvas.drawCircle(Offset(230, 100), 50, paint); // second circle

    canvas.drawLine(Offset(140, 100), Offset(180, 100), paint); // line between circles

    // Draw "-" text in the first circle
    _drawText(canvas, "-", Offset(120, 100));

    // Draw "+" text in the second circle
    _drawText(canvas, "+", Offset(230, 100));
  }

  void _drawText(Canvas canvas, String text, Offset offset) {
    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 40,
      fontWeight: FontWeight.bold,
    );
    final textPainter = TextPainter(
      text: TextSpan(text: text, style: textStyle),
      textDirection: TextDirection.ltr,
    );

    textPainter.layout(minWidth: 0, maxWidth: double.infinity);
    final offsetCentered = Offset(
      offset.dx - (textPainter.width / 2),
      offset.dy - (textPainter.height / 2),
    );
    textPainter.paint(canvas, offsetCentered);
  }

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

class CircleShapeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: CircleShapePainter(),
      size: Size(200, 200),
    );
  }
}

Helpful resources

• Custom painting in Flutter

• Flutter Tutorial - Custom Paint - Draw Line, Square, Rect, Circle, Triangle, Arc & Image