How to have a circle shape like this in flutter? - user-interface

Question

I am trying to have a circle shape like this in my flutter project. I tried using border-radius in a container. But it didn't work as I expected.
So, how can I have a shape like this given picture?
I tried using a container like this.
Container(
height: 72,
width: 211,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(30))
),
)

Answer 1

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;
}
}

Answer 2

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,
),
),
),
],
),
);