Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

25
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Zapp!でFlutterアプリをWebブラウザだけで開発する

Posted at

Zapp!というサービスがリリースしました。WebブラウザだけでFlutterアプリを開発できるサンドボックス環境です。これまでにDartPadという似たサービスがありましたが、一番大きく違うのは 任意のパッケージ が利用できると言うことでしょう。

DartPadも便利だったのですが、Firebase向けのライブラリしか使えませんでした。何となくGoogleの囲い込みを感じてもやっていたんですよね。そんな中、Zapp!は任意の(といってもWebに対応している必要はあるでしょう)Dartパッケージが利用できます。

ということで、簡単なNCMBを使ったデモを作ってみました。こちらのリンクで確認できるはずです。

image.png

実際のコードはこちらで確認できます。

使い方

Zapp!の使い方は簡単で、こちらのURLからアクセスすればすぐに開発環境が開きます。

image.png

後は開発しながら Ctrl+R を押せば、プレビューに反映されます。恐らく最初の保存時にユニークなURLが発行されるので、後はそれを外部公開すれば誰でもWebアプリケーションが利用できます。

パッケージの追加

パッケージの追加はコマンドではなく、pubspec.yamlの修正になります。例えば ncmb パッケージであれば、下記のように cupertino_icons の下辺りに追加します。バージョンはncmb | Dart Packageにて確認できますが、 any にする手もあるようです。

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  ncmb: ^2.6.6

追加したら、画面中央上にある Pub Get ボタンを押すと、入力補完にも表示されます。

image.png

追加時の注意

NCMBに限らないと思いますが、パッケージが依存しているライブラリがうまく追加されない場合があるようです。NCMBの場合はshared_preferences | Flutter Packageが入ってくれなかったので、別途pubspec.yamlに追加しています。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  ncmb: ^2.6.6
  shared_preferences: ^2.0.15

後、WebアプリケーションなのでiOSやAndroid、デスクトップ向けのライブラリはインストールできないでしょう。

Tips

後は書いていて気がついた点です。

  • main関数はmain.dartの一番下にありました
  • 最初のコードはStateが定義されていないので注意してください

まとめ

Zapp!によって、Flutterのファーストステップがとても楽になるかと思います。少なくとも数GBのファイルをダウンロードしたり、Android StudioやXcodeなどの開発環境を整えることなく開発体験をはじめられます。

ハンズオンなどがとても手軽になりそうで良い感じです。

Zapp! Build Flutter apps in the browser

25
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

25
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address