Media Query Flutter

Media Query merupakan sebuah teknik yang dapat digunakan oleh desainer untuk mengatur sebuah tampilan dari layout berbeda untuk setiap device (perangkat). Dengan menggunkan media query ini kita dapat dengan bebas untuk menyeting tampilan di berbagai resolusi dan lebar, tinggi daripada device yang sedang kita gunakan secara spesifik.

1. Start a new Flutter project

2. Pilih flutter pplication

3. Konfigurasi project anda

4. Edit main.dart menjadi seperti ini

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Media Query"),),
        body: (MediaQuery.of(context).orientation == Orientation.portrait)
            ? Column(

          children: dataMediaQuery(),
        )
            : Row(
          children: dataMediaQuery(),
        )
    );
  }
  List<Widget> dataMediaQuery() {
    return <Widget>[
      Container(margin : EdgeInsets.all(5.0),color: Colors.red,width: 150, height: 150,),
      Container(margin : EdgeInsets.all(5.0),color: Colors.yellow,width: 150, height: 150,),
      Container(margin : EdgeInsets.all(5.0),color: Colors.green,width: 150,height: 150,),
      Container(margin : EdgeInsets.all(5.0),color: Colors.blue,width: 150,height: 150,),
      ];
  }
}
Leave a Comment