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.

CodePudding user response：

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.