Home > Enterprise >  How to focus on latest added item in listview in flutter
How to focus on latest added item in listview in flutter

Time:09-05

`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

CodePudding user response:

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)

CodePudding user response:

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");
  • Related