Flutter Scroll View

Question

I'm having problems making part of my web app scrollable. I have tried multiple solutions and none work. Any ideas?

Flexible(
          flex: 3,
          child: Align(
            alignment: Alignment.topRight,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                        'Stories',
                        style: TextStyle(
                            color: Palette.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 16
                        )
                    ),
                  ),
                  Stories(
                    currentUser: currentUser,
                    stories: stories,
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                    child: RecommendedCards(),
                  ),
                  Expanded(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: RecommendedFollowingList(
                          users: recommendedFollow
                      ),
                    )
                  ),
                  PolicyView()
                ],
              ),
            ),
          ),
        ),

That's my code which I'm having trouble making scrollable. I keep getting an error when I try to add a SingleChildScrollView. That says the following

The hitTest() method was called on this RenderBox: _RenderScrollSemantics#0e2ee relayoutBoundary=up10: needs compositing creator: _ScrollSemantics-[GlobalKey#1a713] ← Scrollable ← PrimaryScrollController ← SingleChildScrollView ← Align ← Flexible ← Row ← DesktopScreen ← LayoutBuilder ← Responsive ← _BodyBuilder ← MediaQuery ← ⋯ parentData: offset=Offset(0.0, 0.0) (can use size) constraints: BoxConstraints(0.0<=w<=332.0, 0.0<=h<=621.0) semantic boundary size: MISSING Although this node is not marked as needing layout, its size is not set. A RenderBox object must have an explicit size before it can be hit-tested. Make sure that the RenderBox in question sets its size during layout. <

Below is the full code of the view.

class DesktopScreen extends StatelessWidget {
  final TrackingScrollController scrollController;

  const DesktopScreen({
    Key key,
    @required this.scrollController,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          flex: 3,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: ContactsList(users: onlineUsers,
              ),
            ),
          ),
        ),
        Container(
          width: 600.0,
          child: CustomScrollView(
            controller: scrollController,
            slivers: [
              SliverToBoxAdapter(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
                  child: CreatePostContainer(currentUser: currentUser),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (context, index) {
                    final Post post = posts[index];
                    return PostContainer(post: post);
                  },
                  childCount: posts.length,
                ),
              ),
            ],
          ),
        ),
        Flexible(
          flex: 3,
          child: Align(
            alignment: Alignment.topRight,
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
                child: Column(
                  children: [
                    Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                          'Stories',
                          style: TextStyle(
                              color: Palette.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 16
                          )
                      ),
                    ),
                    Stories(
                      currentUser: currentUser,
                      stories: stories,
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                      child: RecommendedCards(),
                    ),
                    Expanded(
                      child: Align(
                        alignment: Alignment.centerLeft,
                        child: RecommendedFollowingList(
                            users: recommendedFollow
                        ),
                      )
                    ),
                    PolicyView()
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Answer 1

It is very simple, wrap your main widget with SingleChildScrollview.

SingleChildScrollView(
child: Padding(
                  padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
                  child: Column(
                    children: [
                      Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                            'Stories',
                            style: TextStyle(
                                color: Palette.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 16
                            )
                        ),
                      ),
                      Stories(
                        currentUser: currentUser,
                        stories: stories,
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                        child: RecommendedCards(),
                      ),
                      Expanded(
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: RecommendedFollowingList(
                              users: recommendedFollow
                          ),
                        )
                      ),
                      PolicyView()
                    ],
                  ),
                ),
              )

Answer 2

You can wrap your widget using SingleChildScrollView`.

A box in which a single widget can be scrolled.