How to get the Width and Height of the Screen in Flutter?

This Article is posted by seven.srikanth at 16-08-2019 15:18:14


You can get the width and height of the Screen through MediaQuery.Size property.

Here is the code snippet from which you can get the width and height of the screen of the phone.

final sizeX = MediaQuery.of(context).size.width;
final sizeY = MediaQuery.of(context).size.height;
 
Here is a sample example of how to use it in a program.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Rows and Columns'),
),
body:
Home(),
),
);
}
}

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
final sizeX = MediaQuery.of(context).size.width;
final sizeY = MediaQuery.of(context).size.height;
return Container(
color: Colors.red,
width: sizeX,
height: sizeY,
child:
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Width: $sizeX' ),
Text('HeiGht: $sizeY' ),
],
)
);
}
}

Hope this helps.
Thanks,
Srikanth

Tags: Container; Mediaquery; height; width; screen; size



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.



Recent Articles


How to add Assets Images and Network images in flutter?

Posted by bloggeraatit on 20 Sep 2019 Article


How to use inkwell class for responding images in flutter?

Posted by bloggeraatit on 20 Sep 2019 Article


Flutter Web Live on Server

Posted by nikhilchaudhary12155 on 18 Sep 2019 Article


How to specify stops in a gradient?

Posted by seven.srikanth on 20 Sep 2019 Article



© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com