Bottom Overflowed by 138 pixels if i appBar property

Question

Can anybody tell me, how to split three different Container by percentage?(For example : 0.1,0.8,0.2)

Here is my Code:

import 'package:flutter/material.dart';
import '../../../constants.dart';
import '../../../size_config.dart';

class HomeScreen extends StatelessWidget {
  static String routeName = "/HomeScreen";
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // You have to call it on your starting screen
    SizeConfig().init(context);
    AppBar appBar = AppBar(
      shadowColor: Colors.white70,
      elevation: 10,
      title: const Text(
        'WELCOME TO Flutter',
        style: TextStyle(
          color: kPrimaryColor,
          fontWeight: FontWeight.bold,
        ),
      ),
      backgroundColor: Colors.white,
      leading: Container(),
    );
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: appBar,
      body: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return SafeArea(child:

    Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          width: SizeConfig.screenWidth,
          height: SizeConfig.screenHeight * 0.1,
          color: Colors.orange,
        ),
        Container(
          width: SizeConfig.screenWidth,
          height: SizeConfig.screenHeight * 0.8 ,
          color: Colors.greenAccent,
        ),
        const Spacer(),
        Container(
          width: SizeConfig.screenWidth,
          height: SizeConfig.screenHeight * 0.1 ,
          color: Colors.indigo,
        ),
      ],
    ),
    );
  }
}

class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late 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;
}

// Get the proportionate height as per screen size
double getProportionateScreenWidth(double inputWidth) {
  double screenWidth = SizeConfig.screenWidth;
  // 375 is the layout width that designer use
  return (inputWidth / 375.0) * screenWidth;
}

My home screen content should not scroll, page should be fit based on device height. We need appBar as well, this issue occurs if we add appBar.

Answer 1

you can use Expanded widget with flex OR SingleChildScrollView or both together.

You can use Flex if you want your widget to fit automatically on the screen. If you want to make your widget scrollable, you can scroll your widget using SingleChildScrollview.

Example of flex is below.

class FlexDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              color: Colors.red,
            ),
          ),
          Expanded(
            flex: 8,
            child: Container(
              width: double.infinity,
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

with SingleChildScrollView example.

 class ScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Expanded(
            flex: 10,
            child: Container(
              width: double.infinity,
              color: Colors.red,
            ),
          ),
          Expanded(
            flex: 80, // you can aslo use flex from 100
            child: Container(
              width: double.infinity,
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 10,
            child: Container(
              width: double.infinity,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

You can use Expanded Widget with flex property in your Column. You don't need SizeConfig Class. Replace your HomePage build method below code:

@override
Widget build(BuildContext context) {
return SafeArea(
  child: Column(
    children: [
      Expanded(
        flex: 1,
        child: Container(
          width: double.infinity,
          color: Colors.orange,
        ),
      ),
      Expanded(
        flex: 8,
        child: Container(
          width: double.infinity,
          color: Colors.greenAccent,
        ),
      ),
      Expanded(
        flex: 1,
        child: Container(
          width: double.infinity,
          color: Colors.indigo,
        ),
      ),
    ],
  ),
);
}

More information on Expanded you can find here. Instead of manual calculations for percentage occupancy of each widget inside Column or Row, Flutter does it for you with the flex property.