Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can you change the default ScrollPhysics in flutter?

Tags:

flutter

dart

I need to change the ScrollPhysics for almost every scrollable widget in an app to BouncingScrollPhysics(). I have tried to find a way to do this without adding the physics property everywhere, but I haven't found good a way yet. One solution is to use flutter_platform_widgets and set initialPlatform to iOS, but that will change a lot of other things as well.

Does anyone know if this is possible, and in that case how?

like image 712
Hannes Hultergård Avatar asked Jul 09 '20 07:07

Hannes Hultergård


People also ask

What is ClampingScrollPhysics flutter?

ClampingScrollPhysics class Null safety. Scroll physics for environments that prevent the scroll offset from reaching beyond the bounds of the content. This is the behavior typically seen on Android. See also: ScrollConfiguration, which uses this to provide the default scroll behavior on Android.

Is ListView in Flutter scrollable?

A scrollable, linear list of widgets. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction.... A scrolling view inside of which can be nested other scrolling views, with their scroll positions being intrinsically linked.

What is NeverScrollableScrollPhysics?

NeverScrollableScrollPhysics({ScrollPhysics? parent}) Creates scroll physics that does not let the user scroll.


1 Answers

You can copy paste run full code below
You can extend ScrollBehavior and put in builder of MaterialApp
In demo code, iOS, macOS, android will use BouncingScrollPhysics
code snippet

class ScrollBehaviorModified extends ScrollBehavior {
  const ScrollBehaviorModified();
  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
      case TargetPlatform.android:
        return const BouncingScrollPhysics();
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return const ClampingScrollPhysics();
    }
    return null;
  }
}
...
builder: (context, widget) {
        return ScrollConfiguration(
            behavior: ScrollBehaviorModified(), child: widget);
      },

working demo

enter image description here

full code

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

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

class ScrollBehaviorModified extends ScrollBehavior {
  const ScrollBehaviorModified();
  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
      case TargetPlatform.android:
        return const BouncingScrollPhysics();
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return const ClampingScrollPhysics();
    }
    return null;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      builder: (context, widget) {
        return ScrollConfiguration(
            behavior: ScrollBehaviorModified(), child: widget);
      },
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: ListView.separated(
                itemBuilder: (BuildContext context, int index) {
                  return Text('Item$index');
                },
                separatorBuilder: (BuildContext context, int index) {
                  return Divider();
                },
                itemCount: 50,
              ),
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
like image 192
chunhunghan Avatar answered Sep 27 '22 22:09

chunhunghan