Flutter has a inbuilt package named as MediaQuery. MediaQuery class is used to get current media screen dimensions known as device screen size. There is a widget named as FractionallySizedBox in flutter which directly supports width height in percentage format but there is a loop in FractionallySizedBox widget. This widget can only be used as single child alone and you cannot use it with multiple children. So here comes our this tutorial with solution for making each child element width height in percentage format. We are using MediaQuery package functions to get current device screen width height then we would multiply them with percentage value. So in this tutorial we would set Container view layout width height in Percentage Responsive View format in flutter android iOS app using MediaQuery.
Contents in this project set Container view layout width height in Percentage Responsive Format in Flutter Android iOS App:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp view class.
|
1 |
void main() => runApp(MyApp()); |
3. Create a class named as BoxScreen extends with StatelessWidget. This is our view class. We cannot directly call MediaQuery class in our main class because it has to define under MaterialApp widget. So the only way to define Media Query under Material App is to create this in another class then call in our main class.
- MediaQuery.of(context).size.width : To get current device width.
- MediaQuery.of(context).size.height : To get current device height.
- deviceHeight * 0.30 : Here 0.30 means 30% of total device height.
- deviceWidth * 0.30 : Here 0.30 means 30% of total device width.
|
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 |
class BoxScreen extends StatelessWidget { @override Widget build(BuildContext context) { double deviceWidth = MediaQuery.of(context).size.width; double deviceHeight = MediaQuery.of(context).size.height; return Column( children: [ Container( height: deviceHeight * 0.30, width: deviceWidth * 0.30, color: Colors.green, //Put your child widget here. ), Container( height: deviceHeight * 0.50, width: deviceWidth * 0.60, color: Colors.blue, //Put your child widget here. ), ]); } } |
4. Create our main View class named as MyApp extends with StatelessWidget.
- BoxScreen() : Calling our box screen class and it will automatically draw complete above widget on screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children:[ BoxScreen(), ], ) ) ) ) ); } } |
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 41 42 43 44 45 46 47 48 49 50 51 52 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class BoxScreen extends StatelessWidget { @override Widget build(BuildContext context) { double deviceWidth = MediaQuery.of(context).size.width; double deviceHeight = MediaQuery.of(context).size.height; return Column( children: [ Container( height: deviceHeight * 0.30, width: deviceWidth * 0.30, color: Colors.green, //Put your child widget here. ), Container( height: deviceHeight * 0.50, width: deviceWidth * 0.60, color: Colors.blue, //Put your child widget here. ), ]); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children:[ BoxScreen(), ], ) ) ) ) ); } } |
Screenshot:
