【Flutter】【1分で分かる】SingleChildScrollViewとは？基本の使い方【サンプルコード付き】

今回はFlutterのSingleChildScrollViewウィジェットについてです。

この記事で分かること

✅「SingleChildScrollView」ウィジェットって何？
✅「SingleChildScrollView」ウィジェットの基本的な使い方
✅「SingleChildScrollView」ウィジェットのプロパティとメソッドについて

目次

「SingleChildScrollView」ウィジェットとは

SingleChildScrollViewはウィジェットの大きさが端末の領域以上になる場合に、スクロールできるようにするウィジェットです。Windows・Macデスクトップアプリでもスマホアプリでもほとんどの場合で指定することになるので大事なウィジェットです。

使用例

サンプルコード（main.dart）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'List TEST'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final items = ["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL","MMM","NNN"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("Flutterスクロールサンプル"),
            ListView.separated(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: items.length,
              itemBuilder: (context, index){
                return ListTile(
                  title: Text(items[index]),
                );
              },
              separatorBuilder: (context, index){
                return const Divider(
                  color: Colors.black,
                );
              },
            ),
            const FlutterLogo(),
          ],
        ),
      ),
    );
  }
}

サンプル画面

全プロパティの説明

child

スクロールするウィジェットを指定します。

clipBehavior

クリップ動作を指定します。

controller

スクロールの挙動を指定します。

dragStartBehavior

スクロールのドラッグを始めたときの挙動を指定します。

hashCode

オブジェクトのハッシュコードを指定します。

key

Flutterフレームワークがウィジェットツリーを再構築する際にウィジェットを識別するための値を指定します。

keyboardDismissBehavior

スクロール時にキーボードを自動的に閉じる方法を指定します。

padding

子ウィジェットのパディングを指定します。

physics

スクロールの終端に行ったときなどの動きを指定します。

primary

スクロールするウィジェットを複数扱うときなどに、どのウィジェットをプライマリーなスクロールビューにするか指定します。

restorationId

状態を保存及び復元する際に使用するためのIDを指定します。

reverse

スクロールの向きを逆にするかを指定します。

runtimeType

オブジェクトの実行時の型を指定します。

scrollDirection

スクロールの向きを縦か横かで指定します。

まとめ

今回は「SingleChildScrollView」についてでした。そこそこ大きなアプリを作ろうと思ったらほぼ必須で使うと思うのでこの機会に理解を深めていきましょう！

以上となります、最後までお読みいただきありがとうございました！

参考

SingleChildScrollView class - widgets library - Dart API