Hello friends, In today’s tutorial we would learn about a new widget in flutter known as FractionallySizedBox. FractionallySizedBox is used to create a single Child widget into percentage width and height form. In FractionallySizedBox we can define the width and height into point format like 0.1, 0.2, 0.3 … 0.9 and 1. Here 0.1 represents 10 % width or height of Parent. So now you understand how it works. The main properties we would use in this widget is widthFactor and heightFactor. So in this tutorial we would learn about Example of FractionallySizedBox Widget in Flutter.
Contents in this project Example of FractionallySizedBox Widget in Flutter :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method, Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating MyApp extends StatelessWidget class. This is our main Class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Here we would call our main Scaffold widget -> Column widget. Now I am making 2 Expanded widget with Flex 6 and Flex 4. It would divide our View into 2 Spaces. With Flex 6 contains 60% screen space and Flex 4 will cover remaining 40% of screen. Now inside the Expanded widget we would make 1 FractionallySizedBox widget with widthFactor: 0.5 and heightFactor: 0.5. It would make our child widget into 50% height and 50% width in the Expanded widget. Same as in other Expanded widget we would make the FractionallySizedBox widget with widthFactor: 0.5 and heightFactor: 0.5.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( children: <Widget>[ Expanded( flex: 6, child: Container( alignment: Alignment.center, color: Colors.lightBlue, child: FractionallySizedBox( widthFactor: 0.5, heightFactor: 0.5, child: Container( color: Colors.green, ), ))), Expanded( flex: 4, child: Container( alignment: Alignment.center, color: Colors.pink, child: FractionallySizedBox( widthFactor: 0.5, heightFactor: 0.5, child: Container( color: Colors.green, ), ))), ], )))); } |
5. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( children: <Widget>[ Expanded( flex: 6, child: Container( alignment: Alignment.center, color: Colors.lightBlue, child: FractionallySizedBox( widthFactor: 0.5, heightFactor: 0.5, child: Container( color: Colors.green, ), ))), Expanded( flex: 4, child: Container( alignment: Alignment.center, color: Colors.pink, child: FractionallySizedBox( widthFactor: 0.5, heightFactor: 0.5, child: Container( color: Colors.green, ), ))), ], )))); } } |
Screenshot :-
