I am trying to make my code simple by making it into an array instead I have to write it one by one, but I do not have an idea on how to convert it into an array list. Here for what I have been done. My output is I want to generate the list in a container with scrollable to the right using axis horizontal scroll direction.

    class YearSort extends StatelessWidget {
  final String title; 

  const YearSort({ 
    Key? key, 
    required this.title,
     }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView( 
      scrollDirection: Axis.horizontal, 
      child: Row( 
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: const [ 
          ByYear(year: 'This year'),
          ByYear(year: '2021'),
          ByYear(year: '2020'),
          ByYear(year: '2019'),
          ByYear(year: '2018'),

        ],
      ),
      );
  }
}

class ByYear extends StatefulWidget {
  final String year;

  const ByYear({ 
    Key? key, 
    required this.year, 
    }) : super(key: key);

  @override
  State<ByYear> createState() => _ByYearState();
}

class _ByYearState extends State<ByYear> {
  bool iselected = true;

  @override
  Widget build(BuildContext context) {
    return Container(
          width: 100,
          height: 30,
          decoration: BoxDecoration(
            color: iselected
            ? Color.fromARGB(255, 215, 237, 255)
            //Colors.white
            : Color.fromARGB(255, 215, 237, 255),
            borderRadius: BorderRadius.circular(20), 
          ),
          child: Center(child: Text(widget.year, style: const TextStyle(fontFamily: 'Poppins'),)),
      
    );
  }
}

CodePudding user response：

Your syntax is kind of not correct for a few widgets and incorrect use of Expanded. This one will help you.

@override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _title.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return Container(
          width: 70,
          height: 30,
          decoration: BoxDecoration(
            color: isSelected
                ? Colors.yellow
                : Colors.blue,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text(_title[index], style: TextStyle(fontFamily: 'Poppins'),),
        );
        },
      );
  }

Since you edit the question in middle of nowhere,

class YearSort extends StatefulWidget {
  final String title;
  const YearSort({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<YearSort> createState() => _YearSortState();
}

class _YearSortState extends State<YearSort> {
  int selectedIndex = 0;
  static List chips = [
    DateTime.now().year,
    DateTime.now().year - 1,
    DateTime.now().year - 2,
    DateTime.now().year - 3,
    DateTime.now().year - 4
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(children: [
            for(int index = 0; index < chips.length; index  )
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: GestureDetector(
                  child: ByYear(
                    year: chips[index].toString(),
                    isSelected: selectedIndex == index,
                  ),
                  onTap: () {
                    selectedIndex = index;
                    setState(() {});
                  },
                ),
              )
          ],),
        ),
        Expanded(child: Container())
      ],
    );
  }
}

class ByYear extends StatefulWidget {
  final String year;
  final bool isSelected;

  const ByYear({Key? key, required this.year, this.isSelected = false})
      : super(key: key);

  @override
  State<ByYear> createState() => _ByYearState();
}

class _ByYearState extends State<ByYear> {
  @override
  Widget build(BuildContext context) {
    Color color = widget.isSelected
        ? const Color.fromARGB(255, 25, 27, 25)
        : const Color.fromARGB(255, 215, 237, 255);
    Color textColor = !widget.isSelected
        ? const Color.fromARGB(255, 25, 27, 25)
        : const Color.fromARGB(255, 215, 237, 255);
    return Container(
      height: 30,
      width: 100,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Text(
          widget.year,
          style: TextStyle(
              fontSize: 16, color: textColor, decoration: TextDecoration.none),
        ),
      ),
    );
  }
}

Note: You can also use Listview.builder instead of singlechildscrollview

CodePudding user response：

If you have an array to show in a scrollable widget, you can use Listview instead of SingleChildScrollView. Like this:

@override
Widget build(BuildContext context) {
return ListView(
  scrollDirection: Axis.horizontal,
  children: const [
    ByYear(year: 'This year'),
    ByYear(year: '2021'),
    ByYear(year: '2020'),
    ByYear(year: '2019'),
    ByYear(year: '2018'),
  ],
  shrinkWrap: true,
);
}

hope it helps you.