CODEWITHSUNDEEP
flutterdartuser-interfaceuisearchbardelegate
presudeous
presudeous

Reputation: 49

Making a search bar in Flutter

I made a search bar that looks like this

image

here's the full code

import 'package:flutter/material.dart';

    class SearchInput extends StatefulWidget {
      @override
      State<SearchInput> createState() => _SearchInputState();
    }
    
    class _SearchInputState extends State<SearchInput> {
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.only(top: 25, left: 25, right: 25),
          child: Column(
            children: [
              Row(
                children: [
                  Flexible(
                    flex: 1,
                    child: TextField(
                      cursorColor: Colors.grey,
                      decoration: InputDecoration(
                        fillColor: Colors.white,
                        filled: true,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide.none
                        ),
                        hintText: 'Search',
                        hintStyle: TextStyle(
                          color: Colors.grey,
                          fontSize: 18
                        ),
                        prefixIcon: Container(
                          padding: EdgeInsets.all(15),
                          child: Image.asset('assets/icons/search.png'),
                          width: 18,
                        )
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only (left: 10),
                    padding: EdgeInsets.all(15),
                    decoration: BoxDecoration(
                      color: Theme.of(context).primaryColor,
                      borderRadius: BorderRadius.circular(15)
                    ),
                    child: Image.asset(
                    'assets/icons/filter.png'),
                    width: 25
                  ),
                ],
              )
            ],
          ),
        );
      }
    }

I don't know how to explain it specifically, Can i somehow code it when i press the search box leads to another new page for example this?

enter image description here

Or is there another way to make it happen? And please explain it step by step on how to do it if it's possible.

Upvotes: 3

Views: 20849

Answers (1)

Zakaria Hossain
Zakaria Hossain

Reputation: 2504

Try to use readOnly: true and override onTap method to go next search screen

TextField(
   readOnly: true,  
   onTap: () {
      //Go to the next screen
   },
   cursorColor: Colors.grey,
)

Upvotes: 5

Related Questions