LoginSignup
14
7

More than 5 years have passed since last update.

@AseiSugiyamainRepro株式会社

Flutter betaリリース後からの動き

Last updated at Posted at 2018-03-17

前回の記事で「そろそろBetaに移行する模様」と書いたところ、その直後にBetaになりました。個人的に気になって目が離せない存在になってしまったので、その後の動きをまとめます。

公式アナウンス

Today, as part of Mobile World Congress 2018, we are excited to announce the first beta release of Flutter. Flutter is Google's new mobile UI framework that helps developers craft high-quality native interfaces for both iOS and Android.

大きくアナウンスされている点は次の4つ。

  1. Betaチャンネルのリリース
  2. 開発環境の充実
  3. Dart 2 (pre-release)
  4. Packages
  5. Community

Betaチャンネルのリリース

Every few weeks, we pick the "best" dev build of the previous month or so, and promote it to beta. These builds have been tested with our codelabs.

今までのmaster, alphaからmaster, dev, betaの3チャンネルに。利用するチャンネルの変更は次のコマンドで可能。

$ flutter channel [<channel-name>]

開発環境の充実

開発環境は次の2つが利用可能。

  1. Android Studio, IntelliJ IDEA
  2. Visual Studio Code

なおdart-atom/atom-flutter: An Atom plugin for Flutter developersもあるけれどアクティブじゃない様子。

Android Studio, IntelliJ IDEA

Flutter :: JetBrains Plugin Repository

Support for developing Flutter applications. Flutter gives developers an easy and productive way to build and deploy cross-platform, high-performance mobile apps on both Android and iOS.

使える人には使いやすい(使いこなせるとは言っていない)多機能IDE。Flutter Widget Inspectorが使えるのはこちら。

Visual Studio Code

Dart-Code/Dart-Code: Dart, Flutter and Fuchsia support for Visual Studio Code (VSCode).

Dart Code extends VS Code with support for the Dart programming language, and provides tools for effectively editing, refactoring, running, and reloading Flutter mobile apps, and AngularDart web apps.

それなりの使い方がすぐにできる、ぱっと使いやすいエディタ。Dart Codeを利用するとデバッグとか色々捗るようになる。同時に複数機器に繋いで開発する(例えば、iOSシミュレーターとAndroidシミュレーターを同時にHot Reload)場合はどうすればいいんだろう…？

Dart 2

Trying the preview of Dart 2 in Flutter · flutter/flutter Wiki

Dart 2 is an update to the Dart programming language that introduces:
* Strong compile-time type checks
* Optional new/const keyword when calling a constructor (e.g., change child: new Text('Hi') to child: Text('Hi'))
* Various smaller language changes

最新のflutterを利用すると、Dart2が利用できる。有効にするためには、IDE(Android Studio, IntelliJ IDEA, VSCode)の設定変更が必要。

Changes that may break Flutter apps and packages have, and will continue to, be communicated to the flutter-dev Google Group as breaking changes.

ただし、Dart2は破壊的な変更が加えられているため、ライブラリや自分の書いたソースコードが動かなくなる場合がある。そのときにはflutter-devに報告してほしいとのこと。

Packages

Flutter Packages

Flutter↗ makes it easy and fast to build beautiful mobile apps for iOS and Android.

Flutterで利用できるパッケージを検索できるサイト。UI系のパッケージは充実しているけれど色々捗りそうなものも多い。個人的に気になったものは次のあたり。

share

A Flutter plugin to share content from your Flutter app via the platform's share dialog. Wraps the ACTION_SEND Intent on Android and UIActivityViewController on iOS.

使い方はこんな感じ。

new RaisedButton(
    child: const Text('Share'),
    onPressed: text.isNotEmpty
        ? () {
            share(text); // <- this
        }
        : null,
),

shared_preferences

Wraps NSUserDefaults (on iOS) and SharedPreferences (on Android), providing a persistent store for simple data. Data is persisted to disk automatically and asynchronously.

モバイル端末のローカルにデータを気軽に永続化するためのもの。使い方はこんな感じ。

void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      body: new Center(
      child: new RaisedButton(
        onPressed: _incrementCounter,
        child: new Text('Increment Counter'),
        ),
      ),
    ),
  ));
}

_incrementCounter() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  print('Pressed $counter times.');
  prefs.setInt('counter', counter);
}

font_awesome

This library contains a dart package useful to develop web-applications using fontawesome icons

Font Awesomeを利用しやすくするパッケージ。使い方はまだよくわかっていない…。

flutter_charts

Flutter Charts is a charting library for Flutter, written in Flutter. Currently, column chart and line chart are supported.

使い方はこんな感じ。Chart.jsとかD3, C3あたりを見慣れているとまだ違和感があるかな…。

void defineOptionsAndData() {
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new RandomChartData(useUserProvidedYLabels: _lineChartOptions.useUserProvidedYLabels);
}

grpc

The Dart implementation of gRPC: A high performance, open source, general RPC framework that puts mobile and HTTP/2 first.

Protocol Buffersを使えるようにするライブラリ。使い方はgrpc-dart/example/route_guide at master · grpc/grpc-dart。

graphql_client

GraphQL Client written in Dart 🎯.

GraphQLクライアント。

rxdart | Dart Package

RxDart is a reactive functional programming library for Google Dart, based on ReactiveX.

Rxパッケージ。

sensors

A Flutter plugin to access the accelerometer and gyroscope sensors.

加速度センサーとジャイロセンサーへのアクセスを提供するライブラリ。使い方はReactiveな感じ。

void initState() {
    super.initState();
    _streamSubscriptions
        .add(accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        _accelerometerValues = <double>[event.x, event.y, event.z];
      });
    }));
    _streamSubscriptions.add(gyroscopeEvents.listen((GyroscopeEvent event) {
      setState(() {
        _gyroscopeValues = <double>[event.x, event.y, event.z];
      });
    }));
}
void dispose() {
    super.dispose();
    for (StreamSubscription<dynamic> subscription in _streamSubscriptions) {
      subscription.cancel();
    }
}

flutter_blue

FlutterBlue is a bluetooth plugin for Flutter, a new mobile SDK to help developers build modern apps for iOS and Android.

クロスプラットフォームBLEパッケージ。先程同様にReactiveな感じで記述できる。使い方はExampleにある(長いので転記はしない)。

graphs

Graph algorithms which do not specify a particular approach for representing a Graph.

HashMapのような機能を提供するらしい？

Community

Flutterの利用方法を紹介するサイトが様々にできてきている。

  1. Flutter Institute
  2. Start Flutter
  3. Flutter Rocks

Flutter Institute

Tutorials and ramblings about flutter.io

色々なFlutterの利用方法がコード付きで紹介されている。例えば、Simple JSON with Flutterでは次のようなFlutter(というかDart)でのJSONのシリアライズ/デシリアライズの方法が紹介されている。

import 'dart:convert';

Map decodedMap = JSON.decode('{"framework":"Flutter", "awesome":true}');
// decodedMap['framework'] == 'Flutter'
// decodedMap['awesome'] == true

var data = JSON.encode({
    'framework': "Flutter",
    'tags': ['flutter', 'snippets'],
    'versions': '0.0.20',
    'task': 13511,
});
// data == '{"framework":"Flutter","tags":["flutter","snippets"],"versions":"0.0.20","task":13511}'

他にも、Creating your first flutter app - Part 1で紹介されている、flutterコマンドで生成するAndroidのプロジェクトはJavaだけではなくKotlinも、iOSのプロジェクトではObjective-CだけではなくSwiftも選択できること意外だった。

flutter create --org institute.flutter -i swift -a kotlin --description 'An Octal Clock implementation' octal_clock_app

他にも様々なコンテンツが生み出されているところで面白い。

Start Flutter

Githubに公開されているFlutterのプロジェクトをGifアニメ付きで紹介しているサイト。UIの実装方法を参考にしたいときには役立つかも。右上にFlutter Market - Google Flutter Apps & Componentsというのがあってどうやら実装したものを購入できるらしいんだけど一つだけしか売られていない。これは一体…？

Flutter Rocks · Flutter Rocks

A blog about the joys of Flutter.

ここまでの中ではFlutterについて最も技術的に詳細に触れているサイト。どうやらFlutter at Codemateを見る限り、実際にFlutterを使って開発している様子。

これまで紹介してきたサイトでは「パッケージの使い方」やHello, worldに注力して使い方をシンプルに見せることを主眼としていたけれど、結構実践的な印象。

From Wireframes to Flutter #1 - Movie Details Page · Flutter RocksやFrom Wireframes to Flutter #2 - Artist details page with a blurred background · Flutter Rocksあたりは実際にUIを作るときに参考になりそう。

Validating forms in Flutter · Flutter Rocksではフォームを作るときの実装について、それがFlutterだといかに簡単にできるかを紹介している。

また、Separating build environments in Flutter apps, part #1 - environment-specific configuration in Dart side · Flutter Rocksでは「開発環境とプロダクション環境で環境変数を分けたいんだけどどうすりゃいいの？」というまた開発中によく見ることになりそうな疑問に答えてくれる。

Flutter Weekly

A weekly newsletter for flutter fans by flutter fans.

Flutterに関するニュースを送ってくれるメールマガジン。なぜかは分からないけれど、Flutterの人気が加速しているらしく結構な量の記事が毎週生産されている。

気になった記事

今までのメールマガジンをざっと眺めてみて気になった記事。

チュートリアル

公式

WEIGHTTRACKER from SZALKO-BLOG

シンプルな実装から入って気がついたらReduxで状態管理したりグラフを自前で実装したりしてる。

Flutter: How I built a simple app in under an hour from scratch. And how you can do it too.

Google Play BooksのAPIを使って、本棚アプリを作る例

動画

DartConf

Google主催のDartConfの動画。Flutterに関するものがだいぶ多い。面白かったのは次の2つ。

Skills matter

Matt Sullivan @ Googleのライブコーディング。VSCode使っている人が動画だと多い。

個人で実施しているもの

Dartの基本的な構文から解説している。

他で公開されているチュートリアルやサンプルコードの内容を改めて解説している。

最後に

軽い気持ちでまとめに手を出してみたらえらいことになってしまった。

14
7
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
Sign upLogin
14
7