Skip to main content

reTerminal用Flutter

pir

はじめに​

このwikiでは、Flutterを使用して独自のユーザーインターフェースを構築する方法について説明します。FlutterはGoogleによって作成されたオープンソースのUIソフトウェア開発キットです。単一のコードベースから、Android、iOS、Linux、Mac、Windows、Google Fuchsia、およびWebのクロスプラットフォームアプリケーションを開発するために使用されます。これは、一つのプログラミング言語と一つのコードベースを使用して、2つの異なるアプリ（iOS、Android、その他用）を作成できることを意味します。

Flutterで開発するには、Dartというプログラミング言語が必要です。DartはGoogleによって開発された、C言語スタイルの構文を持つオープンソースの汎用オブジェクト指向プログラミング言語です。

ここでは、Flutterを使用してPC上でアプリケーションを開発し、flutter-piを使用してreTerminal上でアプリケーションを実行します。flutter-piは、Xなしで動作するRaspberry Pi用の軽量Flutter Engine Embedderです。つまり、Raspberry Pi OS DesktopやX11、LXDEを起動する必要がありません。コマンドラインで起動してアプリケーションを実行するだけです。

以下のガイドに従うことで、LCD上のボタンをクリックするだけでreTerminal上のGPIOピンを制御するアプリケーションを作成できるようになります。それでは始めましょう！

開発環境の準備​

reTerminal上で​

まず、reTerminal上にflutter-piをインストールする必要があります。

flutter-piのGitHubリポジトリにアクセスするにはこちらをクリックしてください

  • ステップ1. このwikiで説明されているようにreTerminalにログインし、reTerminal上にflutter engine binariesをインストールします
git clone --depth 1 https://github.com/ardera/flutter-engine-binaries-for-arm.git engine-binaries
cd engine-binaries
sudo ./install.sh
  • ステップ 2. cmake、グラフィックス、システムライブラリ、フォントをインストールする
sudo apt install cmake libgl1-mesa-dev libgles2-mesa-dev libegl1-mesa-dev libdrm-dev libgbm-dev ttf-mscorefonts-installer fontconfig libsystemd-dev libinput-dev libudev-dev  libxkbcommon-dev
  • Step 3. Update the system fonts
sudo fc-cache
  • Step 4. Clone flutter-pi and cd into the cloned directory
git clone https://github.com/ardera/flutter-pi
cd flutter-pi
  • ステップ 5. flutter-piをコンパイルする
mkdir build && cd build
cmake ..
make -j`nproc`
  • ステップ 6. flutter-piをインストールする
sudo make install
  • Step 7. Open raspi-config
sudo raspi-config

  • ステップ 8. System Options > Boot / Auto Login に移動してコンソールモードに切り替え、Console または Console (Autologin) を選択します

  • ステップ 9. Advanced Options > GL Driver > GL (Fake KMS) に移動してV3Dグラフィックスドライバーを有効にします

  • ステップ 10. Performance Options -> GPU Memory に移動してGPUメモリを設定し、64 を入力します

  • ステップ 11. キーボードの ESC を押して rasp-config ウィンドウを終了します

  • ステップ 12. reTerminalに3Dアクセラレーションの使用許可を与えます。（注意：潜在的なセキュリティリスクがあります。これを行いたくない場合は、代わりに sudo を使用してflutter-piを起動してください。）

usermod -a -G render pi
  • Step 13. Reboot reTerminal
sudo reboot

必要なツールのreTerminalへのインストールが完了しました

ホストPC上で​

次に、開発用のホストPCを準備する必要があります。ここでは、Flutter開発に必要なパッケージを含むFlutter SDK、コード編集用のAndroid Studio、そしてコードの実行とテストを行うAndroid Emulatorをインストールします。

  • ステップ 1. お使いのオペレーティングシステムに応じてFlutter SDKをダウンロードしてインストールします

  • ステップ 2. ターミナルウィンドウで以下を入力して、Flutter SDKが正常にインストールされているかを確認します

flutter --version

pir

  • Step 3. お使いのオペレーティングシステムに応じてAndroid Studioをダウンロードしてインストールします

  • Step 4. Android Studioを開き、Configure > Pluginsに移動します

pir

  • Step 5. Marketplaceで、検索ボックスにflutterと入力し、Installをクリックします

pir

  • Step 6. プロンプトウィンドウでInstallをクリックしてDartプラグインもインストールします

pir

  • Step 7. Restart IDEをクリックして、インストールしたプラグインでIDEを再起動します

pir

  • Step 8. IDEが再び開いたら、Configure > AVD Managerに移動します

pir

  • Step 9. Create Virtual Deviceをクリックします

pir

  • Step 10. New Hardware Profileをクリックします

pir

  • Step 11. 以下のように設定を構成します

    • Device Name: reTerminal

    • Device Type: Phone/ Tablet

    • Screen:

      • Screen size: 5inch
      • Resolution: 1280 x 720

    • Memory: RAM: 2048MB

    • Input: [✓] Has Hardware Buttons (Back/Home/Menu)

    • Supported device states: [✓] Landscape

pir

  • Step 12. Finishをクリックし、次にNextをクリックします

  • Step 13. 最新のAndroid Imageを選択し、Nextをクリックします

pir

  • Step 14. Emulated Performanceで、加速されたパフォーマンスのためにHardware - GLES 2.0を選択します

pir

  • Step 15. 最後にFinishをクリックします

これで開発環境の準備が正常に完了しました

Smart Lamp Flutter Application​

ハードウェア接続​

テスト目的でreTerminalのGPIO 24にLEDを接続します。後で、リレーを追加してGPIOを使用して家電製品を制御することができます！

pir

注意: GPIOピンとLEDの間に抵抗が必要です。そうしないとLEDが焼損します。

アプリケーションの作成と初期化​

  • Step 1. Android Studioを開き、Create New Flutter Projectをクリックします

pir

  • Step 2. Flutter SDK pathは自動的に設定されます

pir

注意: このウィンドウにFlutter SDK pathが表示されない場合は、手動でFlutter SDKの場所を指定できます

  • Step 3. プロジェクトの詳細を以下のように入力し、Finishをクリックします

pir

これでmain.dartでサンプルプロジェクトが開きます

main.dart（メインアプリ）の作成​

libフォルダ内のmain.dartファイルを使用してFlutterアプリケーションを作成します

main.dartファイルを開き、以下のコードをコピーします

//library imports
import 'package:flutter/material.dart';
import 'package:flutter_gpiod/flutter_gpiod.dart';

//entry point for the app
void main() {
  runApp(MyApp());
}

// This is the main application widget.
class MyApp extends StatelessWidget {
  // Function for GPIO control
  void ledState(state) {
    // Retrieve the list of GPIO chips.
    final chips = FlutterGpiod.instance.chips;

    // Retrieve the line with index 24 of the first chip.
    // This is BCM pin 24 for the Raspberry Pi.
    final chip = chips.singleWhere(
          (chip) => chip.label == 'pinctrl-bcm2711',
      orElse: () =>
          chips.singleWhere((chip) => chip.label == 'pinctrl-bcm2835'),
    );

    final line2 = chip.lines[24];

    // Request BCM 24 as output.
    line2.requestOutput(consumer: "flutter_gpiod test", initialValue: false);
    line2.setValue(state);
    line2.release();
  }

  @override
  Widget build(BuildContext context) {
    // MaterialApp widget
    return MaterialApp(
      // Hide the debug banner at the top right corner
      debugShowCheckedModeBanner: false,
      // Scaffold widget
      home: Scaffold(
        // background color of the app.
        // Here after you type "Colors.", Android Studio will recommend the available colors. 
        // Also you can hover the mouse over to check the different color variations assigned 
        // by numbers enclosed by [ ].
        backgroundColor: Colors.grey[700],
        // AppBar widget
        appBar: AppBar(
          // background color of the appbar
          backgroundColor: Colors.black,
          // center align text inside appbar widget
          title: Center(
            child: Text(
              'LIVING ROOM',
            ),
          ),
        ),
        body: Center(
          // Row widge
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              // ON Button function
              ElevatedButton(
                child: Text('ON'),
                onPressed: () {
                  print('ON');
                  ledState(true);
                },
                // ON Button styling
                style: ElevatedButton.styleFrom(
                    primary: Colors.orange[700],
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                    textStyle:
                    TextStyle(fontSize: 40, fontWeight: FontWeight.normal)),
              ),
              // Google Material Icon of a Light Bulb
              Icon(
                Icons.lightbulb_outline,
                color: Colors.white,
                size: 200,
              ),
              // OFF Button function
              ElevatedButton(
                child: Text('OFF'),
                onPressed: () {
                  print('OFF');
                  ledState(false);
                },
                // OFF Button styling
                style: ElevatedButton.styleFrom(
                    primary: Colors.orange[300],
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                    textStyle:
                    TextStyle(fontSize: 40, fontWeight: FontWeight.normal)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter で使用されるウィジェット​

Flutter ウィジェットは、React からインスピレーションを得たモダンなフレームワークを使用して構築されています。中心的なアイデアは、ウィジェットからUIを構築することです。ウィジェットは、現在の設定と状態に基づいて、そのビューがどのように見えるべきかを記述します。

StatelessWidget: ステートレスウィジェットは、記述しているユーザーインターフェースの一部が、オブジェクト自体の設定情報とウィジェットが展開されるBuildContext以外の何にも依存しない場合に便利です。

MaterialApp: MaterialAppウィジェットは、マテリアルデザインアプリケーションで一般的に必要とされる多数のウィジェットをラップするウィジェットです。

Scaffold: Scaffoldウィジェットは、flutterアプリの基本的なマテリアルデザインビジュアルレイアウト構造を実装するフレームワークを提供します。ドロワー、スナックバー、ボトムシートを表示するためのAPIを提供します。

Appbar: Appbarは、flutterアプリケーションでツールバーを含むウィジェットです。

Row: Rowウィジェットは、その子要素を水平配列で表示するために使用されます。このウィジェット内でUI要素を使用します。

ElevatedButton: ElevatedButtonウィジェットは、押すことができ、それに応じて反応するボタンで構成されています。

Google Material Icons​

アプリ内でGoogle Material Iconsからlightbulbアイコンを使用しています。より多くのGoogle Material Iconsを探索するには、このリンクをフォローし、ボタンを検索し、ボタンを選択してボタンのflutterコードを表示してください。

pir

GPIO ライブラリのインストール​

次に、Flutter アプリケーションに GPIO 制御ライブラリをインストールします。ここでは flutter_gpiod という GPIO ライブラリを使用します。

  • ステップ 1. GPIO ライブラリをインストールするには、Flutter プロジェクト内の pubspec.yaml ファイルに移動し、dependencies: の下に以下を追加します：
dependencies:
  flutter_gpiod: ^0.4.0-nullsafety
  • Step 2. ファイルを保存し、Pub get をクリックします

pir

アプリをテストする​

  • Step 1. main.dart ファイルを開きます

  • Step 2. no device selected ボタンをクリックし、先ほど作成したAndroidデバイスを選択します

pir

以下の出力が表示されます

pir

  • Step 3. 再生ボタン をクリックしてアプリケーションを実行します

pir

Androidエミュレーター上で以下のアプリケーションが実行されているのが確認できます

pir

アプリケーションをビルドしてreTerminalに転送する​

次に、FlutterアプリケーションをビルドしてreTerminalに転送します

  • Step 1. Android Studio内でターミナルウィンドウを開きます。View > Tool Windows > Terminal に移動します

  • Step 2. 以下を入力してビルドの準備をします

flutter clean
  • Step 3. Build the project
flutter build bundle
  • ステップ 4. reTerminalの電源を入れる

注意: reTerminalがコマンドラインモードで起動することがわかります

  • ステップ 5. ビルドしたプロジェクトをreTerminalに転送する
scp -r ./build/flutter_assets pi@<ip_address_of_reTerminal>:/home/pi/testapp

reTerminal でアプリケーションを起動する​

  • ステップ 1. reTerminal のコマンドラインで以下を入力します
flutter-pi /home/pi/testapp

pir

ONとOFFボタンを押すと、GPIO 24に接続されたLEDが対応して反応し始めることがわかります！

GPIOピンにリレーを追加して家電製品を制御し、reTerminal上で完全なスマートホームソリューションを構築することで、これをさらに拡張することもできます！

ボーナスデモ​

Flutterでより興味深いデモを体験したい場合は、このGitHubリポジトリをチェックしてください

pir

リソース​

技術サポート & 製品ディスカッション​

私たちの製品をお選びいただき、ありがとうございます！私たちは、お客様の製品体験が可能な限りスムーズになるよう、さまざまなサポートを提供しています。異なる好みやニーズに対応するため、複数のコミュニケーションチャンネルを提供しています。

Loading Comments...