Flutter – How to only display the ListView when taping on the TextField

First off, I’d like to mention that you’d probably want to use a SearchDelegate instead – as it can suggest the results for completion.

You can use a FocusNode to listen to changes. it detects when the TextField does/desn’t have focus.

At your State class, create 3 variables:

class _MySearchBarState extends State<MySearchBar> {
  final myController = TextEditingController();
  final _focusNode = FocusNode();
  var _isSearching = false;

Then, create an initState method:

 @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      setState(() {
        _isSearching = _focusNode.hasFocus;
      });
    });
  }

And in your listview.builder:

Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white70),
                    child: _isSearching
                        ? ListView.builder(
                            itemCount: display_list.length,
                            itemBuilder: (context, index) {
                              return Text(
                                'test',
                                style: TextStyle(color: Colors.black),
                              );
                              return ListTile(
                                contentPadding: const EdgeInsets.all(8),
                                title: Text(display_list[index].restaurantName),
                                leading: Image(
                                  image: AssetImage(display_list[index].img),
                                  fit: BoxFit.cover,
                                  height: 50,
                                  width: 50,
                                ),
                                trailing: const Icon(Icons.add),
                              );
                            },
                          )
                        : Container(),
                  )

Complete runnable snippet:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: MySearchBar(),
      ),
    );
  }
}

class MySearchBar extends StatefulWidget {
  const MySearchBar({super.key});

  @override
  State<MySearchBar> createState() => _MySearchBarState();
}

class _MySearchBarState extends State<MySearchBar> {
  final myController = TextEditingController();
  final _focusNode = FocusNode();
  var _isSearching = false;
  static List<RestaurantProfiles> searchList = [
    RestaurantProfiles('test', 'assets/images/restaurant1.jpg'),
  ];

  List<RestaurantProfiles> display_list = List.from(searchList);

  // this is the function that will update the suggestion list while searching
  void searchUpdate(String value) {
    setState(() {
      display_list = searchList
          .where((element) => element.restaurantName
              .toLowerCase()
              .contains(value.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(40),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            height: 20,
          ),
          TextField(
            focusNode: _focusNode,
            onChanged: (value) => searchUpdate(value),
            style: const TextStyle(
              color: Colors.black,
            ),
            decoration: InputDecoration(
              filled: true,
              fillColor: Colors.white,
              isDense: true,
              contentPadding: const EdgeInsets.all(10),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: BorderSide.none,
              ),
              hintText: "Add Restaurants",
              hintStyle: const TextStyle(
                color: Colors.black26,
              ),
              prefixIcon: const Icon(Icons.search),
              prefixIconColor: Colors.black,
            ),
          ),
          const SizedBox(
            height: 5,
          ),
          Expanded(
            child: display_list.isEmpty
                ? const Center(
                    child: Text(
                      "oops... No Results Found!",
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                  )
                : Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white70),
                    child: _isSearching
                        ? ListView.builder(
                            itemCount: display_list.length,
                            itemBuilder: (context, index) {
                              return Text(
                                'test',
                                style: TextStyle(color: Colors.black),
                              );
                              return ListTile(
                                contentPadding: const EdgeInsets.all(8),
                                title: Text(display_list[index].restaurantName),
                                leading: Image(
                                  image: AssetImage(display_list[index].img),
                                  fit: BoxFit.cover,
                                  height: 50,
                                  width: 50,
                                ),
                                trailing: const Icon(Icons.add),
                              );
                            },
                          )
                        : Container(),
                  ),
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      setState(() {
        _isSearching = _focusNode.hasFocus;
      });
    });
  }
}

class RestaurantProfiles {
  final String restaurantName;
  final String img;

  RestaurantProfiles(this.restaurantName, this.img);
}

Relatable

• How to show/hide widgets programmatically in Flutter