Flutter ListView.builder Example | Scroll Direction (Vertical & Horizontal)

Learn how to implement a ListView.builder widget in Flutter with vertical and horizontal scroll directions. This tutorial demonstrates how to create a scrollable list of Quranic Surahs using Flutter ListView.builder and provides code examples for both vertical and horizontal scroll directions.


Flutter code example

Scroll direction( Vertical)
//Code
ListView.builder(
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: double.infinity,
height: 100,
color: Colors.indigo[900],
child: Center(
child: Text(quran.getSurahName(index + 1),
style: TextStyle(color: Colors.white)),
),
),
);
},
itemCount: quran.totalSurahCount,
// itemCount: 114,
));


Scroll direction(Horizontal)
//Code

ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 100,
height: 100,
color: Colors.indigo[900],
child: Center(
child: Text(quran.getSurahName(index + 1),
style: TextStyle(color: Colors.white)),
),
),
);
},
itemCount: quran.totalSurahCount,
// itemCount: 114,
));



#Flutter
#ListView.builder
#vertical scroll, horizontal scroll,
#Flutter code example,
# ListView.builder tutorial,
#Quranic Surahs,
#Flutter container,
#Flutter development,
# Flutter scrollable list