アプリ置き場

アプリ置き場

http://www.moreread.net/

Flutter いろいろ備忘メモ

いろいろメモ。

Flutter Webも含めたPlatform判別

Webブラウザでモバイル用のコンテンツをテストしようとすると、プラットフォーム判別で落ちるのでこれを使う。

pub.dev

bool isIos = UniversalPlatform.isIOS;
bool isWeb = UniversalPlatform.isWeb;



デバッグモードかリリースモードを判断する

以下を使えばよいらしい

kReleaseMode
kProfileMode
kDebugMode

api.flutter.dev



ウィジェットを囲む

f:id:nazenaninadesico:20210914024613p:plain

(VS Code)
ウィジェットにカーソルが合った状態で Ctrl + . を押すと新しいウィジェットで対象ウィジェットをラップしてくれる。 閉じ括弧がどこまでなのかイライラすることがなくなる。



不定サイズのウィジェットを上下(または左右)半分に分割する

f:id:nazenaninadesico:20210914024227p:plain

Expanded2個並列に並べたらいけるぽい

  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ColoredBox(
            color: Colors.red,
            child: Text(" 上 "),
          ),
        ),
        Expanded(
          child: ColoredBox(
            color: Colors.green,
            child: Text(" 下 "),
          ),
        ),
      ],
    );
  }



リタイアシミュレータ

Flutterの習作ということでリタイアシミュレータのモバイル版を製作。少し簡略化してモバイルで操作しやすい感じに。詳細にシミュレーションしたい方はWeb版のほうをご使用ください。

 

iOS

AndroidWeb版(PC向け)

 

Flutterでグラフ charts_flutter

charts_flutter

dependencies:
  flutter:
    sdk: flutter
  charts_flutter: "^0.11.0"


Flutterで各種グラフを描画できるパッケージ。
便利なんだけど情報が少なくて目的の処理をするのに調べるのが面倒だったので備忘録。

f:id:nazenaninadesico:20210911202745p:plain

コードにコメントでメモ

//double fontSize;

//class GraphData {
//  int hoge = 0;
//  int fuga = 0;
//  GraphData(this.hoge, this.fuga);
//}

List<charts.Series<GraphData, int>> _serieseData = [];

_serieseData.add(
  charts.Series<GraphData, int>(
    id: "凡例",
    data: _graphData,
    domainFn: (GraphData data, _) => data.hoge,
    measureFn: (GraphData data, _) => data.fuga,
    colorFn: (GraphData data, _) => charts.ColorUtil.fromDartColor(Colors.blue),//線の色
  ),
);

Container(
  padding: EdgeInsets.all(10),
  width: 600,
  height: 400,
  child: charts.LineChart(
    _serieseData,
    animate: true,
    animationDuration: Duration(milliseconds: 300), //アニメーションの時間
    behaviors: [
      charts.SeriesLegend(
        position: charts.BehaviorPosition.top,//凡例の表示位置
        desiredMaxColumns: 1,//凡例の並べ方の行数
        entryTextStyle: charts.TextStyleSpec(//凡例のテキストスタイル
          color: charts.ColorUtil.fromDartColor(Colors.white),
          fontSize: (fontSize).toInt(),
        ),
      ),
      charts.ChartTitle(
        '横軸タイトル',
        behaviorPosition: charts.BehaviorPosition.bottom,//横軸なので下に表示
        titleOutsideJustification: charts.OutsideJustification.middleDrawArea,
        titleStyleSpec: charts.TextStyleSpec(//テキストスタイル
          color: charts.ColorUtil.fromDartColor(Colors.white),//色は変換して使う
          fontSize: (fontSize).toInt(),//int型を要求される
        ),
      ),
      charts.ChartTitle(
        '縦軸タイトル',
        behaviorPosition: charts.BehaviorPosition.start,//縦軸なので左に表示
        titleOutsideJustification: charts.OutsideJustification.middleDrawArea,
        titleStyleSpec: charts.TextStyleSpec(//テキストスタイル
          color: charts.ColorUtil.fromDartColor(Colors.white),
          fontSize: (fontSize).toInt(),
        ),
      ),
    ],
    domainAxis: charts.NumericAxisSpec(//横軸
      viewport: charts.NumericExtents(10, 100.0), //横軸の表示範囲を明示する場合
      tickProviderSpec: charts.BasicNumericTickProviderSpec(
        zeroBound: false, //falseにすると軸を0から開始せずに、存在するデータの値の範囲を表示する
        desiredTickCount: 10,//目盛りを何分割するか desiredなので必ずしもこの値にはならないが考慮してくれる
        // desiredMinTickCount: 5,//分割の範囲を指定する場合
        // desiredMaxTickCount: 10,
      ),
      renderSpec: charts.GridlineRendererSpec(
        labelStyle: charts.TextStyleSpec(//目盛りのテキストスタイル
          fontSize: (fontSize).round(),
          color: charts.MaterialPalette.white,
        ),
        lineStyle: charts.LineStyleSpec(//目盛り線の設定
          color: charts.ColorUtil.fromDartColor(Colors.grey),
          dashPattern: [4, 4],//点線(実線と隙間のサイズを指定する)
        ),
      ),
    ),
    primaryMeasureAxis: charts.NumericAxisSpec(//縦軸
      tickProviderSpec: charts.BasicNumericTickProviderSpec(
        zeroBound: true,
        desiredTickCount: 10,
        // desiredMinTickCount: 5,
        // desiredMaxTickCount: 10,
      ),
      renderSpec: charts.GridlineRendererSpec(
        labelStyle: charts.TextStyleSpec(
          fontSize: (fontSize).round(),
          color: charts.MaterialPalette.white,
        ),
        lineStyle: charts.LineStyleSpec(
            color: charts.ColorUtil.fromDartColor(Colors.grey)
            //dashPattern: [4, 4],
            ),
      ),
    ),
  ),
),

Flutter Dart 折り返し位置とルーラー位置の設定

Flutter(Dart)で折り返し位置とルーラー位置の設定。
デフォルトだと80文字で、頻繁に折り返されてつらい。

setting.json

    "[dart]": {
        "editor.rulers": [
            150
        ],
    },
    "dart.lineLength": 150,


Flutter webの設置方法

Flutter 備忘メモ

 

flutter build web

で生成されたブツをサーバーに設置したけど動かない。

ルート以外に置く場合は、パスを指定しないといけないぽい。

index.html

<base href="/hoge/hige/hage/">

Intel NUCのHackintosh化

Xcodeが必要になりそうなので、ほこりをかぶっていたMac mini(2014)を引っ張り出してきた。CPU2コア、メモリ8GB、ストレージはHDDと性能が心もとない。とりあえず分解して、余ってるSSDに換装してみた。

手順はこちらを参考にした。
割と難易度高い……。特殊ねじのドライバーも購入。
換装した結果、幾分きびきび動作するようになったんだけど、CPU性能とメモリ容量(直付け増設不可)が如何ともしがたい。昨今のデバイスiOSシミュレータなどは重そうだし……。
 
ということで、Hackintoshに挑戦してみた。Windows向けのマシンにMacOSいれるやつ。そこそこ高性能なNUC(BOXNUC8I5BEK)を余らせていたのでこいつを使う。CPU4コア、メモリ32GB、ストレージはSSD

 
以下、NUCのHackintosh化の備忘メモ
 
基本的な手順はこちらを参考にした。
 
IntelBluetoothモジュールはこちらで対応できた。
Kextを二つほど指定フォルダに入れて、config.plistを修正するだけ。
WiFiもいけそうだけど対応にクセがありそうなのと使わないので今回はオミット。
 
追加したKextのconfig.plistへの反映は、propertreeを使うことで自動でやってくれる。
 
OpenCoreを使ったMacOSインストール時にUIがロシア語(キリル文字)になってまったく読めなくて焦ったけど、手探りでメニュー弄ったら下記の場所に言語選択があった。(写真は言語変更済み)

 
内臓AudioデバイスHDMIオーディオの対応は面倒そうだったのでパス。必要なときはBluetoothのデバイスを接続する想定。が、Audioデバイスが無い状態で動画を再生するとエラーがでていて不穏だったので(開発ツールが音出したときに落ちたら嫌だ)、とりあえず余ってるUSBオーディオをつないでおいた。USBポートに差すだけで認識するので便利。1000円くらいで売ってる。
 
ということでとりあえず無事に動作して、Xcodeやら iOSシミュレータやらも動作しました。

 

Bluetoothデバイスのバッテリー残量を表示する

昨今はPC回りの機器がワイヤレス化して便利。机がすっきり。マウス、キーボード、ヘッドホン、ゲームパッド、充電もQiなどなど。
ただし、Bluetooth機器は取り込み中(MMOとか…)にバッテリーが切れると困る。Windows上からBluetoothの設定画面で一応バッテリー情報を見れるのだけど、奥まった場所にあり不便。
何かしらバッテリー情報を表示するガジェットがないかと探したけどなぜかなさそう。ならば自分で作るかとBluetoothについて少し勉強した。
 
バッテリー情報の取り方①
Bluetooth Low EnergyのBatteryServiceに対応したデバイスではバッテリー残量を取得できた。
バッテリーサービス
0000180f-0000-1000-8000-00805f9b34fb
バッテリー情報キャラクタリスティック
00002a19-0000-1000-8000-00805f9b34fb
バッテリー情報の取り方②
昔ながらのBluetoothClassicではハンズフリープロファイル(HFP)に対応していればそれに従ってバッテリー情報がとれる。RFCOMMというプロトコルでシリアル通信すればいい。HFPプロトコルスタック的にはこのRFCOMMの上にのっかっている。
ヘッドセット(HFP)
0000111e-0000-1000-8000-00805f9b34fb
※詳細な技術情報は上記のUUIDやら単語でググったりGitHUB検索すればいろいろ出るはず
 
しかし①はBLEのBatteryServiceに対応したデバイスは少なく、ほとんどの機器のバッテリー情報が取れない。またWindowsPCと接続をとりあっているのかすぐ接続が切れる。更新通知設定は動作しなかった(使ったデバイスが悪いだけの可能性もあるけど)。まぁ毎度接続しなおせばバッテリー情報は一応とれる。
 
②はそもそもヘッドホンとしてWindowsで接続中なので、ソケット横取りしてバッテリー情報を取ることはできない(多分)。ペアリングしたあと、手動で切断した状態ならシリアル通信できた。ドライバの層でやらないとダメそう。
 
バッテリー情報を取得するソフトないなぁと思ったけど、これらが理由かな。
でも色々調べまわってたらBluetooth Battery Monitorなるものを発見した。
おそらくドライバレベルで対応している。そして素晴らしいことにバッテリー情報を取得するAPIが提供されていた。でも、ガジェットとして常時表示できないのと、見た目が好みじゃなかった。。
 
ということで単独なら①を使い、Bluetooth Battery Moniterが入っていれば提供APIを叩く感じでガジェットを作った。
Bluetooth Battery Gadget

f:id:nazenaninadesico:20210717085923p:plain