How to pass device width to other screen inside initState in Flutter? - flutter

Question

I want to pass deviceWidth and deviceHeight to other screen. Here is my code:
class _SplashPageState extends State<SplashPage> {
#override
void initState(){
super.initState();
var deviceHeight = MediaQuery.of(context).size.height;
var deviceWidth = MediaQuery.of(context).size.width;
Future.delayed(Duration(seconds: 1), () async {
await Navigator.pushNamed(context, "/home");
});
}
But when I run this code, I am getting this error:
dependOnInheritedWidgetOfExactType<MediaQuery>() or dependOnInheritedElement() was called before _SplashPageState.initState() completed.
How to fix this? And the way I'm doing is right way?

Answer 1

The issue is that accessing anything from the context from init state might not guarantee that the widget is already built. The solution is to trigger a method after the first initial render of the frame. That way, the context is properly updated with the current context of that the widget has.
Try this example code i wrote:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) {
var deviceHeight = MediaQuery.of(context).size.height;
var deviceWidth = MediaQuery.of(context).size.width;
print(deviceHeight);
print(deviceWidth);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
);
}
}
This would print the width and height of the screen. Without any errors. This is because i am using
WidgetsBinding.instance!.addPostFrameCallback((_) {
});
Essentially what it does is the method will be executed after the first frame is built. more info here https://api.flutter.dev/flutter/scheduler/SchedulerBinding/addPostFrameCallback.html
I would like to add that it's a weird use case to get the screen width and height from within init state. There might be a better approach to what you are trying to achieve.