FractionallySizedBox in Flutter

FractionallySizedBox is a widget that scales its child widgets to a fraction of the total available space.
This is especially useful when creating responsive layouts where the widget's size  is a fraction of the parent widget's size.

There Are Some Common Attributes for FractionallySizedBox

Here's a simple example of using a FractionallySizedBoxin Flutter:

File open lib->main.dart file −

import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text('FractionallySizedBox Example',
              style:TextStyle(fontSize: 20,color: Colors.white)),
          ),
          body: MyApp(),
        ),
      )
  );
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return
      Center(
        child: FractionallySizedBox(
          widthFactor: 0.9, // Fraction of the available width (0.0 to 1.0)
          heightFactor: 0.2, // Fraction of the available height (0.0 to 1.0)
          child: Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'Micro Tutorial',
                style: TextStyle(fontSize: 20.0, color: Colors.white),
              ),
            ),
          ),
        ),
      );

  }
}

Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.

Output: