How do create a splitting container in flutter? What should be the right approach? CustomPainter or Chip?

Question

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 ?

Answer 1

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