Flutter

Flutter スクロールバーの使い方【Scrollbar】

記事内に商品プロモーションを含む場合があります

Flutterでは縦に長いページを作成した場合、画面をフリックすればスクロールされますが、右側にスクロールバーは出てきません。

Flutterでスクロールバーを表示するには、「Scrollbar」クラスを使用するだけで実現できます。

本記事では「Scrollbarクラス」を使用してスクロールバーを表示する方法の備忘録です。

Scrollbarクラスの使い方

Scrollbarクラスは「material.dart」にてexportされているので、外部のパッケージを使用することなく使用できます。

使い方は非常にシンプルで、ScrollbarクラスのchildにListViewなどのScrollViewを設定するだけです。

Scrollbarクラスを使用したサンプル

実際に使用してみました。

ソースコードは以下のとおりです。

class MyHomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _textEditingController = useTextEditingController();

    _textEditingController.addListener(() {
      context.read(textProvider).writeTitle(_textEditingController.text);
    });

    final state = useProvider(textProvider.state);
    final camel = context.read(textProvider).camel;
    final snake = context.read(textProvider).snake;
    final upperSnake = context.read(textProvider).upperSnake;
    final kebab = context.read(textProvider).kebab;

    var data = [
        Text("testA"),
        Text("testB"),
        Text("testC"),
        Text("testD"),
        Text("testE"),
        Text("testF")
    ];

    return Scaffold(
      appBar: AppBar(
          title: Text(
            "わーすだよ!",
          ),
          centerTitle: false,
        ),
      ),
      body: Scrollbar(
        isAlwaysShown: true,
        child: ListView(
            children: data
        ),
      ),
    );
  }
}

ScrollbarクラスのchildにListViewを設定しています。

また、isAlwaysShownをtrueにしておくと、常にスクロールバーを表示させることができます。

実際の画面は以下のようになります。

スクロールバーを表示させることができました。

まとめ

スマホに慣れていれば、フリックでも良いかもしれませんが、スクロールバーがないといったいどうすれば良いんだ!となる人もいますよね。

そのあたりを考慮すると、スクロールバーを設定してあげるのも優しいアプリやサイトには必要かもしれません。

設定自体は簡単なので、必要に応じて使い分けていこうと思います。

Flutter学習情報

Flutterを勉強するのに最適な参考書は、以下の「基礎から学ぶFlutter」です。

環境構築から、Dart/Flutterの基本/テストやパフォーマンスチューニングまで一通り学ぶことができます。

また、当ブログではFlutterを初心者が学ぶためにオススメな方法を「Flutter を初心者が学ぶおすすめの勉強法!【間違いない動画があります】」という記事で公開していますので、Flutterに興味がある方は是非読んでみてください。

Flutterに入門するためのオススメ勉強法【間違いない動画があります】Flutter 初心者が勉強する場合に、最高の動画をお伝えします。...

動画学習がしたい!という方にオススメの記事がこちらです。

【Udemy】スマホアプリ作成を学ぶときに受講しておきたい講座3選【Flutter】スマホアプリを初めて作成する場合、何らかの教材を見ながら進めると思います。 私は動画で学習するのが好きで、非常に効率よく学ぶことが...

Flutterの将来性はどうなのか?をまとめた記事はこちらです。

【2021/10 更新】Flutterの将来性をトレンドやGoogleの情勢から分析した結果クロスプラットフォーム開発のフレームワークの中で近年注目されているのが「Flutter」です。 私も2020年の4月頃から注目して...