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.

Answer 1

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