content: import 'package:flutter/material.dart';
  import 'package:responsive_design/layouts/res/my_colors.dart';
  
  class FractionallySizedBoxLayout extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  FractionallySizedWidget(widthFactor: 0.4),
                ],
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  FractionallySizedWidget(widthFactor: 0.6),
                ],
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  FractionallySizedWidget(widthFactor: 0.8),
                ],
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  FractionallySizedWidget(widthFactor: 1.0),
                ],
              ),
            ],
          ),
        ),
      );
    }
  }
  
  class FractionallySizedWidget extends StatelessWidget {
    final double widthFactor;
    FractionallySizedWidget({@required this.widthFactor});
  
    @override
    Widget build(BuildContext context) {
      return Expanded(
        child: FractionallySizedBox(
          alignment: Alignment.centerLeft,
          widthFactor: widthFactor,
          child: Container(
            decoration: BoxDecoration(
              color: MyColors.darkGreen,
              border: Border.all(color: Colors.white),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                '${widthFactor * 100}%',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      );
    }
  }
  