import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyScrollableScreen(), ); } } class MyScrollableScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Scrollable Screen'), ), body: SingleChildScrollView( scrollDirection: Axis.horizontal, child: SingleChildScrollView( scrollDirection: Axis.vertical, child: Column( children: List.generate( 18, // Number of main views (rowIndex) => Container( height: 80, // Set the height of each row margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0), decoration: BoxDecoration( border: Border.all(color: Colors.black, width: 1.0), ), child: Row( children: List.generate( 20, // Number of labels (columnIndex) => Container( width: 80, // Set the width of each label child: Center( child: Text('Label $columnIndex'), ), ), ), ), ), ), ), ), ), ); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter