Question 76936 in Flutter Question posted in
The official Flutter documentation can be found here.

How to expand height of Column wrapped by SingleChildScrollView properly – Flutter

I wanted to make a login form where the fields will be in a column of a specific width.
I wanted to be able to scroll the entire page when the window size is smaller.

import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
    resizeToAvoidBottomInset: false,
    backgroundColor: Colors.blue,
    body: SingleChildScrollView(
      child: Center(
        child: Container(
          // height:  MediaQuery.of(context).size.height ,
          width: 500,
          decoration: BoxDecoration(
              color: Color(0xfffee6dc),
              border: Border.all(
                  width: 0,
                  style: BorderStyle.none
              ),
              borderRadius: BorderRadius.all(Radius.circular(20))),
          child: Column(
            children: [
              Text("TEST"),
              SizedBox(height: 50,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
              TextFormField(),
              SizedBox(height: 10,),
            ],
          ),
        ),
      ),
    ));
}
}

This works, but when I maximize the window, the height of the container doesn’t adjust to the size of the window, only to its children:

enter image description here

When I set the height to: MediaQuery.of(context).size.height
i’s better, but now when i shrink the window it throws me an error:
A RenderFlex overflowed by ** pixels on the bottom.

enter image description here

Tags:

2

Answers


  1. 0

    If you like to adjust the height, it should be on top widget constraints .

    
class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.blue,
        body: Center(
          child: Container(
            alignment: Alignment.topCenter,
            constraints: BoxConstraints.tight(Size.fromWidth(600)),
            decoration: BoxDecoration(
              color: Color(0xfffee6dc),
              border: Border.all(width: 0, style: BorderStyle.none),
              borderRadius: const BorderRadius.all(
                Radius.circular(20),
              ),
            ),
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("TEST"),
                  for (int i = 0; i < 10; i++) ...[
                    TextFormField(),
                    SizedBox(
                      height: 10,
                    ),
                  ],
                ],
              ),
            ),
          ),
        ));
  }
}
    Login or Signup to reply.
  2. 0

    you need to create new class name sizeconfig

    Code of sizeconfig Class:

    import 'package:flutter/material.dart';

class SizeConfig {
  static MediaQueryData? _mediaQueryData;
  static double? screenWidth;
  static double? screenHeight;
  static double? defaultSize;
  static Orientation? orientation;
  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData?.size.width;
    screenHeight = _mediaQueryData?.size.height;
    orientation = _mediaQueryData?.orientation;
    defaultSize = orientation == Orientation.landscape
        ? screenHeight! * 0.024
        : screenWidth! * 0.024;
  }
}

    Now you need to call this call inside build method:

    Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(

    Now its Work Fine

    **This is your Actual Class Code:**
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'confriguration/size_config.dart';
class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.blue,
        body: Container(
          color:Colors.redAccent,
          child: SingleChildScrollView(
            child: Center(
              child: Container(
                // height:  MediaQuery.of(context).size.height ,
                width: SizeConfig.screenWidth! * 0.9,
                decoration: BoxDecoration(
                    color: Color(0xfffee6dc),
                    border: Border.all(
                        width: 0,
                        style: BorderStyle.none
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                child: Column(
                  children: [
                    Text("TEST"),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01,),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                    TextFormField(),
                    SizedBox(height: SizeConfig.screenHeight! * 0.01),
                  ],
                ),
              ),
            ),
          ),
        ));
  }
}

    Here is video link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search