Linuxでアプリを作る方法

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

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

Flutterとは？

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

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

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

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

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

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

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

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を直接ダウンロードすることができます。

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環境変数を設定します。

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

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

source .bashrc

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

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

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

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 “です。

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

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

flutter run -d linux

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

Flutterアプリの基本概念

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

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

• main() - これはアプリケーションの開始点を表す関数です。
• MyApp() - これはFlutterのウィジェットです。ウィジェットはFlutterの基本的なビルディングブロックだと考えてください。ウィジェットには2つのフレーバーがあります。ステートレスとステートフルです。

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

• MyHomePage はステートフルウィジェットです。
• MyHomePage はステートフルウィジェットです。 * _MyHomePageState クラスの内部では、_counter という変数があり、初期値は 0 に設定されています。
• デモのボタンをクリックすると、 _incrementCounter() 関数が実行され、値が 1 つ増加します。
• _incrementCounter() 内の setState() 関数は MyHomePage ウィジェットを再レンダリングし、更新された _counter の値がスクリーンに表示されます。

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でウェブサイトを作ることはできますか？

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

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

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

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

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