Neste tutorial, aprenderemos como rolar para baixo até a parte inferior de um ListView no Flutter. Rolar para baixo até o final da lista é muito chato e, portanto, aqui está uma maneira de rolar diretamente para o final ou topo da lista.

Configuração do projeto:

Abaixo está um código inicial para que você possa acompanhar este tutorial. Este código gera um aplicativo com uma lista de 100 itens.

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Geeks For Geeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Geeks For Geeks'),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
        
      // Floating action button. Functionality to be implemented
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        isExtended: true,
        tooltip: "Scroll to Bottom",
        child: Icon(Icons.arrow_downward),
      ),
        
      // Simple List of 100 items
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("Item ${index + 1}"),
          );
        },
      ),
    );
  }
}

Execute o código e o resultado será o seguinte.

Código inicial

Implementação:

Como você pode ver, nosso FloatingActionButton não está funcionando, pois nenhuma função foi atribuída a ele no campo onPressed . Em primeiro lugar, precisaremos de um ScrollController para controlar nosso ListView . Portanto, crie um ScrollController.

ScrollController listScrollController = ScrollController();

Agora atribua este ScrollController ao campo do controlador de ListView .

controller: listScrollController,

Agora vá para o campo onPressed() de FloatingActionButton .

Aqui, usaremos o seguinte código:

// We will jump to the bottom of the list
  
onPressed: () {
  if (listScrollController.hasClients) {
    final position = listScrollController.position.maxScrollExtent;
    listScrollController.jumpTo(position);
  }
},

Primeiro verificamos se podemos nos comunicar com os membros do ScrollController usando

listScrollController.hasClients

Se não for marcada, obteremos um erro de tempo de execução. O código acima retorna um valor booleano. Agora, indo para a próxima parte, pedimos a extensão máxima de rolagem do ScrollController . 

final position = listScrollController.position.maxScrollExtent;

Isso simplesmente significa que estamos solicitando a última posição no ListView via ScrollController . E então, pedimos ao ScrollController para mover a posição que obtivemos acima usando a função jumpTo .

listScrollController.jumpTo(position);

Agora execute o código e você verá o seguinte resultado.

Lista de rolagem para baixo

Assim, alcançamos com sucesso o final da nossa lista. 

Agora você pode pensar que seria bom se não passarmos abruptamente para o final da lista, iremos com facilidade. Portanto, o mesmo pode ser alcançado usando a função animateTo .

Substitua o código jumpTo pelo código abaixo:

// We will reach the bottom of list within a duration of 
// 3 seconds animating down the ListView
  
listScrollController.animateTo(
  position,
  duration: Duration(seconds: 3),
  curve: Curves.easeOut,
);

Agora execute o aplicativo novamente. Você verá o seguinte resultado.

Rolagem Animada

Aprendemos como rolar a lista para baixo, agora aprenderemos como rolar para o topo do ListView .

Em vez de obter o maxScrollExtent , agora usaremos o minScrollExtent de ScrollController e isso significa simplesmente a posição superior de ListView .

Aqui está o código e não se esqueça de alterar o ícone:

// Floating action button is implemented with the above functionality 
// and onPressed triggers the function
  
floatingActionButton: FloatingActionButton(
  onPressed: () {
    if (listScrollController.hasClients) {
      final position = listScrollController.position.minScrollExtent;
      listScrollController.animateTo(
        position,
        duration: Duration(seconds: 3),
        curve: Curves.easeOut,
      );
    }
  },
  isExtended: true,
  tooltip: "Scroll to Top",
  child: Icon(Icons.arrow_upward),
),

Agora execute o aplicativo novamente.

Rolagem na parte superior de ListView

Código-fonte completo:

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Geeks For Geeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Geeks For Geeks'),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  ScrollController listScrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
        
      // Floating action button implemented with the
      // auto scroll function to the bottom of list 
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (listScrollController.hasClients) {
            final position = listScrollController.position.maxScrollExtent;
            listScrollController.animateTo(
              position,
              duration: Duration(seconds: 3),
              curve: Curves.easeOut,
            );
          }
        },
        isExtended: true,
        tooltip: "Scroll to Bottom",
        child: Icon(Icons.arrow_downward),
      ),
        
      // ListView with 100 list items
      body: ListView.builder(
          
        // Scroll Controller for functionality
        controller: listScrollController,
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("Item ${index + 1}"),
          );
        },
      ),
    );
  }
}

Saída:

Role até o final da lista

Role para o topo da lista

Conclusão:

Neste tutorial, aprendemos um recurso muito interessante do ListView que você pode encontrar em muitos sites e blogs. Portanto, agora você também pode implementar o mesmo recurso em seu aplicativo.