flutter – How to use FractionallySizedBox

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
          theme: ThemeData(primarySwatch: Colors.green),
          home: Scaffold(
              appBar: AppBar(
                  title: const Text("Flutter - FractionallySizedBox")
              ),
              body: bodyContent(),
              backgroundColor: Colors.green.shade100
          )
      )
  );
}

bodyContent(){
  return
    Container(
        color: Colors.black12,
        width: double.infinity,
        height: double.infinity,
        margin: const EdgeInsets.all(16),
        child: FractionallySizedBox(
            // 50 percent of available free space in width
            widthFactor: 0.5,
            // 25 percent of available free space in height
            heightFactor: 0.25,
            alignment: Alignment.bottomCenter,
            child: Container(color: Colors.pink)
        )
    );
}

More flutter tutorials

• flutter – Table row decoration
• flutter – For loop inside widget children
• flutter dart – For loop
• flutter – How to create ExpansionPanelList
• flutter – ExpansionPanelList example
• flutter – Remove ExpansionTile border
• flutter – ExpansionTile color
• flutter – ExpansionTile remove trailing icon
• flutter – How to use Padding widget
• flutter – Padding background color
• flutter – Padding percentage
• flutter – Padding between column items
• flutter – Padding between row items
• flutter – How to use SizedBox
• flutter – SizedBox background color