skip to Main Content

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

}

2

Answers


  1. 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(),
        );
    
    Login or Signup to reply.
  2. 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,
          ),
        ),
      ],
    );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search