【Flutterやろうよ！】初級編その３〜スクロール〜

こんにちは。
前回、前々回と縦並び、横並びについて書いてきました。

qkuronekop.hatenablog.jp

↑Column()について。

qkuronekop.hatenablog.jp

↑Row()について。

本日はスクロールについて書いていきたいと思います。

上の画像のように横に沢山要素を並べていくといずれはみ出します。

はみ出さずに沢山並べるにはどうしたらいいでしょうか？
そうです！
スクロールさせます。

Before

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基本の縦並び'),
      ),
      body: Container(
        width: double.infinity,
        color: Colors.yellow,
        child: const Row(
          children: [
            ColoredBox(
              color: Colors.redAccent,
              child: Text('１行目'),
            ),
            ColoredBox(
              color: Colors.orange,
              child: Text('２行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('３行目'),
            ),
            ColoredBox(
              color: Colors.redAccent,
              child: Text('４行目'),
            ),
            ColoredBox(
              color: Colors.orange,
              child: Text('５行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('６行目'),
            ),
            ColoredBox(
              color: Colors.redAccent,
              child: Text('７行目'),
            ),
            ColoredBox(
              color: Colors.orange,
              child: Text('８行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('９行目'),
            ),
            ColoredBox(
              color: Colors.redAccent,
              child: Text('１０行目'),
            ),
            ColoredBox(
              color: Colors.orange,
              child: Text('１１行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('１２行目'),
            )
          ],
        ),
      ),
    );
  }
}

After

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基本の縦並び'),
      ),
      body: Container(
        width: double.infinity,
        color: Colors.yellow,
        child: const SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              ColoredBox(
                color: Colors.redAccent,
                child: Text('１行目'),
              ),
              ColoredBox(
                color: Colors.orange,
                child: Text('２行目'),
              ),
              ColoredBox(
                color: Colors.blue,
                child: Text('３行目'),
              ),
              ColoredBox(
                color: Colors.redAccent,
                child: Text('４行目'),
              ),
              ColoredBox(
                color: Colors.orange,
                child: Text('５行目'),
              ),
              ColoredBox(
                color: Colors.blue,
                child: Text('６行目'),
              ),
              ColoredBox(
                color: Colors.redAccent,
                child: Text('７行目'),
              ),
              ColoredBox(
                color: Colors.orange,
                child: Text('８行目'),
              ),
              ColoredBox(
                color: Colors.blue,
                child: Text('９行目'),
              ),
              ColoredBox(
                color: Colors.redAccent,
                child: Text('１０行目'),
              ),
              ColoredBox(
                color: Colors.orange,
                child: Text('１１行目'),
              ),
              ColoredBox(
                color: Colors.blue,
                child: Text('１２行目'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

SingleChildScrollView() を入れた事によってはみ出す事がなくなりましたね。
scrollDirection: Axis.horizontal,とする事で横スクロールになります。
デフォルトは縦なので、縦方向にスクロールさせたい場合にはこの設定を消すか、scrollDirection: Axis.vertical,にしてください！

こんな時にもスクロール！

こんな画面があったとします。
ログイン画面とかプロフィール入力画面とか、こんなのありそうですよね。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基本の縦並び'),
      ),
      body: Column(
        children: [
          const SizedBox(
            height: 24,
          ),
          const Text('メール'),
          const TextField(
            decoration: InputDecoration(hintText: 'メールアドレス'),
          ),
          const SizedBox(
            height: 16,
          ),
          const Text('パスワード'),
          const TextField(
            decoration: InputDecoration(hintText: 'パスワード'),
          ),
          const SizedBox(
            height: 16,
          ),
          const Text('名前'),
          const TextField(
            decoration: InputDecoration(hintText: '名前'),
          ),
          const SizedBox(
            height: 16,
          ),
          const Text('ニックネーム'),
          const TextField(
            decoration: InputDecoration(hintText: 'ニックネーム'),
          ),
          const SizedBox(
            height: 16,
          ),
          const Text('お住まい'),
          const TextField(
            decoration: InputDecoration(hintText: 'お住まい'),
          ),
          const SizedBox(
            height: 32,
          ),
          ElevatedButton(onPressed: () {}, child: Text('アカウント登録！')),
        ],
      ),
    );
  }
}

一見画面内に収まっているように見えますが、

入力の為にキーボードが上がってくるとはみ出してしまいます。
なので、こうです。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基本の縦並び'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const SizedBox(
              height: 24,
            ),
            const Text('メール'),
            const TextField(
              decoration: InputDecoration(hintText: 'メールアドレス'),
            ),
            const SizedBox(
              height: 16,
            ),
            const Text('パスワード'),
            const TextField(
              decoration: InputDecoration(hintText: 'パスワード'),
            ),
            const SizedBox(
              height: 16,
            ),
            const Text('名前'),
            const TextField(
              decoration: InputDecoration(hintText: '名前'),
            ),
            const SizedBox(
              height: 16,
            ),
            const Text('ニックネーム'),
            const TextField(
              decoration: InputDecoration(hintText: 'ニックネーム'),
            ),
            const SizedBox(
              height: 16,
            ),
            const Text('お住まい'),
            const TextField(
              decoration: InputDecoration(hintText: 'お住まい'),
            ),
            const SizedBox(
              height: 32,
            ),
            ElevatedButton(onPressed: () {}, child: Text('アカウント登録！')),
          ],
        ),
      ),
    );
  }
}