How to make a container scroll-able?

user_11302822 0
Viewed 40

The current state of my code:

@override
Widget build(BuildContext context) {
  return Container(
      decoration: Grad2(),
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // ...
        ],
      ),
    );
}

Which resulted in this beautiful Login page, but there is a problem (Bottom overflowed by 45 pixels when keyboard is up):

No problem Login page

Bottom overflowed by 45 pixels when keyboard is up

So i tried to use the SingleChildScrollView but then it resulted in a blank screen:

@override
Widget build(BuildContext context) {
 return SingleChildScrollView(
  child: ConstrainedBox(
    constraints: BoxConstraints(minHeight: BoxConstraints().maxHeight),
    child: Container(
      decoration: Grad2(),
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // ...
        ],
      ),
    ),
  ),
);
}

But what I've got instead is a white screen. May I know why?

flutter-layout flutter
2 Answers

Try this:

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
      child: Container(
          height: MediaQuery.of(context).size.height,
          decoration: Grad2(),
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // ...
            ],
          ),
       ),
    );
}
user_29243230

Turns out, I could make the Container the height of the display, which works by setting the height of the Container to MediaQuery.of(context).size.height. In conclusion, use

@override
Widget build(BuildContext context) {
 return SingleChildScrollView(
  child: Container(
    height: MediaQuery.of(context).size.height,
    decoration: Grad2(),
    padding: EdgeInsets.all(16),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // ...
      ],
    ),
  ),
);
}
user_113028220
Related