How to focus on latest added item in listview in flutter

Question

`import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_bounce/flutter_bounce.dart';
import 'package:serviz/utils/colors.dart';
import 'package:serviz/widgets/appbar.dart';
import 'package:serviz/widgets/drawer/drawer.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:serviz/widgets/progress_widget.dart';
import 'package:serviz/widgets/widget_card.dart';

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final String week = "Week";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: MyHomeAppBar(),
        drawer: NavigationDrawer(),
        backgroundColor: AppColors.grey_background,
        body: Column(
          children: [
            Row(
              children: [ProgressWidget()],
            ),
            Expanded(
                child: ListView.builder(
                    physics: BouncingScrollPhysics(),
                    reverse: true,
                    itemCount: 8,
                    itemBuilder: (context, index) {
                      return WidgetCard(week: "Week" + '${index + 1}');
                    }))
          ],
        ));
  }``
}
`

This is the code of my home screen where I display a listview. For now it is static but later i want to add Cards to the listview. So if i give reverse = true it focuses on the first item when i open the app. I want it to focus on the last item

Yes. I want it to scroll to latest week. it currently focuses on week 1 but i want it to focus on week 8 — jeswin jaison, Sep 05 '22 at 12:57

Yashraj · Accepted Answer · 2022-09-05T11:27:13.220

2

You can achieve it with the help of ScrollController.

Example,

ScrollController? _controller;

@override
void initState() {
_controller = ScrollController();

 SchedulerBinding.instance.addPostFrameCallback((_) {

 _controller.animateTo(
         _controller.position.maxScrollExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
            );
    }});

// Now add _controller inside ListView.builder like this,

ListView.builder(
controller: _controller)

edited Sep 05 '22 at 11:27

answered Sep 05 '22 at 11:06

Yashraj

1,025
1
5
22

Why the Future with 100 milliseconds? What if it takes 1 second to build the UI, your jumpTo would throw an exception. And why the Timer? Wouldn't this repeat it every 400 milliseconds? – Ozan Taskiran Sep 05 '22 at 11:12
Oops my mistake, I have edited my answer. – Yashraj Sep 05 '22 at 11:19
I think this will still throw an "scrollcontroller not attached to any scroll views" exception since you call it inside the initstate. Wrapping it with WidgetsBinding.instance.addPostFrameCallback() should solve this (https://stackoverflow.com/questions/49466556/flutter-run-method-on-widget-build-complete) – Ozan Taskiran Sep 05 '22 at 11:22
And you may have to replace the _controller.position.maxScrollExtent with 0.0, because reverse is set to true in the ListView. But i'm not sure, didn't test it. – Ozan Taskiran Sep 05 '22 at 11:43

score 1 · Answer 2 · answered Sep 05 '22 at 11:09

Put the weeks in a list.

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final String week = "Week";
  List<String> weeks = List<String>.generate(8, (index) => "Week${index + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: MyHomeAppBar(),
        drawer: NavigationDrawer(),
        backgroundColor: AppColors.grey_background,
        body: Column(
          children: [
            Row(
              children: [ProgressWidget()],
            ),
            Expanded(
                child: ListView.builder(
                    physics: BouncingScrollPhysics(),
                    reverse: true,
                    itemCount: weeks.length,
                    itemBuilder: (context, index) {
                      return WidgetCard(week: weeks[index]);
                    }))
          ],
        ));
  }
}

When you want to add a new element, you add it through the .insert() method.

weeks.insert(0, "Week9");

How to focus on latest added item in listview in flutter

2 Answers2