スクロールは通常、縦方向もしくは横方向どちらかにしか行うことができません。

そこで、縦と横のスクロールを合わせて斜めにスクロールしているように見えるコードを書いてみたので紹介します。

完成形

コード（main.dart）

main.dartに以下のコードをコピペすれば確認できるようになっています。

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Hatchout Scroll',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: TopPage(),
   );
 }
}

class TopPage extends StatefulWidget {
 @override
 _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {

 final _controllerX = ScrollController();
 final _controllerY = ScrollController();

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text('斜めにスクロール'),
         centerTitle: true,
       ),
       body: Stack(
         children: [
           Container(
             width: double.infinity,
             height: double.infinity,
             child: SingleChildScrollView(
               controller: _controllerY,
               child: SingleChildScrollView(
                 controller: _controllerX,
                 scrollDirection: Axis.horizontal,
                 child: buildPlaid(),
               ),
             ),
           ),
           GestureDetector(
             behavior: HitTestBehavior.opaque,
             child: Container(
               width: double.infinity,
               height: double.infinity,
             ),
             onPanUpdate: (DragUpdateDetails data) {
               _controllerX.jumpTo(_controllerX.offset + (data.delta.dx * -1));
               _controllerY.jumpTo(_controllerY.offset + (data.delta.dy * -1));
             },
           ),
         ],
       )
   );
 }

 Widget buildPlaid() {
   List<Widget> _listColumn = [];
   for(int j = 0; j < 20; j++) {
     List<Widget> _listRow = [];
     for(int i = 0; i < 20; i++) {
       _listRow.add(
           Container(
             width: 80.0,
             height: 80.0,
             color: (i % 2 == j % 2) ? Colors.black : Colors.white,
           )
       );
     }
     _listColumn.add(
       Row(children: _listRow,)
     );
   }

   return Container(
     child: Column(
       children: _listColumn,
     ),
   );
 }

}