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

Flutter: How to make scroll of each Column widget in the Wrap widget?

ex:

  return SingleChildScrollView(
    child: Column(
      children: [
        w1,
        w2,
        Wrap(
          children: [
            c1,
            c2,
          ],
        ),
      ],
    ),
  );

It works fine when the screen is lower than the width of these items.
But when it’s not, I want to separate the scroll bar of c1 and c2.
Can I do this without using a responsive widget like LayoutBuilder or using the height of other items (w1 and w2)?

I tried to wrap the SingleChildScrollView of each item in the Wrap, but it did not help.

  return SingleChildScrollView(
    child: Column(
      children: [
        w1,
        w2,
        Expanded(
          child: Wrap(
            children: [
              SingleChildScrollView(child: c1),
              SingleChildScrollView(child: c2),
            ],
          ),
        ),
      ],
    ),
  );
Tags:

2

Answers


  1. 0 
    If you want each column in the Wrap widget to have its own scrolling functionality, you can wrap each column with a SingleChildScrollView widget

Wrap(
  children: [
    SingleChildScrollView(
      child: Column(
        children: [
          w1,
          w2,
        ],
      ),
    ),
    SingleChildScrollView(
      child: Column(
        children: [
          c1,
          c2,
        ],
      ),
    ),
  ],
)
    Login or Signup to reply.
  2. 0

    Just put SingleChildScrollView into Container with fixed height.

    So, your code will be like below:

    return SingleChildScrollView(
    child: Column(
      children: [
        w1,
        w2,
        Expanded(
          child: Wrap(
            children: [
                 Container(
                    height: 100,
                    child: SingleChildScrollView(
                      child: SingleChildScrollView(child: c1),
                    ),
                  ),
                 Container(
                    height: 100,
                    child: SingleChildScrollView(
                      child: SingleChildScrollView(child: c1),
                    ),
                  ),
            ],
          ),
        ),
      ],
    ),
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search