Help us understand the problem. What is going on with this article?

新しくなった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

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

スクリーンショット 2019-09-23 8.49.54.png

これで準備完了です。

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

  • Platform.isAndroidなどのコードを書くとプラットフォームを判定することができます。これでWebとモバイルで表示変えることができる!
    スクリーンショット 2019-09-23 13.15.03.png

  • 以下のようなコードを書いて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は使えない。(対応してください。お願いします。)
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away