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

How to use scroll view and gesture detect on the one widget page in flutter?

I’ve faced a problem with scrolling on my flutter application. I’ve created a widget with SingleChildScrollView as a top of the widget in the tree. Then I’ve added GestureDetector to manipulate over my map. Rest of the screen will contain a simple column or text (but a lot of them so I need to scroll). This is a simple layout I want to achive Desired layout.

Pseudocode:

SingleChildScrollView(
  child: Column(
    children:[
      ScreenTitle("Title"),
      GestureDetector(child: Map()),
      Text("Lorem ipsum"),
      Text("Lorem ipsum"),
      ...
    ]
  )
);

The problem is with the scroll priority. When I tap horizontly on Map widget everything works, but if I tap vertically, SingleChildScrollView catch this gesture and scroll entire page. I want to catch all gesture for my Map and only if user tap somewhere else it should be delegated to SingleChildScrollView.

Of course without SingleChildScrollView, my GestureDetect works fine but… the text is behinde the visible area.

I want to catch every Gesture on my map widget and delegate to SingleChildScrollView only events not from Gesture.
I tried to remove SCSV and replaced it by ListView (the same problem).

Tags:

2

Answers


  1. 0

    If you want your map to be independent from your SingleChildScrollView then extract it out of it, like this:

    Column(
  children: <Widget>[
    GestureDetector(
      child: Map(),
    ),
    Expanded(
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[],
        )
      ),
    ),
  ],
)

    It’s important to wrap the SingleChildScrollView with Expanded because other wise you will get render errors.

    Login or Signup to reply.
  2. 0

    To achieve the desired layout, you can wrap your Column widget inside a ListView widget. The ListView will allow you to scroll through the column’s children, and the GestureDetector will allow you to manipulate the map.

    Here’s an example of how you can achieve the desired layout:

     SingleChildScrollView(
  child: ListView(
    physics: NeverScrollableScrollPhysics(), // disable scrolling of the ListView
    shrinkWrap: true, // allow the ListView to take up only the necessary space
    children: [
      ScreenTitle("Title"),
      GestureDetector(
        child: Map(),
        behavior: HitTestBehavior.opaque, // make sure the gesture detector is opaque to avoid conflicts with scrolling
      ),
      Text("Lorem ipsum"),
      Text("Lorem ipsum"),
      // more text widgets
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search