Making a search bar in Flutter

Question

I made a search bar that looks like this

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?

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.

Can any one help me with that https://stackoverflow.com/questions/72123885/how-to-make-search-bar-to-search-a-song-and-play-it-flutter — montaser mohamed, May 06 '22 at 06:14

score 4 · Accepted Answer · answered Mar 27 '22 at 04:20

4

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,
)

answered Mar 27 '22 at 04:20

Zakaria Hossain

2,188
2
13
24

1

I'll try it and will let you know if it works – presudeous Mar 27 '22 at 07:18
1

Ofcourse, let me know what happend. – Zakaria Hossain Mar 27 '22 at 07:33
i marked it thank you for your help – presudeous Mar 27 '22 at 11:49

Making a search bar in Flutter

1 Answers1