How to Use Expanded in a SingleChildScrollView ?

· 3 min read
How to Use Expanded in a SingleChildScrollView
How to Use Expanded in a SingleChildScrollView

Expanded Widget is a Widget that expands a child of a Row WidgetColumn Widget, or Flex so that the child fills the available space. So now in this article, We will learn about How to Use Expanded in a SingleChildScrollView?

How to Use Expanded in a SingleChildScrollView?

When Column Widget is inside a view that is scrollable, the column is trying to shrink-wrap its content but since you used Expanded as a child of the column it is working opposite to the column trying to shrink-wrap its children. This is causing this error because these two directives are completely opposite to each other.

Users can also try the Layout Builder Class below Code Snippet.

LayoutBuilder(
  builder: (context, constraint) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraint.maxHeight),
        child: IntrinsicHeight(
          child: Column(
            children: <Widget>[
              Text("Header"),
              Expanded(
                child: Container(
                  color: Colors.red,
                ),
              ),
              Text("Footer"),
            ],
          ),
        ),
      ),
    );
  },
)

User can also give a try to CustomScrollView Widget Code Snippet will look like a below:

CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: <Widget>[
          const Text('Header'),
          Expanded(child: Container(color: Colors.red)),
          const Text('Footer'),
        ],
      ),
    ),
  ],
)

User can Simply Wrap a SingleChildScrollView in a Center or Align Widget like the below:

Align(
    alignment: Alignment.topCenter,
    child: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          ...
        ]
      }
    }
  }

or

Center(
  child: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        ...
      ]
    }
  }
}

Conclusion:

In this article, we have been through How to Use Expanded Widget in a SingleChildScrollView Widget?

Thanks for Reading !!! Keep Fluttering !!!

Drop us your valuable feedback to serve you better.

Do Let us know if you need more support with Flutter Development? We would like to assist you with the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply