Flutter i want to display the data after searching

Question

listview Good day do you have an idea on how to make a search bar that do not show first the list view when no one searching my data is from mysql sorry new at flutter

 @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('New Transaction'),
              backgroundColor: Color(0xff083663),
            ),
            body: RefreshIndicator(
              onRefresh: fetchNotes,
              key: _refresh,
              child: loading
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : ListView.builder(
                      itemBuilder: (context, i) {
                        return i == 0 ? _searchBar() : _listItem(i - 1);
                      },
                      itemCount: _notesForDisplay.length + 1,
                    ),
            ));
      }

This is my search bar where the user will input his/her search

 _searchBar() {
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Card(
        child: ListTile(
          leading: Icon(Icons.search),
          title: TextField(
            decoration:
                InputDecoration(hintText: "Search", border: InputBorder.none),
            onChanged: (text) {
              text = text.toLowerCase();
              setState(() {
                _notesForDisplay = _notes.where((note) {
                  var noTitle = note.vesselname.toLowerCase();
                  return noTitle.contains(text);
                }).toList();
              });
            },
          ),
        ),
      ),
    );
  }

this is the list view for my search i want this to show after the user inputted a value in the search bar

  _listItem(i) {
    final x = _notesForDisplay[i];
    return Container(
      padding: EdgeInsets.all(20.0),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Vessel Name:\t' + x.vesselname,
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
                ),
                Text('Voyage #:\t' + x.voyageno,
                    style: TextStyle(fontSize: 18.0)),
                Text('Ship Call #:\t' + x.scn,
                    style: TextStyle(fontSize: 18.0)),
                Divider()
              ],
            ),
          ),
          IconButton(
              icon: Icon(
                Icons.add_circle_outline,
                size: 30.0,
              ),
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => Transaction(x)));
              }),
        ],
      ),
    );
  }
}

Answer 1

Define a bool variable that indicate the visibility state of the list view:

bool _isListViewVisible = false;

Add it to the setState code block:

setState(() {
     _isListViewVisible = true; //Or you can check the text length 
     _notesForDisplay = _notes.where((note) {
     var noTitle = note.vesselname.toLowerCase();
     return noTitle.contains(text);
       }).toList();
  });

Then put the list in a visibility widget:

return Visibility(
   visible: _isListViewVisible,
     child: Container(
       padding: EdgeInsets.all(20.0),
         child: Row(
         children: <Widget>[
            ....
    ],
  ),
));