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(),
);
}
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,
),
),
],
);