7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutterのスクロールにびろーんもぐにょーんも必要ない

Posted at

Flutterでスクロール系のWidget使うと、iOSの場合スクロールの端でバウンス効果があってびろーんとなる(BouncingScrollPhysics)。Androidの場合びろーんとはならないが(ClampingScrollPhysics)、グローエフェクトが掛かってぐにょーんとアニメ表示が出る(GlowingOverscrollIndicator)。アプリ全体でびろーんもぐにょーんも全否定したい場合はどうするかのメモ。

never_glow_scroll.dart
import 'package:flutter/material.dart';

class NeverGlowScrollBehavior extends ScrollBehavior {
  const NeverGlowScrollBehavior();

  @override
  Widget buildViewportChrome(
          BuildContext context, Widget child, AxisDirection axisDirection) =>
      child;

  @override
  ScrollPhysics getScrollPhysics(BuildContext context) =>
      const ClampingScrollPhysics();
}

class NeverGlowScrollConfiguration extends StatelessWidget {
  final Widget child;

  const NeverGlowScrollConfiguration({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: const NeverGlowScrollBehavior(),
      child: child,
    );
  }
}

NeverGlowScrollBehaviorが要で、getScrollPhysics()で無条件にびろーんとならないClampingScrollPhysicsを返している。そしてbuildViewportChrome()で何もさせないようにしてグローエフェクトを潰している。
NeverGlowScrollConfigurationはNeverGlowScrollBehaviorを使うようにしているだけなのであってもなくても良い。

そしてMaterialAppのbuilderで、

main.dart
    return MaterialApp(
      // ...
      builder: (context, child) => NeverGlowScrollConfiguration(child: child),

とするとアプリ全体でびろーんもぐにょーんも消える。
「この画面だけNeverScrollableScrollPhysics使いたい」なんてときは個別にphysics設定とかすればオッケー。

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?