Skip to content

Instantly share code, notes, and snippets.

@Andrious

Andrious/mediaQuery.dart

Last active Dec 23, 2020
Embed
What would you like to do?
A simple app demonstrating the MediaQuery widget
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'MediaQuery Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: _MediaQueryWidget(),
);
}
class _MediaQueryWidgetState extends State<_MediaQueryWidget> {
MediaQueryData media;
@override
Widget build(BuildContext context) {
assert(debugCheckHasMediaQuery(context));
media = MediaQuery.of(context, nullOk: true);
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
'MediaQuery Widget',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Center(
child: Padding(
padding: EdgeInsets.only(top: 8, bottom: 8),
child: Text(
'Device Info',
style: TextStyle(
fontSize: 24.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
_text('Height: ${media?.size?.height}'),
_text('Width: ${media?.size?.width}'),
_text('Device Pixel Ratio: ${media?.devicePixelRatio}'),
_text('Scale Factor: ${MediaQuery.textScaleFactorOf(context)}'),
_text('Brightness: ${MediaQuery.platformBrightnessOf(context)}'),
_text('System View Insets: ${media?.viewInsets}'),
_text('System Padding: ${media?.padding}'),
_text('System View Padding: ${media?.viewPadding}'),
_text('System Gesture Insets: ${media?.systemGestureInsets}'),
_text('Always 24 Hours: ${media?.alwaysUse24HourFormat}'),
_text('Accessible Navigation: ${media?.accessibleNavigation}'),
_text('Inverting Colors: ${media?.invertColors}'),
_text('In High Contrast: ${MediaQuery.highContrastOf(context)}'),
_text('Disable Animation: ${media?.disableAnimations}'),
_text('In Bold Text: ${MediaQuery.boldTextOverride(context)}'),
_text('Navigation Mode: ${media?.navigationMode}'),
_text('Orientation: ${media?.orientation}'),
],
),
);
}
/// Text widget
Widget _text(String text) => Padding(
padding: const EdgeInsets.all(8),
child: Text(
text ?? 'null',
style: TextStyle(
fontSize: 14.0,
color: Colors.black,
),
),
);
/// Just an example of getting the 'viewable height' of the screen.
double get _workingHeight {
var mq = MediaQuery.of(context);
return mq.size.height -
mq.padding.top -
kToolbarHeight -
kBottomNavigationBarHeight;
}
}
class _MediaQueryWidget extends StatefulWidget {
@override
State createState() => _MediaQueryWidgetState();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment