Flutter - Scroll ListView selected item into the center of the screen?

user_15328638 0
Viewed 1172

I have a horizontal scrolling ListView with an undetermined number of items inside.

enter image description here

How can I programatically scroll a specific item into the center of my screen?

Context: On the previous screen I have multiple items, and when I click on one, I need it to navigate to this screen and scroll the item selected on the previous screen to the center of the new screen.

My trouble is really just with the scrolling part.

Thanks in advance.

ListView:

final listViewController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      scrollDirection: Axis.horizontal,
      physics: ClampingScrollPhysics(),
      controller: listViewController,
      padding: EdgeInsets.zero,
      itemCount: testArray.length,
      itemBuilder: (ctx, i) => Item(
        testArray[i],
        testArray[i] == 'item5' ? true : false,
        () => {
          // testing code for the scroll functionality
          listViewController.animateTo(
              i + MediaQuery.of(context).size.width / 2,
              duration: Duration(seconds: 1),
              curve: Curves.easeIn),
        },
      ),
      separatorBuilder: (ctx, i) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 6),
      ),
    );
  }
}

Item Widget:

class Item extends StatelessWidget {
  final String itemName;
  final bool selectedItem;
  final VoidCallback navigationHandler;

  Item(
      this.itemName, this.selectedItem, this.navigationHandler);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      child: TextButton(
        onPressed: navigationHandler,
        child: Text(
          itemName,
          style: selectedItem
              ? Theme.of(context).textTheme.headline6?.copyWith(
                    fontSize: 22,
                  )
              : Theme.of(context).textTheme.headline6?.copyWith(
                    color: Color(0xff707070),
                  ),
        ),
      ),
    );
  }
}
dart flutter
2 Answers

The best solution to this issue that I've found is to use the package scrollable_positioned_list which can scroll to items based on its index.

If you knew the extent of its children you could have used a FixedExtentScrollController as the controller of your lisview and would not have needed to rely on a external dependency.

The gist of using the package is just to create a controller , this time an ItemScrollController and just replace your ListView.separated to ScrollablePositionedList.separated

final ItemScrollController itemScrollController = ItemScrollController();

ScrollablePositionedList.separated(
  itemScrollController: itemScrollController,
...
);

One then can scroll to a particular item with:

itemScrollController.scrollTo(
 index: 150,
 duration: Duration(seconds: 1),
 curve: Curves.easeIn);

A complete example would be as follows

final testArray = [for (var i = 0; i < 100; i++) 'item$i'];

class _MyAppState extends State<MyApp> {
  final itemScrollController = ItemScrollController();
  

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: MyApp._title,
        home: Scaffold(
            body: ScrollablePositionedList.separated(
          itemCount: testArray.length,
          scrollDirection: Axis.horizontal,
          physics: ClampingScrollPhysics(),
          padding: EdgeInsets.zero,
          itemBuilder: (context, i) => Item(
            testArray[i],
            testArray[i] == 'item5' ? true : false,
            () => {
              // testing code for the scroll functionality
              itemScrollController.scrollTo(
                  index: (i + 5) % testArray.length,
                  duration: Duration(seconds: 1),
                  curve: Curves.easeIn,
                  alignment: 0.5),/// Needed to center the item when scrolling
         
            },
          ),
          itemScrollController: itemScrollController,
          separatorBuilder: (ctx, i) => Padding(padding: EdgeInsets.symmetric(horizontal: 6)),
        )));
  }
}

By the way be accustomed at whenever you're working with controllers create them in the State of a Stateful widget, so they are only created once, and dispose them if necessary. I'ts not the case with ItemScrollController but ScrollController would have needed to be disposed .

user_110868440

maybe you send code? how you need get a help only with screenshot?

user_148764520
Related