【Flutter】画面より大きいサイズのウィジェットをスクロールと拡大縮小できるようにする

InteractiveViewerというウィジェットを使えば簡単に実装することができます。

まずは、白黒模様を作成します。

class FirstPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('InteractiveViewer'),
       centerTitle: true,
     ),
     body: buildPlaid(),
   );
 }

 Widget buildPlaid() {
   double size = 150;

   List<Widget> _list = [];
   List<Widget> _listCache = [];

   for(int i = 0; i < 5; i++) {
     for(int j = 0; j < 5; j++) {
       _listCache.add(
         Container(
           width: size,
           height: size,
           color: blackOrWhite(i, j),
         )
       );
     }
     _list.add(Row(children: _listCache,));
     _listCache = [];
   }

   return Column(
     children: _list,
   );
 }

 Color blackOrWhite(i, j) {
   if((i % 2 == 0 && j % 2 == 0) || (i % 2 == 1 && j % 2 == 1)) {
     return Colors.black;
   } else {
     return Colors.white;
   }
 }
}

このままだと画面サイズを超えているので、エラーが出てしまいます。

そこでInteractiveViewerでラップし、constrainedプロパティをfalseに設定します。

body: InteractiveViewer(
 constrained: false,
 child: buildPlaid(),
),

そうすれば、ページの最初に貼っているgifにように、画面に合わせてスクロールしたり拡大縮小できるようになります。

【Flutter】3日でできるFlutterアプリ開発入門【環境構築からUI作成まで】