Hi can someone explain to me why I have to make a builder in the MyApp() so I could use mediaquery?

As the title says I wish to know how come that in MyApp() or Firstpage() I have to make a builder so that I my Mediaquery.of(context) may works Although, to other pages it works fine. My question is since my other pages works without builder should I still add it?

Here is the code

MyApp() code
import 'package:flutter/material.dart';
import 'package:fluttertestpage/FirstpageUI.dart';
import 'package:fluttertestpage/secondpage.dart';

void main() {
  runApp(FirstPage());
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body: FirstPageUI().getFirstPageUIWidget()));
  }
}

Connected returning widget

import 'package:flutter/material.dart';
import 'package:fluttertestpage/secondpage.dart';

class FirstPageUI {
  Widget getFirstPageUIWidget() {
    return Builder(
        builder: (context) => (Container(
          width: MediaQuery.of(context).size.width*.5,
              color: Colors.black,
              child: Center(
                child: RaisedButton(
                  child: Text("1st -> 2nd"),
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => SecondPage()));
                  },
                ),
              ),
            )));
  }

}

Here is my 2nd page without builder

import 'package:flutter/material.dart';
import 'package:fluttertestpage/secondpageui.dart';
import 'package:fluttertestpage/thirdpage_0.dart';
import 'package:fluttertestpage/thirdpage_1.dart';

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SecondPageUI(context).getSecondPageUIWidget()
      ),
    );
  }
}

returning widget of 2nd page

import 'package:flutter/material.dart';
import 'package:fluttertestpage/thirdpage_0.dart';
import 'package:fluttertestpage/thirdpage_1.dart';

class SecondPageUI {
  SecondPageUI(this.context);

  final BuildContext context;

  Widget getSecondPageUIWidget() {
    return Container(
      color: Colors.white,
      child: Center(
          child: Column(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width*.5,
            height: MediaQuery.of(context).size.height * .5,
            decoration: BoxDecoration(color: Colors.orangeAccent,),
          ),
          RaisedButton(
            child: Text("2nd -> 3rd0"),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ThirdPage_0()),
              );
            },
          ),
          RaisedButton(
            child: Text("2nd -> 3rd1"),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ThirdPage_1()),
              );
            },
          ),
        ],
      )),
    );
  }
}