FractionallySizedBox widget in Attributes

The FractionallySizedBox widget in Flutter is a flexible container that sizes its child widget based on a fraction of the available space in its parent widget. This widget is particularly useful when you want to create responsive layouts or specify dimensions relative to the available screen size.

Attributes of the FractionallySizedBox widget typically include:

1. widthFactor: A double value between 0.0 and 1.0 that represents the fraction of the parent's width that the child should occupy.

2. heightFactor: A double value between 0.0 and 1.0 that represents the fraction of the parent's height that the child should occupy.

3. alignment: An optional parameter that specifies how the child widget should be aligned within the available space.

Now, let's dive into an example of how to use the FractionallySizedBox widget in a Flutter application:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FractionallySizedBox Widget Example',
      home: FractionallySizedBoxDemo(),
    );
  }
}

class FractionallySizedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FractionallySizedBox Widget Example'),
      ),
      body: Center(
        child: Container(
          color: Colors.grey,
          width: 300,
          height: 300,
          child: FractionallySizedBox(
            widthFactor: 0.5,
            heightFactor: 0.5,
            alignment: Alignment.center,
            child: Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  'FractionallySizedBox Example',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this example, we've created a Flutter application with a FractionallySizedBoxDemo widget. Inside this widget, we have a Container with a fixed width and height of 300 pixels. Within the Container, we've placed a FractionallySizedBox widget as its child. This FractionallySizedBox widget occupies half the width and half the height of its parent Container (since widthFactor and heightFactor are both set to 0.5). The child of the FractionallySizedBox is another Container with a blue background color and text displaying "FractionallySizedBox Example", which is centered horizontally and vertically within the FractionallySizedBox.

This example demonstrates how the FractionallySizedBox widget can be used to create responsive layouts by specifying dimensions relative to the available space.