flutter, How to write precise responsive code from design - flutter

Question

Is there any proper method to write responsive app without any additional package? I usually use MediaQuery but I feel it's not proper enough because it's hard to measure the size from figma since figma use number so i have to calculate it but im afraid everytime i calculate it's not precise and for the font size what is used to make it responsive?
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;

Answer 1

By using Sizer plugin we can make flutter app responsive.
https://pub.dev/packages/sizer
See the example below:
add into pubspec.yaml
dependencies:
flutter:
sdk: flutter
sizer: ^2.0.15
add import statement to code
import 'package:sizer/sizer.dart';
Wrap MaterialApp with ResponsiveSizer widget
main.dart
import 'package:flutter/material.dart';
import 'package:mediaquerydemo/sizer_demo.dart';
import 'package:sizer/sizer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Sizer(
builder: (context, orientation, deviceType) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SizerDemo(),
);
}
);
}
}
Your actual code where you can show UI
SizerDemo.dart
import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';
class SizerDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
final deviceInfo = MediaQuery.of(context);
late var h = deviceInfo.size.height;
late var w = deviceInfo.size.width;
return Scaffold(
appBar: AppBar(
title: Text("Responsive App"),
),
body: deviceInfo.orientation == Orientation.portrait
? SizedBox(
width:30.w,
height: 20.h,
child: Container(
child: Center(child: Text("HELLO", style: TextStyle(fontSize: 20.sp),)),
color: Colors.green,
),
)
: SizedBox(
width:30.w,
height: 20.h,
child: Container(
child: Center(child: Text("World!", style: TextStyle(fontSize: 20.sp),)),
color: Colors.red,
),
)
);
}
}