responsive_mediaquery 0.1.0
SDKflutter
Platformandroidioswindowslinuxmacosweb
Make your apps responsive by using this package. This package allows you to use mediaQuery in a much better way. In this package the screen is divided 100 units by height and width, which can help us in getting the right dimensions for our required widgets.
Getting started
Make your apps responsive by using this package.
Usage
MediaQuery is great for making our apps responsive but still it was really hectic to use MediaQuery and write it again and again. So I came up with an idea to make a separate class for mediaquery and extract its powers.
import 'package:flutter/material.dart';
import 'package:responsive_mediaquery/responsive_mediaquery.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
ResponsiveMediaQuery().init(context);
return Scaffold(
body: Container(
width: ResponsiveMediaQuery.horizontalLength*100,
height:ResponsiveMediaQuery.verticalLength*40,
color: Colors.blue,
));
}
}