flutterui-design

How can I design search field like zomato app in Flutter?

I'm working on recreating a design similar to the corner radius used in the Zomato app. Despite my best efforts, I haven't been able to replicate the exact design. Below, I've included images for reference.

Zomato's design

enter image description here

I'm looking for guidance on achieving the same corner radius effect in my project. I've attempted several approaches, but none have matched the desired design.

Mine design

enter image description here

If anyone has experience or insights into replicating this specific design element, please share your knowledge. I would greatly appreciate any assistance, code examples, or suggestions to help me achieve this design.

Thank you in advance for your help!

Solution

  • After lots of research,

    I have found this figma_squircle package which helps to create exact same design which looks like zomato's view.

    Designed view using figma_squircle

    enter image description here

    Sample code snippets:

                Container(
              margin: EdgeInsets.all(8),
              height: 150,
              width: double.infinity,
              decoration: ShapeDecoration(
                color: Colors.white,
                shape: SmoothRectangleBorder(
                  borderRadius: SmoothBorderRadius(
                    cornerRadius: 15,
                    cornerSmoothing: 1,
                  ),
                ),
              ),
              child: ...
              ),