Responsive design with Flutter MediaQueries

 Responsive design with Flutter MediaQueries

...........................................................................................................................................................................................................................

Example: #1[]

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Home(),
    );
  }
}
class Home extends StatefulWidget{
  @override
  HomeState createState()=>HomeState();
}
class HomeState extends State<Home>{
  //final data = MediaQuery.of(context)
  @override
  Widget build(BuildContext context){
    final data = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        height: data.height/2,
        color: Colors.green,
      ),

    );
  }
}

...........................................................................................................................................................................................................................

Example: #2[]

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Home(),
    );
  }
}
class Home extends StatefulWidget{
  @override
  HomeState createState()=>HomeState();
}
class HomeState extends State<Home>{
  //final data = MediaQuery.of(context)
  @override
  Widget build(BuildContext context){
    final data = MediaQuery.of(context);
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: data.size.height/2,
            color: Colors.green,
          ),
          Text('Device lenght..... ${data.devicePixelRatio}',
            style: TextStyle(fontSize: 22),),
          Text('Device lenght..... ${data.orientation}',
            style: TextStyle(fontSize: 22),),
        ],
      ),
    );
  }
}

...........................................................................................................................................................................................................................

Example: #3[ LayoutBuilder ]

import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home:MyApp()));

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp>{
  Widget build(BuildContext context){
    return LayoutBuilder(
      builder: (context, constraints){
        if(constraints.maxWidth<600){
          return onColumnLayOut();
        }else{
          return TwoColumnLayout();
        }

      }
    );
  }
}
class onColumnLayOut extends StatelessWidget{
  Color _color;

  @override
  Widget build(BuildContext context){
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(color:Colors.green),
      child: Text('hello World!'),
    );
  }
}

class TwoColumnLayout extends StatelessWidget{
  Color _color;

  @override
  Widget build(BuildContext context){
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(color:Colors.red),
      child: Text('hello World!'),
    );
  }
}

...........................................................................................................................................................................................................................

Example: #4[]

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var querydata = MediaQuery.of(context);
    var screen_height = querydata.size.height;
    var container_height = screen_height / 4;

    return Scaffold(
      appBar: AppBar(
        title: Text('MediaQuery'),
      ),
      body: querydata.orientation ==Orientation.portrait ?
      Column(
        children: <Widget>[
          SizedBox(
            height: container_height,
            child: Container(
              color: Colors.red,
            ),
          ),
          Text('${querydata.alwaysUse24HourFormat}'),
          Text('${querydata.orientation}'),
          Text('${querydata.platformBrightness}'),
        ],
      ):
          Row(
            children: <Widget>[
              SizedBox(
                width: container_height,
                child: Container(
                  color: Colors.red,
                ),
              ),
              Text('Hello World!land')
            ],
          )
    );
  }
}

...........................................................................................................................................................................................................................

Example: #5[]

...........................................................................................................................................................................................................................

Example: #6[]