BoxConstraints forces an infinite height when using DraggableScrollableSheet

Question

I find the below error when trying to add DraggableScrollableSheet and Sliver:

The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

The offending constraints were: BoxConstraints(w=1440.0, h=Infinity)
The relevant error-causing widget was: 
  DraggableScrollableSheet file:///Users/mac/Desktop/Click%20Project/l7/lib/screens/main/view/main_screen.dart:39:19
When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49  throw_
packages/flutter/src/rendering/box.dart 517:9                                 throwError
packages/flutter/src/rendering/box.dart 561:80                                <fn>
packages/flutter/src/rendering/box.dart 564:14                                debugAssertIsValid
packages/flutter/src/rendering/object.dart 1679:23                            layout
...
The following RenderObject was being processed when the exception was fired: RenderConstrainedBox#3fd13 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(0.0<=w<=1440.0, 0.0<=h<=Infinity)
...  size: MISSING
...  additionalConstraints: BoxConstraints(biggest)
RenderObject: RenderConstrainedBox#3fd13 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=1440.0, 0.0<=h<=Infinity)
  size: MISSING
  additionalConstraints: BoxConstraints(biggest)
...  child: RenderFractionallySizedOverflowBox#a7974 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: <none>
...    constraints: MISSING
...    size: MISSING
...    alignment: Alignment.bottomCenter
...    textDirection: ltr
...    widthFactor: pass-through
...    heightFactor: 0.5
...    child: _RenderScrollSemantics#c849d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      semantic boundary
...      size: MISSING
...      child: RenderPointerListener#fea50 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        behavior: deferToChild
...        listeners: signal
...        child: RenderSemanticsGestureHandler#04607 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          behavior: opaque
...          gestures: <none>
====================================================================================================

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
Assertion failed: file:///Users/mac/Developer/flutter/packages/flutter/lib/src/rendering/box.dart:1930:12
hasSize
"RenderBox was not laid out: RenderConstrainedBox#3fd13 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"

and this is the below code which contains the eror:

import 'package:flutter/material.dart';
import 'package:l7/screens/home/view/home_screen.dart';
import 'package:l7/screens/main/view_model/main_view_model.dart';

import '../../BaseScreen.dart';
import 'components/header.dart';
import 'components/intro_main_screen_widget.dart';
import 'components/side_menu.dart';

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BaseScreen<MainViewModel>(
      onModelReady: (mainViewModel) {},
      onFinish: (mainViewModel) {},
      builder: (context, viewModel, _) {
        return Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/blog_bg.png"),
              fit: BoxFit.fill,
            ),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            key: viewModel.scaffoldKey,
            drawer: Theme(
              data: Theme.of(context)
                  .copyWith(canvasColor: Colors.white.withOpacity(0.6)),
              child: SideMenu(),
            ),
            body: Container(
              color: Colors.black.withOpacity(0.35),
              height: MediaQuery.of(context).size.height,
              child: Column(
                children: [
                  Header(),
                  DraggableScrollableSheet(
                    builder: (BuildContext context,
                            ScrollController scrollController) =>
                        NestedScrollView(
                      controller: scrollController,
                      headerSliverBuilder:
                          (BuildContext context, bool innerBoxIsScrolled) => [
                        SliverToBoxAdapter(
                          child: IntroMainScreenWidget(),
                        ),
                      ],
                      body: CustomScrollView(
                        slivers: [
                          SliverList(
                            delegate: SliverChildBuilderDelegate(
                              (context, index) => Column(
                                children: [
                                  HomeScreen(),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

and this is the below IntroMainScreenWidget:

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:l7/services/responsive.dart';
import 'package:l7/utils/constants.dart';
import 'package:l7/utils/texts.dart';

class IntroMainScreenWidget extends StatelessWidget {
  const IntroMainScreenWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [

        SizedBox(height: kDefaultPadding * 2),
        Container(
          padding: EdgeInsets.symmetric(vertical: 15),
          color: Colors.black.withOpacity(0.35),
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              largeText(
                  tr('welcome_to_our_blog'),
                  context,
                  mobileFontSize: 30,
                  webTextColor: Colors.white,
                  mobileTextColor: Colors.white
              ),
              Padding(
                padding:
                const EdgeInsets.symmetric(vertical: kDefaultPadding),
                child: smallText(
                  tr('blog_intro'),
                  context,
                  textColor: Colors.white,
                ),
              ),
              FittedBox(
                child: TextButton(
                  onPressed: () {},
                  child: Row(
                    children: [
                      mediumText(
                        tr('learn_more'),
                        context,
                      ),
                      SizedBox(width: kDefaultPadding / 2),
                      Icon(
                        Icons.arrow_forward,
                        color: Colors.white,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        if (Responsive.isDesktop(context))
          SizedBox(height: kDefaultPadding),
      ],
    );
  }
}

and this is the below HomeScreen():

import 'package:flutter/material.dart';
import 'package:l7/screens/BaseScreen.dart';
import 'package:l7/screens/home/viewmodel/home_view_model.dart';

import 'components/info_widget.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BaseScreen<HomeViewModel>(
      onModelReady: (homeViewModel) {},
      onFinish: (_) {
        print(' home screen finished');
      },
      builder: (context, homeViewModel, child) {
        print(' home screen started');
        return  InfosPart();
      },
    );
  }
}

as the below related repository in github https://github.com/MHarooney/L7

I hope some one could help me :D..

Answer 1

By wrapping DraggableScrollableSheet with Expanded fixed the height issue, gitHub