Flutter How to make floating button like hotels.com app see all

Issue

In Hotels app Flutter How to make floating button like hotels.com app see all

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.resolveWith<Color?>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.focused))
          return Colors.blue;
        return null; // Defer to the widget's default.
      }
    ),
  ),
  onPressed: () { },
  child: Text('See All'),
)

[images] [1]: https://i.stack.imgur.com/my6HR.jpg [2]: https://i.stack.imgur.com/0sqhu.jpg [3]: https://i.stack.imgur.com/f1pA0.jpg

Solution

You can do this by ScrollController it can help you to catch the position or actually the offset of your scroll Remember to use StatefulWidget

 ScrollController scrollController = ScrollController(); // this is what i was talking about 
  bool showbtn = false;
  @override
  void initState() {
    scrollController.addListener(() { // make a listener if scroll offset changed
      // print(scrollController.offset); // this is a test comment
      if (scrollController.offset >= 400) { // this check the offset i choose this number because its more close to hotel.com app but play whit this number
        setState(() {
          showbtn = true; // this set true if its in that offset, you can guess
        });
      } else {
        setState(() {
          showbtn = false;
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView( // this is your main body 
          controller: scrollController,
          child: Container(
            height: 10000,
            width: 500,
          ),
        ),
        bottomNavigationBar: showbtn // now check if bool is true to show
            ? Material(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(200),
                child: InkWell(
                  onTap: () {}, // your function here
                  child: const SizedBox(
                    height: kToolbarHeight,
                    width: double.infinity,
                    child: Center(
                      child: Text(
                        'See All',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            : null, // if bool was false it shows nothing 
      ),
    );
  }

You can play with widget to make it best performance as you like

Answered By - mohammad esmaili