Search code examples
flutterflutter-layout

How to make a widget 'aways on top' inside ListView in flutter?


I want the search bar to stick always on top while the user is scrolling vertically on the screen in the ListView. How can i achieve the result? i have attached my code below.

return Scaffold(
      //bottomNavigationBar: ,
      body: SafeArea(
        child: ListView(
          children: [
            searchBox(),
            Text(
              'What can we help you find, Sandor?',
            ),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  ImageCard(
                    imageLink: 'home.jpg',
                    imageTitle: 'Homes',
                  )
                ],
              ),
            ),
             Text(
              'Introdcing Airbnb plus',
            ),
           // Image,
          ],
        ),
      ),
    );
  }

SearchBox class

class searchBox extends StatelessWidget {
  const searchBox({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        fillColor: Colors.white,
        filled:true,
        hintText: 'Try "Costa Tropical"' '',
      
      ),
    );
  }
}

Solution

  • You can solve it in many ways, this is one of them:

    SafeArea(
                child: Column(
                  children: [
                    searchBox(),
                    Expanded(
                      child: ListView(
                        children: [
                          Text(
                            'What can we help you find, Sandor?',
                          ),
                          SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: Row(
                              children: [
                                ImageCard(
                                  imageLink: 'home.jpg',
                                  imageTitle: 'Homes',
                                )
                              ],
                            ),
                          ),
                          Text(
                            'Introdcing Airbnb plus',
                          ),
                          // Image,
                        ],
                      ),
                    ),
                  ],
                ),
              ),