Home > Software design >  How to make a widget 'aways on top' inside ListView in flutter?
How to make a widget 'aways on top' inside ListView in flutter?

Time:09-29

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"' '',
      
      ),
    );
  }
}

CodePudding user response:

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,
                    ],
                  ),
                ),
              ],
            ),
          ),
  • Related