How to make scrollable list using array - flutter

Question

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'),)),
);
}
}

Answer 1

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

Answer 2

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.