CODEWITHSUNDEEP
flutterflutter-layout
dosytres
dosytres

Reputation: 2286

How to flutter listview scroll to index?

I have a list of strings that form an item menu created horizontally:

List categories = ['Interest', 'Preferences', 'Personal Information', 'Hobbies',];

When the user selects one of the items, a certain information renders to the screen.

My question is, how to scroll this menu horizontally, for example; there is 5 options and the user can only see 3 of the items in the screen, if he/she selects the second item, this one moves to the left, hiding the first and showing the 4th.

I thought about ScrollablePositionedList() but do not know how to use it.

class CategoryListState extends State<CategoryList> {
  static const colorBlau = Color(0xFF88B4E0);
  int selectedIndex = 0;
  List categories = ['Interest', 'Preferences', 'Personal Information', 'Hobbies',];

//Your list of widgets that you import, note: keep the order same as categories
  List<Widget> category_widgets = [CheckBoxes(), DropDownWidget(), TextFields(), SwipeCards(),];

  @override
  Widget build(BuildContext context) {

    return Column(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.symmetric(vertical: 20.0/2),
                      height: 30.0,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: categories.length,
                        itemBuilder: (context, index) => GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedIndex = index;
                              //categories[index].isSelected = true;
                            });
                          },
                          child: Container (
                            alignment: Alignment.center,
                            margin: EdgeInsets.only(
                              left: 20.0,
                              right: index == categories.length -1 ? 20.0 : 0,
                            ),
                            padding: EdgeInsets.symmetric(horizontal: 20.0),
                            decoration: BoxDecoration(
                              color: index == selectedIndex
                                  ? Colors.white.withOpacity(0.4)
                                  : Colors.transparent,
                              borderRadius: BorderRadius.circular(6),
                            ),
                            child: Text(
                              categories[index].toString(),
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ),
                    category_widgets[selectedIndex],
                  ],
                );
  }
}

Upvotes: 1

Views: 5457

Answers (1)

Fatiha IMOUSSAINE
Fatiha IMOUSSAINE

Reputation: 338

you can use the ScrollablePositionedList this way

final ItemScrollController itemScrollController = ItemScrollController();
final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();
ScrollablePositionedList.builder(
  itemCount: 500,
  itemBuilder: (context, index) => Text('Item $index'),
  itemScrollController: itemScrollController,
  itemPositionsListener: itemPositionsListener,
);

then can scroll to a particular item with:

itemScrollController.scrollTo(
  index: 150,
  duration: Duration(seconds: 2),
  curve: Curves.easeInOutCubic);

or jump to a particular item with:

itemScrollController.jumpTo(index: 150);

Upvotes: 2

Related Questions