新しくなったFlutter For Webを使ってみた(2019/9/23)

新しくなったFlutter For Webを使ってみた

Flutter 1.9になりFlutter For WebがFlutterに統合されたので使ってみました。今回実際に動かすバージョンはFlutter1.10ですが。

環境

• mac OS Mojave 10.14.6
• Visual Studio Code 1.38.1
• Flutter 1.10.5 channel dev
• Dart 2.6.0

Flutterのインストール

このページに書いてある通りにすればFlutterをインストールすることができます。

Flutter For Webを使えるようにする

基本的にはこのページに書いてある通りにするといいのですが、2019/9/23現在は

flutter channel master

だとうまく動かないので、代わりに

flutter channel dev

にしてください。そのうちmasterでも動くようになると思います。

【2019/9/25 追記】
channel masterでも動くようになりました。

Visual Studio CodeにFlutterとDartのExtensionを追加

Visual Studio CodeのMarketplaceで「Flutter」と「Dart」を検索してExtensionをインストールしてください。

新規プロジェクトを作成

• Visual Studio Codeで、Shift+Cmd+Pでコマンドパレットが開くので、Flutter:New Projectを選択して、任意の場所にプロジェクトを作成してください。
• ターミナルでプロジェクト配下に移動して

flutter run -d chrome

と叩くと以下のようなサンプルページが表示されます。

これで準備完了です。

プラットフォームごとに画面の表示を変えてみようと思ったけど...

• Platform.isAndroidなどのコードを書くとプラットフォームを判定することができます。これでWebとモバイルで表示変えることができる！
  

• 以下のようなコードを書いてflutter run -d chromeを実行！

main.dart

import 'dart:io';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Platform.isMacOS ?
            Text(
              'マック',
            ) : Text('マック以外')
          ],
        ),
      )
    );
  }
}

※エラーが出ます。なんでや。

dart:ioはWebでは使えない

ここの情報によると、dart:ioはFlutter For Webでは使えないみたいです。そのうち対応するといいのですが、現状ではWebとモバイルで表示の切り替えは簡単にはできなさそうです。(画面サイズで表示を変えるとかそんな感じになりそう)

まとめ

• 現時点では、Flutter For Webを使う場合は、flutter channel masterではなく、flutter channel devを叩くこと。
• Flutter For Webでは、現時点ではdart:ioは使えない。(対応してください。お願いします。)