I'm learning flutter to make an app. Here I'm trying to make a page to show the full post. The problem is that the page isn't scrolling as a single unit.

class SinglePostPage extends StatefulWidget {
  final Post? post;
  const SinglePostPage({Key? key, this.post}) : super(key: key);

  @override
  State<SinglePostPage> createState() => _SinglePostPageState();
}

class _SinglePostPageState extends State<SinglePostPage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            margin: const EdgeInsets.only(top: 22.5),
            padding: const EdgeInsets.fromLTRB(0, 5, 0, 6),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const BackButton(),
                    Row(
                      children: [
                        InkWell(
                          onTap: () {
                            showDialog(...);
                          },
                          child: CircleAvatar(...),
                        Container(
                          padding: const EdgeInsets.only(left: 5.4),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              GestureDetector(
                                onTap: () {
                                  showDialog(...);
                                },
                                child: Text(
                                  widget.post!.author[0].profileName,
                                ),
                              ),
                              const SizedBox(height: 4),
                              Text(
                                showTimeAgo(widget.post!.postTime).toString(),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    PopupMenuButton(
                      icon: const Icon(Icons.more_vert),
                      itemBuilder: (context) => [...],
                ),
                Container(
                  margin: const EdgeInsets.fromLTRB(12, 9, 12, 3),
    // when the text is longer than the screen height it showed RenderFlex overflowed error so I put constraints. how to show it full and make this scroll
                  constraints: BoxConstraints( 
                      maxHeight: MediaQuery.of(context).size.height * 0.54,
                      minHeight: 50),
                  child: SingleChildScrollView(
                    child: Text(
                      widget.post!.postText,
                      textAlign: TextAlign.start,
                    ),
                  ),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    if (widget.post!.postMedia.isNotEmpty)
                      CarouselSlider.builder(...),
                    const SizedBox(height: 4.5),
                    if (widget.post!.postMedia.length > 1)
                      buildDotIndicator(widget.post!.postMedia),
                  ],
                ),
              ],
            ),
          ),
          Container(
            // post reactions row
          ),
          CommentBodyWidget(
            postId: widget.post!.postId,
          ),
        ],
      ),
    );
  }
}

I looked up for other answers and tried wrapping it with SingleChildScrollView, but it didn't work , and ListView with shrinkWrap: true also gave 'Incorrect use of ParentDataWidget' error.

CommentBodyWidget has a listview builder. It's scrolling on its own but the widget above isn't scrolling along with it.

How can I show this whole page and scroll together without having to limit the long post in a constrained container? Please help.

CodePudding user response：

Pass SingleChildScrollView as body of your scaffold. Also shrinkwrap: true for the ListView is recommended so that it only takes up as much space as required, which will avoid unbounded height errors.

So instead of

...
Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
...

Do this

...
Widget build(BuildContext context) 
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(...

CodePudding user response：

You can wrap body Column with SingleChildScrollView and use shrinkWrap: true, and use physics: NeverScrollableScrollPhysics(),. This will solve the issue.

return Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        //...

        ListView.builder(
          itemCount: itemlength,
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            return Text("item $index");
          },
        ),

        /// instead of listView
        ...List.generate(itemlength, (index) => Text("itemWidget"))
      ],
    ),
  ),
);

But I will encourage you to check CustomScrollView.

CodePudding user response：

I recommend you to use CustomScrollView.

Try this:

CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column("""HERE PUT YOUR CODE""")
    )]
),