Flutter singlechildscrollview fixed TextField

Question

How Can I keep the text field fixed? Currently when I am scrolling to top its also going with the list. I need to keep it fixed.

Widget build(BuildContext context) { final localStorage = GetStorage();

return Scaffold(
  appBar: HomePageAppBar(),
  drawer: HomePageNavigationDrawer(localStorage),
  body: SingleChildScrollView(
    child: Column(
      children: [
        TextField(
          onChanged: (value) => _runFilter(value),
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 10.0,horizontal: 10.0),
            hintText: "Search",
            suffixIcon: const Icon(Icons.search),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20.0),
              borderSide: const BorderSide(),
            ),
          ),
        ),
        ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: _allUsers.length,
          itemBuilder: (context, index) => Card(
            elevation: 1,
            margin: const EdgeInsets.symmetric(vertical: 2),
            child: ListTile(
              title: Text(_allUsers[index]['name']),
              subtitle: Text('${_allUsers[index]["generic"]}'),
            ),
          ),
        ),
      ],
    ),
  ),
  bottomNavigationBar: const HomePageBottomNavigation(),
);

}

Answer 1

you can use CustomScrollView with a SliverAppBar for the search bar

like this:-

body: CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,
      floating: false,
      snap: false,
      expandedHeight: 80.0, 
      flexibleSpace: FlexibleSpaceBar(
        title: TextField(
          onChanged: (value) => _runFilter(value),
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(
              vertical: 10.0,
              horizontal: 10.0,
            ),
            hintText: "Search",
            suffixIcon: const Icon(Icons.search),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20.0),
              borderSide: const BorderSide(),
            ),
          ),
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Card(
          elevation: 1,
          margin: const EdgeInsets.symmetric(vertical: 2),
          child: ListTile(
            title: Text(_allUsers[index]['name']),
            subtitle: Text('${_allUsers[index]["generic"]}'),
          ),
        ),
        childCount: _allUsers.length,
      ),
    ),
  ],
);

Answer 2

You could try putting your TextField outside your Scroll widget, removing the unnecesary SingleChildScrollView, and replacing the scroll physics in your ListView:

    Widget build(BuildContext context) { 
    final localStorage = GetStorage();
    
    return Scaffold(
      appBar: HomePageAppBar(),
      drawer: HomePageNavigationDrawer(localStorage),
      body: Column(
              children: [
                TextField(
                  onChanged: (value) => _runFilter(value),
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 10.0, horizontal: 10.0),
                    hintText: "Search",
                    suffixIcon: const Icon(Icons.search),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20.0),
                      borderSide: const BorderSide(),
                    ),
                  ),
                ),
                ListView.builder(
                  physics: const BouncingScrollPhysics(),
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  itemCount: _allUsers.length,
                  itemBuilder: (context, index) => Card(
                    elevation: 1,
                    margin: const EdgeInsets.symmetric(vertical: 2),
                    child: ListTile(
                      title: Text(_allUsers[index]['name']),
                      subtitle: Text('${_allUsers[index]["generic"]}'),
                    ),
                  ),
                ),
              ],
            ),
      bottomNavigationBar: const HomePageBottomNavigation(),
    );