Flutter Horizontal ScrollView

The ScrollView normal scrolling direction is vertical content scrolling. In horizontal ScrollView content scrolls horizontally. We can make SingleChildScrollView widget scrolls horizontally with scrollDirection: Axis.horizontal property. This property controls in which Axis it scrolls.

Flutter Horizontal ScrollView

1. Creating String variable to store online Image URL. We will display this image in ScrollView.

final String testImage =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

2. Creating SingleChildScrollView widget including scrollDirection: Axis.horizontal prop to enable horizontal scrolling.

SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            Container(
              color: Colors.blue,
              width: 200.0,
              height: 200.0,
            ),
            const Text('Text - 1', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.brown,
              width: 200.0,
              height: 200.0,
            ),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            const Text('Text - 2', style: TextStyle(fontSize: 24)),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            Container(
              color: Colors.cyan, // Yellow
              height: 200.0,
              width: 200.0,
            ),
            const Text('Text - 3', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.deepOrange, // Yellow
              height: 200.0,
              width: 200.0,
            ),
          ],
        ),
      ),

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  final String testImage =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            Container(
              color: Colors.blue,
              width: 200.0,
              height: 200.0,
            ),
            const Text('Text - 1', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.brown,
              width: 200.0,
              height: 200.0,
            ),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            const Text('Text - 2', style: TextStyle(fontSize: 24)),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            Container(
              color: Colors.cyan, // Yellow
              height: 200.0,
              width: 200.0,
            ),
            const Text('Text - 3', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.deepOrange, // Yellow
              height: 200.0,
              width: 200.0,
            ),
          ],
        ),
      ),
    );
  }
}