Question 243143 in Flutter Question posted in
The official Flutter documentation can be found here.

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!

Tags:

3

Answers


  1. 0

    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,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

    enter image description here

    Login or Signup to reply.
  2. 0 
                  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)),
                ),
              ),
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search