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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main class MyApp using void main runApp() function.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget in Widget Build area with SafeArea widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: ) ) ); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: <Widget>[ ], ), ), ) ) ); } } |
6. Creating Container widget, Image widget and Text widgets here in Row widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: <Widget>[ Container( color: Colors.green, // Yellow height: 200.0, width: 200.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 200, fit: BoxFit.contain), Container( color: Colors.pink, // Yellow height: 200.0, width: 200.0, ), Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)), Container( color: Colors.redAccent, // Yellow height: 200.0, width: 200.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), ], ), ), |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: <Widget>[ Container( color: Colors.green, // Yellow height: 200.0, width: 200.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 200, fit: BoxFit.contain), Container( color: Colors.pink, // Yellow height: 200.0, width: 200.0, ), Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)), Container( color: Colors.redAccent, // Yellow height: 200.0, width: 200.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), ], ), ), ) ) ); } } |
Screenshots:
