How to add ʺScroll Back to Topʺ Button in Flutter App

In this example, we are going to show you the way to add the “Scroll back to top” button with fade in/fade out animation during the show or hide. You can use this Flutter app example in your project. See the code below:

The output of this example:

Flutter App Example with “Scroll Back to Top” Button:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ScrollController scrollController = ScrollController();
  bool showbtn = false;

  List<String> countries = ["USA", "United Kingdom", "China", "Russia", "Brazil",
                              "India", "Pakistan", "Nepal", "Bangladesh", "Sri Lanka",
                              "Japan", "South Korea", "Mongolia"];

  @override
  void initState() {
    scrollController.addListener(() { //scroll listener 
        double showoffset = 10.0; //Back to top botton will show on scroll offset 10.0

        if(scrollController.offset > showoffset){
              showbtn = true;
              setState(() {
                //update state 
              });
        }else{
             showbtn = false;
              setState(() {
                //update state 
              });
        }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Scroll Back to Top Button"),
            backgroundColor: Colors.redAccent
         ),
         floatingActionButton: AnimatedOpacity(
           duration: Duration(milliseconds: 1000),  //show/hide animation
           opacity: showbtn?1.0:0.0, //set obacity to 1 on visible, or hide
           child: FloatingActionButton( 
              onPressed: () {  
                 scrollController.animateTo( //go to top of scroll
                   0,  //scroll offset to go
                   duration: Duration(milliseconds: 500), //duration of scroll
                   curve:Curves.fastOutSlowIn //scroll type
                  );
              },
              child: Icon(Icons.arrow_upward),
              backgroundColor: Colors.redAccent,
           ), 
         ),
         body: SingleChildScrollView( 
                  controller: scrollController, //set controller
                  child:Container(
                    child:Column(
                      children: countries.map((country){
                          return Card( 
                            child:ListTile(
                                title: Text(country)
                            )
                          );
                      }).toList(),
                  )
              )
          )
    );
  } 
}

You can also use ListView() widget. In this example, We have added the scroll change listener and got Scroll position offset, and used it to make the “Scroll Back to Top” button. You can add Scroll bar on SingleChildScrollView widget in this example.

Output is shown above. This is the way you can add the “Scroll Back to Top” button in Flutter App. For managing long content views, explore scrollable ListView navigation and implementing FloatingActionButton widgets in Flutter.