はじめに Flutter2.0がリリースされていたのでちょっとさわってみようかと思い実機の準備をしていたところ、開発者向けオプションにワイヤレスデバッグという項目が追加されていたので調べてみました。 この項目はAndroid11から追加されたみたいです。 今回使用する端末はPixel3です。 手順 開発者向けオプションのワイヤレス デバッグをタップ ペア設定コードによるデバイスのペア設定をタップ 2.1. タップするとこんなダイアログが表示される ダイアログに表示されているIPアドレスとポートでadb pair [ip_address]:[port]を叩く 3.1. 次にダイアログに表示されている6桁のペア設定コードを入力する。 3.2. 一度ペアリングに成功すれば次回以降は自動的にペアリングされるようになります。 abdコマンドが見つからないとき パスが通っていないと思われるのでパスを通す。 export PATH=$PATH:$HOME/Library/Android/sdk/platform-tools おわりに いちいちコードを繋がなくてもデバッグできるのはかなり快適でありがたい。 Android11以前でもワイヤレスデバッグをする方法はあったみたい。知らなかった。 IntelliJやAndroid Studio用の便利なプラグインもあるみたいです。

はじめに 上記を参考にしました。間違ってたらごめんなさい。。 Widgetの大きさを固定すると FlutterでUIを作る際に、Widgetの大きさを固定値で指定するのはできるだけ避けたいところです。。。 Container( height: 40, width: 60, ), もし上記のように指定した場合、iPhone 5sとiPhone Xs Maxでは見た目のサイズ感が違っています。。 なぜなら、Flutterはどの端末でアプリが実行されているかわからないため、Containerは常に40 x 60となります。 さまざまな画面サイズに応じてWidgetの大きさを比率で指定する さてここから本題です。 どの画面サイズでも同じような大きさの比率でWidgetを表示させるために、画面をグリッドのように区切って「ブロック」ができるようにイメージします。 どの画面サイズでも「ブロック３つ分の横幅」みたいなサイズ指定をするイメージかと。 size_config.dartを作る lib/config/size_config.dart import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class SizeConfig { static MediaQueryData _mediaQueryData; static double screenWidth; static double screenHeight; static double blockSizeHorizontal; static double blockSizeVertical; static double _safeAreaHorizontal; static double _safeAreaVertical; static double safeBlockHorizontal; static double safeBlockVertical; void init(BuildContext context) { _mediaQueryData = MediaQuery.of(context); screenWidth = _mediaQueryData.size.width; screenHeight = _mediaQueryData.size.height; blockSizeHorizontal = screenWidth / 100; blockSizeVertical = screenHeight / 100; } } SizeConfigを初期化して使う lib/main.dart import './config/size_config.dart'; class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { SizeConfig().init(context); return Center( child: Container( height: SizeConfig.blockSizeVertical * 20, width: SizeConfig.blockSizeHorizontal * 50, color: Colors.orange, ), ); } これで長方形のサイズは、 width : 画面の幅50% height : 画面の高さ20% となります！！！ このSizeConfigはあらゆる場面で汎用的に使えると思うので、Flutter開発者は知っておいて損はないでしょう 説明が間違ってりしたら教えてください！