MediaQuery

 /// MediaQuery : you can get information about the current device size, as well as user preferences,

/// and design your layout accordingly. MediaQuery provides a higher-level view of the current app’s screen size
/// and can also give more detailed information about the device and its layout preferences.
/// In practice, MediaQuery is always there. It can simply be accessed by calling MediaQuery.of in the build method.
/// From there you can look up all sorts of interesting information about the device you’re running on,
/// like the size of the screen, and build your layout accordingly.
/// MediaQuery can also be used to check the current device’s orientation or can be used to check
/// if the user has modified the default font size. It can also be used to determine
/// if parts of the screen are obscured by a system UI, similar to a safe area widget.
/// Using mediaQuery.of automatically causes the widgets to rebuild themselves according to the current device sizes and
/// layout preferences every time they change.

import "package:flutter/material.dart";

void main() {
  runApp(CheckApp(),);
}
class CheckApp extends StatelessWidget {
  CheckApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "FlutterApp",
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MediaQueryDemo(),
      // home: MediaQueryOtherDemo(),
    );
  }
}
class MediaQueryDemo extends StatelessWidget {
  MediaQueryDemo({super.key});

  @override
  Widget build(BuildContext context) {
    var _mediaQuery = MediaQuery.of(context);
    // return Scaffold(
    //   appBar: AppBar(
    //     title: Text("MediaQuery"),
    //   ),
    //   body: Row(
    //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
    //     children: [
    //       Container(
    //         width: _mediaQuery.size.width * 0.3,
    //         height: _mediaQuery.size.height * 0.5,
    //         decoration: BoxDecoration(
    //           color: Colors.brown,
    //         ),
    //       ),
    //       Container(
    //         width: _mediaQuery.size.width * 0.7,
    //         height: _mediaQuery.size.height * 0.5,
    //         decoration: BoxDecoration(
    //           color: Colors.purpleAccent,
    //         ),
    //       ),
    //     ],
    //   ),
    // );

    return Scaffold(
      appBar: AppBar(title: Text("MediaQuery"),),

      ///   Usage of Orientation with "Builder"
      body: Builder(
        builder: (context) {
          if(_mediaQuery.orientation == Orientation.portrait) {
            return portraitWidget(_mediaQuery.size);
          } else {
            return landscapeWidget(_mediaQuery.size);
          }
        },
      ),

    ///   Usage of "OrientationBuilder"
    //   body: OrientationBuilder(
    //     builder: (BuildContext context, orientation) {
    //       if(_mediaQuery.orientation == Orientation.portrait) {
    //         return portraitWidget(_mediaQuery.size);
    //       } else {
    //         return landscapeWidget(_mediaQuery.size);
    //       }
    //     },
    //   ),

    );
  }
}
Widget portraitWidget(Size size) {
  return Center(
    child: Container(
      width: size.width * 0.8,
      height: size.height * 0.8,
      decoration: BoxDecoration(
        color: Colors.purple,
      ),
      child: Center(
        child: Text("Portrait",
        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 40,),),
      ),
    ),
  );
}
Widget landscapeWidget(Size size) {
  return Center(
    child: Container(
      width: size.width * 0.8,
      height: size.height * 0.8,
      decoration: BoxDecoration(
        color: Colors.yellow,
      ),
      child: Center(
        child: Text("LandScape",
        style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 40,),),
      ),
    ),
  );
}

///   Another Example of MediaQuery
// class MediaQueryOtherDemo extends StatelessWidget {
//   MediaQueryOtherDemo({super.key});
//
//   // var size, width, height;
//   //
//   // @override
//   // Widget build(BuildContext context) {
//   //   //var size, width, height;
//   //
//   //   //Getting the size of the window
//   //   size = MediaQuery.of(context).size;
//   //   width = size.width;
//   //   height = size.height;
//   //
//   //   return Scaffold(
//   //     appBar: AppBar(
//   //       title: Text("MediaQuery Demo"),
//   //       backgroundColor: Colors.brown,
//   //     ),
//   //     body: Center(
//   //       child: Container(
//   //         color: Colors.yellow,
//   //         width: width / 2, //half of the width size
//   //         height: height / 2, //half of the height size
//   //       ),
//   //     ),
//   //   );
//   // }
//
//     ///Example 2: Getting device orientation and rebuilding accordingly.
//
//     // var orientation, width, height, size;
//     //
//     // @override
//     // Widget build(BuildContext context) {
//     //
//     //   //  Getting the orientation of the app
//     //   orientation = MediaQuery.of(context).orientation;
//     //
//     //   //  Getting the size of the app
//     //   size = MediaQuery.of(context).size;
//     //   width = size.width;
//     //   height = size.height;
//     //
//     //   return Scaffold(
//     //     appBar: AppBar(title: Text("MediaQuery Effect"), backgroundColor: Colors.green,),
//     //     body: orientation == Orientation.portrait
//     //       ? Center(child: Container(color: Colors.blue, width: width/2, height: height/2,))
//     //         : Center(child: Container(color: Colors.red, width: width/2, height: height/2,))
//     //   );
//     // }
//
//
// } //class parenthesis

Comments

Post a Comment

Popular posts from this blog

Pagination with Bloc Pattern in Flutter

Image
  import "package:flutter/material.dart" ; import "package:flutter_bloc/flutter_bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/event.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/state.dart" ; import "package:pagination_practice/Pagination_with_Bloc/post_repo.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return RepositoryProvider < PostRepo >( create: ( context ) => PostRepo () , child: BlocProvider < PostBloc > ( create: ( context ) => PostBloc ( context.read < PostRepo > () ) ..add ( FetchPostsEvent () ) , child: MaterialApp ( title: "Pagination" , debugShowCheckedModeBa...
Read more

Pagination First Practical in Flutter

Image
  import "package:dio/dio.dart" ; import "package:flutter/material.dart" ; import "package:flutter_spinkit/flutter_spinkit.dart" ; import "package:pagination_practice/Pagination/Model/productModel.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "HomePage" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const HomePage () , ) ; } } class HomePage extends StatefulWidget { const HomePage ( { super .key } ) ; @override State < HomePage > createState () { return HomePageState () ; } } class HomePageState extends State < HomePage > { final ScrollController scrollController = Scrol...
Read more

ExpansionPanel with ExpansionPanelList with Complete Collapse Operation in Flutter

Image
  import "package:flutter/material.dart" ; import "package:sdreatech_learning_widget/All_widgets_Ui/customWidget.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "ExpansionPanel" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const ExpansionPanelListPracticalCollapseTask () , ) ; } } class ExpansionPanelListPracticalCollapseTask extends StatefulWidget { const ExpansionPanelListPracticalCollapseTask ( { super .key } ) ; @override State < ExpansionPanelListPracticalCollapseTask > createState () => _ExpansionPanelListPracticalCollapseTaskState () ; } class _ExpansionPanelListPracticalCollapseTaskState...
Read more