Flutter: How to adjust a widget to avoid android's bottom Navigation bar

Question

In my register screen, part of the content(at the bottom) is hidden by the phone's bottom navbar. The content is only visible when I close the bottom navbar.

What I want to achieve is, whenever the bottom navbar is displayed on the phone, I want content that is hidden by it to be pushed upwards for visibility and whenever the navbar is removed from sight, I want the content to remain at it's position.

Here is my code.

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,
        child: Padding(
          padding:
              EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text(
                  "Register Account",
                  style: headingStyle,
                ),
                Text(
                  "Complete your details or continue \nwith social media.",
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: SizeConfig.screenHeight * 0.04), // 4%
                SignUpForm(),
                SizedBox(height: SizeConfig.screenHeight * 0.03), // 3%
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  SocialCard(
                    icon: "assets/icons/google-icon.svg",
                    press: () {},
                  ),
                  SocialCard(
                    icon: "assets/icons/facebook-2.svg",
                    press: () {},
                  ),
                  SocialCard(
                    icon: "assets/icons/twitter.svg",
                    press: () {},
                  )
                ]),
                SizedBox(height: getProportionateScreenHeight(15)),
                Text(                                <--- HIDDEN FROM VIEW
                  "By continuing you confirm that you agree with our Term and Condition",
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// Get Screen Size
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;
  }
}

// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;
}

Visual of the problem

score 1 · Answer 1 · answered Oct 17 '20 at 07:08

Any special requirement for using a SingleChildScrollView? If not can you please try the code below, if this works for you, here's what it does

Replace SigleChildScrollView with Container
Wrap your SignupForm() inside an Expanded() widget.

Here is the code -

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,
        child: Padding(
          padding:
              EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
          child: Container(
            child: Column(
              children: [
                Text(
                  "Register Account",
                  style: headingStyle,
                ),
                Text(
                  "Complete your details or continue \nwith social media.",
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: SizeConfig.screenHeight * 0.04), // 4%
                Expanded(child: SignUpForm()),
                SizedBox(height: SizeConfig.screenHeight * 0.03), // 3%
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  SocialCard(
                    icon: "assets/icons/google-icon.svg",
                    press: () {},
                  ),
                  SocialCard(
                    icon: "assets/icons/facebook-2.svg",
                    press: () {},
                  ),
                  SocialCard(
                    icon: "assets/icons/twitter.svg",
                    press: () {},
                  )
                ]),
                SizedBox(height: getProportionateScreenHeight(15)),
                Text(    
                  "By continuing you confirm that you agree with our Term and Condition",
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// Get Screen Size
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;
  }
}

// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;
}

This solves part of the problem, not all. When I use the keyboard there is an overflow of pixels that can only be solved by making the widget scrollable with say ``SingleChildScrollView``. How can you solve that? — Shadow Walker, Oct 17 '20 at 07:37
Can you add some more screenshots of overflow issue when using keyboard? — Tanuj, Oct 17 '20 at 10:07

score 0 · Answer 2 · answered Oct 17 '20 at 07:25

0

Use SafeArea Widget to avoid the bottom navigation bar. To know more about SafeArea widget click here

answered Oct 17 '20 at 07:25

Syed Wajid

31
2

If you check my code, you'll realize i already have ``SafeArea`` – Shadow Walker Oct 17 '20 at 07:40
sry ,I didn't saw that – Syed Wajid Oct 17 '20 at 10:54

score 0 · Answer 3 · answered Oct 20 '20 at 10:33

Add height on your SizedBox like this

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,

        height: MediaQuery.of(context).size.height. // Add this line

        child: Padding(
          padding:
              EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text(
                  "Register Account",
                  style: headingStyle,
                ),
                Text(
                  "Complete your details or continue \nwith social media.",
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: SizeConfig.screenHeight * 0.04), // 4%
                SignUpForm(),
                SizedBox(height: SizeConfig.screenHeight * 0.03), // 3%
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  SocialCard(
                    icon: "assets/icons/google-icon.svg",
                    press: () {},
                  ),
                  SocialCard(
                    icon: "assets/icons/facebook-2.svg",
                    press: () {},
                  ),
                  SocialCard(
                    icon: "assets/icons/twitter.svg",
                    press: () {},
                  )
                ]),
                SizedBox(height: getProportionateScreenHeight(15)),
                Text(                                <--- HIDDEN FROM VIEW
                  "By continuing you confirm that you agree with our Term and Condition",
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Flutter: How to adjust a widget to avoid android's bottom Navigation bar

3 Answers3