Flutterでデバイス幅を取得する方法

2020年5月6日2020年5月11日Flutter, 勉強flutter, tips

結論

下記のようにMaterialApp()内のWidget内でMediaQuery Widgetを利用すると取得できます。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "sample app",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHome(),
    );
  }
}
class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size size               = MediaQuery.of(context).size;
    final double width            = size.width;
    final double height           = size.height;
   ～～～～～～～～～略～～～～～～～～～
  }
}

注意

下記のように定義するとエラーになります。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  final Size size               = MediaQuery.of(context).size; //ここで定義するとエラーになる
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "sample app",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHome(),
    );
  }
}
 ～～～～～～～～～略～～～～～～～～～
}

サイト運営者　えぬたけ

都内で働くゆるふわフルスタックwebエンジニア。