Adobe Photoshop、Microsoft Office、WhatsAppなど、多くの人気アプリには、Linuxデスクトップに対応するものがありません。しかし、Electron、Flutter、Tauriなどのクロスプラットフォームアプリケーション開発プラットフォームのおかげで、Linuxアプリの数は増加傾向にある。

このチュートリアルでは、Flutterを使って非常にシンプルなアプリを作る方法を紹介します。Linux用のアプリを作る方法を知りたい、プログラミングの経験を積みたいという方に役立つと思います。

なぜLinuxにはもっとアプリが必要なのか

Linux は Windows や Mac に比べてデスクトップユーザー数が少なく、アプリケーション開発者が Linux 上でアプリを公開したがらない理由の一つとなっています。残念ながら、Linux と互換性のある人気アプリの不足は、一般ユーザーによる採用に影響を与え、悪循環を引き起こしています。Linuxは、技術に詳しい人たちの代替品と見なされることが多いのも、その一因です。

このシナリオを変えるために、Linux コミュニティは、ユーティリティに焦点を当てたアプリケーションのエコシステムへの移植に注力する必要があります。ユーザー数が増えれば、大手開発者もLinuxでアプリケーションをリリースするようになるでしょう。この取り組みに参加したいのであれば、FlutterはLinuxアプリ開発の旅を始めるのに最適な方法です。

Flutterとは?

FlutterはGoogleによるクロスプラットフォームのアプリケーション開発フレームワークで、オブジェクト指向のプログラミング言語であるDartを使用しています。Flutterの最大の利点は、開発者が単一のコードベースからモバイル、ウェブ、デスクトップ用のネイティブにコンパイルされたアプリケーションを構築できることです。

現在、FlutterはWindows、Mac、Linuxを含むすべてのデスクトッププラットフォームと、モバイルのAndroidとiOSをサポートしています。Flutterはプラットフォーム固有のUI要素を使わず、真っ白なキャンバスにウィジェットを追加して実装しています。そのため、Flutterは宣言型フレームワークと呼ばれています。

なぜFlutterをLinuxアプリの開発に選ぶのか?

FlutterはElectronのような代替品と比較して非常に高速です。Electronはウェブテクノロジーを使ってデスクトップアプリケーションを構築し、Chromiumエンジンをバンドルして、すべてのデスクトッププラットフォームで一貫したパフォーマンスを実現します。そのため、このプラットフォームで開発されたアプリは非常に重く、より多くのRAMを消費します。

Flutterは異なるアプローチをとっており、Dartのソースコードをプラットフォーム固有のC/C++バンドルにコンパイルする。その結果、アプリはElectronアプリよりもかなり軽量になり、パフォーマンスも向上し、消費するリソースも少なくなります。

Flutterは最新のGnome Libadwaitaスタイルウィジェットをサポートしており、開発者はUbuntuのYaruテーマを使ってアプリケーションをカスタマイズすることができる。さらに、Canonical社は、LinuxシステムのAPIをあまり深く掘り下げることなく、Linuxアプリケーションを効率的に構築できるように、様々な使いやすいパッケージを公開しています。

1. Flutterをあなたのマシンにインストールする

以下に、LinuxデスクトップにFlutterをインストールする3つの方法を説明します。

Snapを使ってFlutterをインストールする

Snapを使ってFlutterをインストールする前に、コンピュータにSnapをインストールしておく必要があります。SnapはUbuntuディストリビューションに含まれていますが、他のデスクトップ環境にも簡単にインストールできます。

Debianベースのディストリビューションを使用している場合、まずパッケージマネージャを使用して “snapd “をインストールします。

sudo apt update
sudo apt install snapd

デバイスを再起動して、すべてのSnapsのパスが正しく設定されていることを確認します。最新バージョンの “snapd “を取得するには、Snapのコアパッケージをインストールします。

sudo snap install core

FedoraまたはRed HatベースのLinuxディストリビューションの場合、DNFパッケージマネージャを使用して “snapd “をインストールすることができます。

sudo dnf install snapd

Flutterは古典的なSnapなので、従来からインストールされているシステムとして動作します。サンドボックス環境に限定される通常の Snap とは対照的に、Flutter はあなたのシステムへ完全にアクセスできます。Fedora でクラシック Snap を有効にするには、次のコマンドを実行します。

sudo ln -s /var/lib/snapd/snap /snap

Snapがコンピュータに搭載されたら、FlutterをSnapと一緒にインストールします。

sudo snap install flutter --classic

flutter doctor -v` コマンドを実行して、デバイス上ですべてが設定されているかどうかを確認します。もしそうでなければ、Flutter CLI (Command Line Interface)が、あなたのデバイスでLinuxアプリを開発するために必要なコンポーネントをすべてセットアップするための適切な指示を与えてくれるでしょう。

Flutterを手動でインストールする

Snapを使いたくない場合は、公式サイトから最新のFlutter安定版リリースをダウンロードし、そこから手動でインストールすることができます。あるいは、wgetコマンドを実行すれば、ターミナルを離れずにFlutterを直接ダウンロードすることができます。

このコマンドでバージョン3.3.2を最新のFlutter安定版と置き換える必要があります。

wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

次に、ファイルをカレントディレクトリに展開します。

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

解凍したFlutterディレクトリをホームフォルダにコピーし、bash環境でFlutterのバイナリパスを設定します。

cp flutter/ ~ を実行します。
export PATH="$PATH:`pwd`/flutter/bin "を設定します。

flutter doctor -v` コマンドを実行して、Flutterが正常にインストールされたかどうかを確認します。Flutterの環境変数を恒久的に設定し、あなたの環境でFlutterコマンドにアクセスできるようにしたい場合は、".rc “ファイルにFlutter環境変数を設定します。

bashシェルを使っている場合は、".bashrc “ファイルを開き、その末尾に以下の行を貼り付けます。

export PATH="$PATH:[PATH_OF_FLUTTER INTERNATIONAL_DIRECTORY]/bin"

: [PATH_OF_FLUTTER_DIRECTORY] を自分のFlutterディレクトリに変更します。

保存をクリックし、".bashrc “ファイルをソースにするか、新しいターミナルウィンドウを使って”.bashrc “ファイルにある環境変数を更新してください。

source .bashrc

最後に、flutter doctor -v コマンドをもう一度実行して、Flutterコンポーネントがデバイスに正しくインストールされているかどうかを確認します。または、Terminal の出力に従って、必要な Flutter ライブラリをすべてインストールします。

Git を使ってインストールする

Gitを使ったFlutterのインストールは、上記の手順と似ています。主な違いは、特定のFlutterのバージョンをダウンロードするのではなく、Terminalの引数を追加するだけでFlutterのバージョンを切り替えることができる点です。

Gitはパッケージマネージャを使ってインストールすることが可能です。

sudo apt update
sudo apt install git

GitHub のリポジトリを現在の作業ディレクトリにクローンします。適当なディレクトリではなく、ホームディレクトリを使用するとよいでしょう。

cd ~
git clone https://github.com/flutter/flutter.git

上のコマンドは、GitHub リポジトリの master ブランチをクローンしたものです。もし安定版ブランチに切り替えたい場合は、git clone コマンドに -b フラグを追加します。

git clone https://github.com/flutter/flutter.git -b 安定版

Flutterのパスを”.bashrc “ファイルに追加して、Flutterのインストールは完了です。

export PATH="$PATH:[PATH_OF___FLUTTER_GIT_DIRECTORY]/bin"

2. Flutterプロジェクトの生成

プロジェクトに取り組み始めたばかりで、まだあまりコードを書いていない場合は、新しいパッケージ名(ユニークな識別子)を持つプロジェクトを作成するのが最もクリーンな解決方法です。Flutterの各アプリにはアプリを一意に識別するパッケージ名があり、flutter createコマンドで設定することができます。

example.com “というドメイン名を持っている場合、パッケージ名は “com.example projectname“にします。このパッケージ名は flutter create コマンドで --org フラグを使用して設定できます。

flutter create --org com.example カウンター

これはカレントディレクトリに新しいFlutterプロジェクトを作成します。プロジェクト名は “counter”、パッケージ名は “com.example.counter “です。

Flutterアプリを作成すると、プロジェクトの「counter/lib」フォルダにある「main.dart」ファイルにデモアプリケーション(そのコードは以下のように変更可能)が入力され、すぐに実行できるようになります!

3. 最初のFlutterアプリケーションを実行する

Flutterプロジェクトを生成したら、お気に入りのコードエディタでプロジェクトディレクトリを開いてください。例えば、Visual Studio Codeを使っている場合、ターミナルで code counter を実行し、VSCodeでプロジェクトディレクトリ(“counter”)を開きます。

CTRL` + ``` コマンドでエディタ内にターミナルを開き、それを使って最初のFlutterアプリケーションをタイプして実行します。

flutter run -d linux

すべてが正しく行われたなら、デスクトップ上でLinuxアプリケーションを実行することができるはずです。これは、「+」(Add)を押して、中央に配置されたカウンターを増やすことができるシンプルなアプリです。

Flutterアプリの基本概念

このデモコードの一部を編集し始める前に、Flutterに特有のいくつかの概念を理解する必要があります。counter/lib/main.dart」ファイルをコードエディターで開き、いくつかの点を観察してみましょう。

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

1. Flutterのステートレスウィジェット

ステートレスウィジェットは、他のウィジェットを含む基本的なウィジェットで、一度構築されると変更することができません。その名の通り、ステートレスウィジェットはそれ自体で状態を持ちません。MyApp() は、ステートレス・ウィジェットの例です。これは MaterialApp() ウィジェットを含んでいますが、コード自体で見えるので、リアクティブな機能は持っていません。

class MyApp extends StatelessWidget { (クラス MyApp はステートレスウィジェットを拡張します)
  const MyApp({Key? key}) : super(key: key);
 
  オーバーライド
  Widget build(BuildContext context) { (ウィジェットビルド)
    return MaterialApp(
  title: 'Flutter Demo',
      theme: テーマデータ(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page',)
    );
  }
}

2. Flutterのステートフルウィジェット

一方、Statefulなウィジェットは一度構築したものを変更することができます。デモアプリでは、ボタンを押すと「カウンター」の値が変化しているのがわかります。これはステートフルウィジェットによって実現されています。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: キー);

final String title;

オーバーライド State createState() => _MyHomePageState(); }

class _MyHomePageState extends State { (英語) int _counter = 0;

void _incrementCounter() { { setState(() { _counter++; }); }

オーバーライド ウィジェット構築(BuildContext context) { return Scaffold( appBar: AppBar( title: テキスト(widget.title), ), body: センター( child: 列( mainAxisAlignment: MainAxisAlignment.center。 children: <ウィジェット>[ const Text( 'あなたはボタンをこの回数だけ押しました:', ), テキスト( '$$_counter', スタイル Theme.of(context).textTheme.headline4。 ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'インクリメント', child: const Icon(Icons.add), ), ); } }

アプリのカスタマイズ

MyAppウィジェット内では、例えばタイトル文字列を「Flutter Demo Home Page」から「Make Tech Easier」に変更することができます。

home: const MyHomePage(title: 'Make Tech Easier'),

また、MaterialAppウィジェットのprimarySwatchプロパティを使って、アプリケーションのテーマを変更することができます。デフォルトでは、青い色のテーマが表示されます。この色を緑に変更するには、“Colors.blue” を “Colors.green” に置き換えるだけです。

primarySwatch: Colors.green "に置き換えるだけです。

変更を確認するには、ターミナルに移動してキーボードの r を押してアプリケーションをホットリロードしてください。アプリケーションの色とタイトルが変更されたことがすぐにわかります。

これはFlutterがどのように動くのか、そしてそれを使ってどのようにLinuxアプリ開発を始めることができるのか、そのアイデアを提供するための非常に基本的なチュートリアルです。もし興味があり、もっと学びたいのであれば、Flutterのウェブサイトからこのスタートガイドに従ってください。

よくある質問

Flutterでウェブサイトを作ることはできますか?

はい、できます。Flutterはウェブ開発にも対応しています。コードを書いて、アプリケーションをモバイル、デスクトップ、ウェブプラットフォームにデプロイすることができます。ウェブアプリケーションを構築した後、Cloudflareページや他の静的サイトホスティングプラットフォームにウェブアプリケーションを提出することができます。

Flutterでシェルコマンドを実行できますか?

Linux向けに開発している場合、シェルコマンドを実行することは非常に重要です。FlutterはdartIOを使用して、この機能をすぐに利用できます。Linux初心者の方は、Linuxでのシェルスクリプトの基本について、私たちの専門記事をチェックして、スピードアップしてください。

Flutter Linuxアプリケーションはどのようにデプロイできますか?

Flutter Linuxアプリケーションをデプロイする公式の方法は、Snapパッケージを使用することです。または、Snap Storeにリリースすることも可能です。しかし、Flutterは静的にリンクされたバイナリをビルドするので、AppimageやFlatpak、または”.deb “や”.rpm “といったネイティブのパッケージング形式を使って、これらをパッケージングすることができます。

画像クレジット:Carl Heyerdahl via Unsplash. すべてのスクリーンショット:Hrishikesh Pathak

Akira
Akiraは情熱的なゲーマーであり、製品レビュアーです。ゲームをしていないときは、最新のゲーミングアクセサリーを試したり、製品のレビューをしていることが多い。彼の分かりやすいスタイルは、ゲーマーが自分のニーズに最も適した製品を簡単に判断できるようにするものです。また、技術的な問題にも精通しており、その解決方法も知っている。