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

Question

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

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

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!

Answer 1

              Container(
                alignment: Alignment.center,
                width: 300,
                height: 30,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey,
                      offset: Offset(0, 4),
                      blurRadius: 4,
                    ),
                  ],
                ),
                child: TextFormField(
                  textAlignVertical: TextAlignVertical.center,
                  cursorHeight: 10,
                  style: TextStyle(fontSize: 11),
                  controller: controllers,
                  decoration: const InputDecoration(
                      isCollapsed: true,
                      hintText: "Search your favourite food",
                      hintStyle: TextStyle(fontSize: 11),
                      fillColor: Colors.white,
                      prefixIcon: Icon(Icons.search),
                      suffixIcon: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          VerticalDivider(
                            indent: 2,
                            endIndent: 2,
                          ),
                          Padding(
                            padding: EdgeInsets.only(right: 8.0),
                            child: Icon(Icons.mic),
                          )
                        ],
                      ),
                      isDense: true,
                      border:
                          OutlineInputBorder(borderSide: BorderSide.none)),
                ),
              ),

Answer 2

Please check the implementation i have written a sample code, make changes as per your requirement.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Search field example'),
        ),
        body: Container(
          width: 300,
          height: 50,
          margin: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            color: Colors.white,
            boxShadow: const [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 2.0,
                spreadRadius: 0.0,
                offset: Offset(2.0, 2.0), // shadow direction: bottom right
              )
            ],
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Icon(
                  Icons.search_sharp,
                  color: Colors.redAccent,
                ),
              ),
              const Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'Search',
                    border: OutlineInputBorder(
                      borderSide: BorderSide.none,
                    ),
                  ),
                ),
              ),
              Container(
                width: 1,
                height: 30,
                color: Colors.grey[350],
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: GestureDetector(
                  onTap: () {
                    // function for mic tap implementation
                  },
                  child: const Icon(
                    Icons.mic_none_outlined,
                    color: Colors.redAccent,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

You can wrap the search bar in row and add a Container in the with minimum possible width (i.e: 1) and height as compared to the text of Container such that it leaves equal position both from top and bottom. incase the size of container is 50 take the height as 30