Create Horizontal ScrollView in Flutter Android iOS Example Tutorial

Horizontal ScrollView scrolls the widgets in horizontal direction. The horizontal ScrollView scrolls from left to right and right to left. The horizontal ScrollView can contain any widgets like Container, Image, Sized box etc. We can create horizontal ScrollView in flutter using SingleChildScrollView widget. By default this widget has support vertical scrolling but using its scrollDirection: Axis.horizontal property we can scroll it to horizontally. But we have to put all the children widgets in Row widget. Because Row widget add items in a single Row form. So in this tutorial we would Create Horizontal ScrollView in Flutter Android iOS Example Tutorial.

Contents in this project Create Horizontal ScrollView in Flutter Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Call our main class MyApp using void main runApp() function.

3. Create our main class MyApp extends with State less widget.

4. Create Scaffold widget in Widget Build area with SafeArea widget.

5. Create SingleChildScrollView with scrollDirection: Axis.horizontal property and put a Row widget inside SingleChildScrollView. We would put all our widgets in here Row widget.

6. Creating Container widget, Image widget and Text widgets here in Row widget.

7. Complete source code for main.dart file:

Screenshots:

Create Horizontal ScrollView in Flutter Android iOS Example Tutorial

Leave a Reply

Your email address will not be published.