Question 79358 in Flutter Question posted in
The official Flutter documentation can be found here.

How to not bounce and scroll when within screen size – Flutter

When I run the following code on an iPhone, the GridView bounces.

If the contents of the GridView over the iPhone screen size, I want it to scroll, but if it is within the iPhone screen size, I do not want it to bounce or scroll.

How do I modify the code below?

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          children: const [
            Text("A"),
            Text("B"),
          ],
        ),
      )
    );
  }
}

As a side note, when launched in Chrome as shown below, it does not bounce if the content is smaller than the screen size, so it is working as expected. I would like to have this behavior on iPhone app as well.

＄ flutter run
Multiple devices found:
...
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"): 2
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I noticed that primary is mentioned in document physics.

    Defaults to matching platform conventions. Furthermore, if primary is false, then the user cannot scroll if there is insufficient content to scroll, while if primary is true, they can always attempt to scroll.

    And below is mentioned in primary.

    When this is true, the scroll view is scrollable even if it does not have sufficient content to actually scroll. Otherwise, by default the user can only scroll the view if it has sufficient content. See physics.

    Just add primary: false,.

    import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        body: GridView.count(
          primary: false, // 👈👈👈
          crossAxisCount: 2,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          children: const [
            Text("A"),
            Text("B"),
          ],
        ),
      )
    );
  }
}

    However, once the iPhone is turned sideways, which makes the content size larger than the screen size and scrollable, and then turned back to portrait, it seems to be scrollable(bounce) for some reason (my app is fixed to portrait, so it's not a problem at the moment).


  2. 0

    I use the responsive_builder library when I want to use different logics on different devices.

    You can use the following code as an answer to your question.

    ScreenTypeLayout(
  // if device is mobile phone..
  mobile: GridView.count(
    physics: const NeverScrollableScrollPhysics(),
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    children: const [
      Text("A"),
      Text("B"),
    ],
  ),
  // if device is tablet..
  tablet: GridView.count(
    physics: const BouncingScrollPhysics(),
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    children: const [
      Text("A"),
      Text("B"),
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search