SearchBar Flutter

import 'package:flutter/material.dart';

import 'package:tech_pulse/backend/function.dart';


class searchhh extends StatefulWidget {
  const searchhh({Key? key}) : super(key: key);
  static TextEditingController searchcontroller = TextEditingController(
    text: '',
  );

  @override
  _searchhhState createState() => _searchhhState();
}

class _searchhhState extends State<searchhh> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Container(
            height: 50,
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.only(left: 20),
            decoration: BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.circular(50),
            ),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(width: 10),
                  Expanded(
                    child: TextField(
                      controller: searchhh.searchcontroller,
                      decoration: InputDecoration(
                        hintText: 'Search a Keyword or a Phrase',
                        // hintStyle: GoogleFonts.lato(),
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        InkWell(
          onTap: () {
            FocusScope.of(context).unfocus();
            fetchApi();
          },
          child: Container(
            height: 45,
            width: 45,
            decoration: BoxDecoration(
              color: Colors.grey,
              shape: BoxShape.circle,
            ),
            child: Icon(Icons.search, color: Colors.white),
          ),
        ),
        SizedBox(width: 10),
      ],
    );
  }
}

call searchhh function in homepage(main page).

Now you can use the search controller to search.

eg:

Future<List> fetchApi() async {


  final uri = Uri.https('newsapi.org', '/v2/top-headlines', {
    'country': 'us',
    'category': 'technology',
    'q': searchhh.searchcontroller.text,
    'apiKey': key!,
  });