颤振中的自定义形状（带有弯曲边缘）

Question

Hello am trying to achieve this UI in flutter

Expected output

Output what am getting now

How to make that curve before LTE and ZTL. How to position widgets in flutter when using stack other than the positioned widget?

The code for what I have done so far.

import 'package:flutter/material.dart';

class NavHome extends StatelessWidget {
  const NavHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height * 0.023,
        ),
        Stack(children: [
          Container(
              height: MediaQuery.of(context).size.height * 0.35,
              width: MediaQuery.of(context).size.width * 0.90,
              decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5), //color of shadow
                      spreadRadius: 2, //spread radius
                      blurRadius: 3, // blur radius
                      offset: const Offset(0, 0),
                    ),
                  ],
                  color: const Color(0xff0C2242),
                  borderRadius: BorderRadius.circular(17))),
          Container(
              height: MediaQuery.of(context).size.height * 0.27,
              width: MediaQuery.of(context).size.width * 0.90,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(17))),
          Positioned(
            top: MediaQuery.of(context).size.height * 0.27,
            left: MediaQuery.of(context).size.height * 0.15,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.08,
              width: MediaQuery.of(context).size.width * 0.30,
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(17),
                      bottomRight: Radius.circular(17))),
            ),
          )
        ])
      ],
    );
  }
}

Answer 1

I'm not sure that the original UI will be achieved. So, here is the suggestion below the graph create a Row widget and add three widgets of card then try changing the border shape based on your shape

Answer 2

you should use CustomClipper . read the documentation https://api.flutter.dev/flutter/rendering/CustomClipper-class.html