Hello, Flutter.

Google の提供する UI toolkit を使ってみる

昨年末、12/4にGoogleが新しい UI toolkit である「Flutter」を正式リリースしました。Flutter は、Javascript の後継として登場した Dart をベース言語とし、Android・iOS 両方のUIを簡単に構築できるツールキットです。

Flutter 自体は相当前から開発が進んでいたようですが、ついに 1.0 版がリリースされたということです。

Flutter - Beautiful native apps in record time

使ってみた

めちゃUI書くのが楽です（Android単体の開発と比較しても）。例えば、 ViewPager（タブがあって、ページが左右スワイプで見れるようなやつ）は、わざわざ ViewPagerAdapter やら PageFragment やらを Java なり Kotlinで実装しなければならなかったのですが、それが main.dart で基本完結するようになるっぽいです。

下記は、 BottomNavigationBar（下付けのタブビュー）と PageView（Androidで言うところの ViewPager）を実装するコードです。

class MyHomePageState extends State<MyHomePage> {
  PageController _pageController;
  int _currentIndex = 0;
  @override
  void initState() {
    super.initState();
    _pageController = new PageController();
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  void onPageChanged(int currentIndex) {
    setState(() {
      this._currentIndex = currentIndex;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: onPageChanged,
        children: [
          child-1, // 任意のWidget（1ページ目）
          child-2, // 任意のWidget（1ページ目）
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          new BottomNavigationBarItem(
              icon: new Icon(Icons.map),
              title: new Text("Map")
          ),
          new BottomNavigationBarItem(
              icon: new Icon(Icons.mode_comment),
              title: new Text("Timeline")
          ),
        ]
      ),
    );
  }
}

FlutterでBottomNavigationBarを実装する - Qiita

何が期待できるのか

使ってみようと思った理由の一つが、Googleが公式にサポートしてるので、おそらくAndroidで書けることは全てできるようになるんじゃ、という期待感（サードパーティだとなんか微妙に対応してないとかよくあるので）。

もう一つが、2019年以降に追加リリースされると宣言されている「Hummingbird」という機能です。Dart で書いたモバイルアプリのUIをそのままWebアプリにコンバートできるようになるとのことです。（React Native for Web 等の既存ツールとどう差別化してくるのか、Google の腕の見せどころですね）

今は、以下の2つのアプローチで実現を検討している模様。

• HTML+CSS+Canvas
• CSS Paint API

サクサク動作のUIが実現できるのでしょうかね。

Hummingbird: Building Flutter for the Web

今まで、iOS を書いたことがなかったので、これを基にiOS開発にも手を出すぞー。おー。

☺︎