0

I have created a menu of different items using Listview. The problem is that when one item is pressed, the full list does not scroll to the left, so the user can see that there is more options in the menu. Is there a widget in flutter in order to do this scrollable effect?

I will attached the code here for more information:

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;
                            });
                          },
                          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],
                  ],
                );
  }
}
dosytres
  • 2,096
  • 3
  • 10
  • 21

0 Answers0