SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Flutterで始めるモバイルアプリ開発

Flutter3へのアップグレードでどう変わる?――注目の新規機能と重要な変更点を解説

Flutterで始めるモバイルアプリ開発 第20回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 2022年5月にFlutter3がリリースされました。これまで、Flutter2を前提に説明してきたので、Flutter3になるとどのような点が変わるのか、または、どんな新機能があるのか興味がある方も多いはずです。特に、前回までFlutter2でのMaterial UIでのウィジェットについて説明してきたので、影響がどの程度あるのかも興味があると思います。そこで、今回はこれまで説明してきたFlutterに関連することを中心にFlutter3の内容について紹介していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

おもな新機能と変更点

 Flutter3ではおもに以下のような新機能と変更点があります。他にも細かい変更点があるので、興味がある方はこちらも参照してください。

  • Windows/Mac/Linuxのデスクトップアプリのサポート
  • Material Design 3(以下、Material 3と記す)のサポート
  • Dart 2.17へのアップグレード
  • カジュアルゲームを作成するためのGames Toolkitのリリース
  • Firebaseサービスとの結合強化
  • iOSアプリ用のビルドコマンドの改善
  • Webアプリでの新しいライフサイクル
  • パフォーマンスの向上

 この中で、これまで紹介してきた中でもっとも大きくかかわることは「Material 3のサポート」「Dart 2.17へのアップグレード」です。また、「デスクトップアプリ」のサポートはFlutter3ではもっとも大きな変更点です。本稿でも、おもにこれら3つの変更点について紹介します。

デスクトップアプリのサポート

 Flutter2で、Webアプリ、Windowsアプリがサポートされましたが、Flutter3ではこれらに加え、MacとLinuxアプリも作成できるようになりました。つまり、Flutter3では一般的なデバイスに対して同一コードでアプリケーションが作れるクロスプラットフォームになったのです。

 デスクトップ向けのアプリを作るということが今はないという開発者でも、タブレットに対応したアプリを作っているということは多いはずです。つまり、それらのコードをほぼそのまま利用してWindowsやMac、Linuxのアプリに転用できることになります。

Mac/Linux用のプロジェクトの作成と実行

 Mac/Linuxに対応しても特別なことは特に何もありません。例えば、MacOSであればリスト1の手順で作成と実行ができます。

[リスト1]MacOS用のプロジェクトの作成と実行
// (1) プロジェクトの作成
$flutter create --platforms=macos .
Creating project ....
Running "flutter pub get" in flutter_macos...         1,916ms
Wrote 38 files.

All done!
In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in ./lib/main.dart.
// (2) アプリの実行
$flutter run

 まず、プロジェクト名になるフォルダを作って、そのフォルダ内で(1)のように実行すればMacOS用のプロジェクトが作成できます。iOSやAndroidであれば、何も指定しなくてもデフォルトで対応されていましたが、デスクトップアプリの場合にはplatformsで指定します。もちろん、あとから対応プラットフォームを追加することもできますが、ここではより手順を簡単にするために、最初に指定しています。

 そして、(2)で実行します。実行した結果が図1です。

図1:MacOSでのアプリ画面
図1:MacOSでのアプリ画面

 このように、Mac用に何かしなくても非常にスムーズにプロジェクとの作成から実行までができました。

 Linuxにおいてもほぼ同様の手順で作成と実行が可能です。例えば、筆者のUbuntu20.04の環境ではflutter doctorコマンドで環境チェックを行ったところ、リスト2のような結果になりました。

[リスト2]Linux用の環境チェックの結果例
$flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Ubuntu 20.04.4 LTS 5.13.0-41-generic, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Chrome - develop for the web
[✗] Linux toolchain - develop for Linux desktop
    ✗ clang++ is required for Linux development.
      It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
    ✗ CMake is required for Linux development.
      It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from https://github.com/ninja-build/ninja/releases
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install libgtk-3-dev)
[✓] Android Studio (version 2020.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

 そこで、指定されたライブラリなどをインストールを行えばMacOSと同様の手順でデスクトップアプリの実行ができました。

 正直のところ、著者は当初「デスクトップアプリを作らない開発者にとってはほとんど関係がない」と思っていました。しかし、ここまで手間をかけずに実行までができるのであれば、実機やエミュレータなどを使わず機能を確認できる部分が増えるということだけでも利用価値があるのではないかと感じています。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Material 3へのサポート

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flutterで始めるモバイルアプリ開発連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15997 2022/06/13 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング