How to have a circle shape like this in flutter?

You can draw almost anything using CustomPaint, take a look:

https://api.flutter.dev/flutter/rendering/CustomPainter-class.html

In the code below, I draw something like that circle:

import "package:flutter/material.dart";void main() {  runApp(MaterialApp(title: "", home: Home()));}class Home extends StatefulWidget {  @override  _HomeState createState() => _HomeState();}class _HomeState extends State<Home> {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(),        body: Container(            width: double.infinity,            height: double.infinity,            child: CustomPaint(              painter: CirclePainter(),            )),      ),    );  }}class CirclePainter extends CustomPainter {  final Paint lightBluePaint = Paint()..color = Color(0xFFbde5fa);  final Paint bluePaint = Paint()..color = Color(0xFF5abef2);  final TextPainter textPainter = TextPainter(    textDirection: TextDirection.ltr,  );  final TextStyle textStyle = TextStyle(      color: Colors.white.withAlpha(240),      fontSize: 18,      letterSpacing: 1.2,      fontWeight: FontWeight.w900);  @override  void paint(Canvas canvas, Size size) {    var rect = Rect.fromLTRB(        -100, size.height - 120, size.width * 0.7, size.height + 250);    final Path circle = Path()..addOval(rect);    final Path smallCircle = Path()..addOval(rect.inflate(50));    canvas.drawPath(smallCircle, lightBluePaint);    canvas.drawPath(circle, bluePaint);    drawText(canvas, size, 'Write now');  }  void drawText(Canvas canvas, Size size, String text) {    textPainter.text = TextSpan(style: textStyle, text: text);    textPainter.layout();    textPainter.paint(canvas, Offset(50, size.height - 60));  }  @override  bool shouldRepaint(CustomPainter oldDelegate) {    return true;  }}

to implement your image preview you need to use Stack Class with Positioned elements. I made a widget as your picture shown. circles in corners can be made with container with border-radius.

  Container(    width: MediaQuery.of(context).size.width,    height: 250,    margin: EdgeInsets.all(20),    decoration: BoxDecoration(      color: Colors.white,      boxShadow: <BoxShadow>[        BoxShadow(          color: Color(0x40000000),          blurRadius: 5.0,          spreadRadius: 0.0,          offset: Offset(0.0, 2.0),        ),      ],    ),    child: Stack(      children: <Widget>[        Container(          padding: EdgeInsets.all(15.0),          child: Column(            crossAxisAlignment: CrossAxisAlignment.start,            children: <Widget>[              Text(                'Step 3',                style: TextStyle(                  color: Colors.blue,                ),              ),              SizedBox(height: 5),              Text(                'It is a long established fact that a reader will be '                  'distracted by the readable content of a page when '                  'looking at its layout.',                style: TextStyle(                  color: Colors.black54,                ),              )            ],          ),        ),        Positioned(          top: 150,          right: MediaQuery.of(context).size.width - 200,          child: Container(            width: 200,            height: 200,            decoration: BoxDecoration(              color: Color(0xFFB5E1F9),              borderRadius: BorderRadius.all(                Radius.circular(200),              ),            ),            child: Center(              child: Container(                width: 150,                height: 150,                decoration: BoxDecoration(                  color: Color(0xFF4FB6F0),                  borderRadius: BorderRadius.all(                    Radius.circular(150),                  ),                ),              ),            ),          ),        ),        Positioned(          bottom: 30,          left: 30,          child: Text(            'Write now',            style: TextStyle(              color: Colors.white,            ),          ),        ),      ],    ),  );