Question 224349 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to draw a shape like this

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
.

Image:

Tags:

2

Answers


  1. 0

    You can try using this tool. You can generate Flutter CustomPainter code from SVG. You can convert this image to SVG and paste the SVG code in this website. It will give you the code! I hope this will help you. If you have any issues in this process, you can ask.

    Login or Signup to reply.
  2. 0

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

    Result

    enter image description here

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search