FractionallySizedBoxSpace

fsb.dart

import 'package:flutter/material.dart';

void main() => runApp(FractionallySizedBoxWidgetSpace());

class FractionallySizedBoxWidgetSpace extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Responsive',
      debugShowCheckedModeBanner: false, 
      home: Scaffold(
        appBar: AppBar(
          title: Text('FractionallySizedBox - Space'),
          centerTitle: true,
        ),
        body: FractionallySizedBoxSpace(),
      ),
    );
  }
}

class FractionallySizedBoxSpace extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        WidgetBlue(),
        Flexible(
          child: FractionallySizedBox(
            heightFactor: 0.2,
          ),
        ),
        WidgetRed(),
      ],
    );
  }
}

class WidgetBlue extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 5,
      color: Colors.blue,
    );
  }
}

class WidgetRed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 5,
      color: Colors.red,
    );
  }
}