こんにちは。スマホアプリをメインに開発しているロッキーカナイです。
今回もあっさり気味で書かせて頂きます。
Flutterでスクロールさせる方法で思いつくのはListViewなのですが、リストではなく単純に並んだWigetが端末の縦サイズを超えたらスクロールしてくれる方法をメモします。
iOSでいうところのTableViewではなくScrollViewですね。
1 2 3 4 5 6 |
動作環境 mac 10.14.1 Android Studio 3.2 flutterSDK 1.0.0 iOS Simulator 10.0 |
SingleChildScrollView
SingleChildScrollViewを用います。
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: Container( color: Colors.white, child: SingleChildScrollView( child: Column( children: <Widget>[ Container( height: 200, color: Colors.green, ), Container( height: 200, color: Colors.blue, ), Container( height: 200, color: Colors.red, ), Container( height: 200, color: Colors.yellow, ), ], ), ) ) ); } } |
各Containerは使用しているiOSシュミレータの縦サイズを超えるように、設定しました。
以下キャプチャです。スクロールを確認しました。(本当は動画方が分かりやすいのですが、深夜なものでガッツが、。。)

また、各Containerを使用しているiOSシュミレータの縦サイズを超えないように、設定するとスクロールしなくなります。
ABOUT ME
