Wanted to replicate some UI. Can I do this with in built flutter widgets? I have tried using Chip but was not able to. Will CustomPainter be the right thing to use ?
I made TestPage
, Put it in your app and see the results. Change the Width to keep the shape intact. It's static to three items in the middle and one icon on the left.
If you want to make it dynamic you have to modify the shape in various ways and need optimization
import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
double width = 300;
return Center(
child: SizedBox(
width: width,
height: width * 0.2442,
child: CustomPaint(painter: CustomShape())),
);
}
}
class CustomShape extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Path path_0 = Path();
path_0.moveTo(size.width * 0.8778848, 0);
path_0.lineTo(size.width * 0.4401651, 0);
path_0.arcToPoint(Offset(size.width * 0.3433113, size.height * 0.1957085),
radius:
Radius.elliptical(size.width * 0.1218096, size.height * 0.4987930),
rotation: 0,
largeArc: false,
clockwise: false);
path_0.lineTo(size.width * 0.3433113, size.height * 0.1957085);
path_0.lineTo(size.width * 0.3109976, size.height * 0.3582477);
path_0.cubicTo(
size.width * 0.2960634,
size.height * 0.4332588,
size.width * 0.2690989,
size.height * 0.4360304,
size.width * 0.2538154,
size.height * 0.3555655);
path_0.arcToPoint(Offset(size.width * 0.2030523, size.height * 0.1251676),
radius:
Radius.elliptical(size.width * 0.2818497, size.height * 1.154135),
rotation: 0,
largeArc: false,
clockwise: false);
path_0.arcToPoint(Offset(size.width * 0.1860221, size.height * 0.07393831),
radius:
Radius.elliptical(size.width * 0.1240584, size.height * 0.5080018),
rotation: 0,
largeArc: false,
clockwise: false);
path_0.lineTo(size.width * 0.1858475, size.height * 0.07393831);
path_0.lineTo(size.width * 0.1858475, size.height * 0.07393831);
path_0.arcToPoint(Offset(size.width * 0.1221152, size.height),
radius:
Radius.elliptical(size.width * 0.1221152, size.height * 0.5000447),
rotation: 0,
largeArc: true,
clockwise: false);
path_0.arcToPoint(Offset(size.width * 0.1858475, size.height * 0.9265087),
radius:
Radius.elliptical(size.width * 0.1213292, size.height * 0.4968261),
rotation: 0,
largeArc: false,
clockwise: false);
path_0.lineTo(size.width * 0.1858475, size.height * 0.9265087);
path_0.cubicTo(
size.width * 0.2068950,
size.height * 0.8824318,
size.width * 0.2298203,
size.height * 0.7975861,
size.width * 0.2549071,
size.height * 0.6654448);
path_0.cubicTo(
size.width * 0.2707364,
size.height * 0.5833706,
size.width * 0.2936617,
size.height * 0.5869468,
size.width * 0.3087269,
size.height * 0.6526598);
path_0.lineTo(size.width * 0.3433113, size.height * 0.8046491);
path_0.lineTo(size.width * 0.3433113, size.height * 0.8046491);
path_0.arcToPoint(Offset(size.width * 0.4401651, size.height * 1.000268),
radius:
Radius.elliptical(size.width * 0.1218532, size.height * 0.4989718),
rotation: 0,
largeArc: false,
clockwise: false);
path_0.lineTo(size.width * 0.8778848, size.height * 1);
path_0.arcToPoint(Offset(size.width * 0.9999782, size.height * 0.5000447),
radius:
Radius.elliptical(size.width * 0.1220934, size.height * 0.4999553),
rotation: 0,
largeArc: false,
clockwise: false);
path_0.lineTo(size.width * 1, size.height * 0.5000447);
path_0.arcToPoint(Offset(size.width * 0.8778848, 0),
radius:
Radius.elliptical(size.width * 0.1221152, size.height * 0.5000447),
rotation: 0,
largeArc: false,
clockwise: false);
path_0.close();
Paint paint_0_fill = Paint()..style = PaintingStyle.fill;
paint_0_fill.color = Colors.grey[500]!;
canvas.drawPath(path_0, paint_0_fill);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}