Flutterを使ってみた話

この記事は、OIT Advent Calendar 2018の12日目の記事です。

あてんしょん

この記事はにわかプログラマーが書いています。信頼できる記事ではないのでガチプロエンジニアの方はこの記事よりはるかにいい記事が世の中に転がっているはずなのでそちらを参照してください( ✌︎'ω')✌︎

Flutterとは

google社製のクロスプラットフォームアプリを開発できるフレームワークのことで、実は先日version 1.0をリリースしました。開発言語はDartというものでかなりとっつきやすい印象があります。あと何と言っても、デフォルトでマテリアルデザインの部品(ウィジェット)を使うことができるので、綺麗なUIのアプリを高速に作ることができます。素敵だね。
前はReact Nativeを使っていたけど、「いい感じ」のUIを実現するためにはcssを完全に理解してないと無理でしょ、みたいな印象がありました。その点、Flutterはかなり簡単に整ったUIのアプリを作れる作れるそうです。
React大好きマンなので一応言っておくと、ReactNativeはオープンソースのライブラリがFlutterよりはるかに多いのが利点です。

でも環境構築でこけるんでしょう？

こういったフレームワークを使おうとするとまず環境構築でこけるなんてよく聞く話です。私もcocos2dxと言うゲームフレームワークの環境構築で5日くらい溶かした辛い思い出があります。 しかし、Flutterはかなり親切です。
Flutterをインストールしてpathを通してflutterコマンドを使えるようにするとflutter doctorというコマンドが使えます。 このコマンドはflutterの開発環境に「何が足りないのか」「足りてないならどうすればいいのか」を表示してくれます。親切すぎて発狂しそうになります。もし、できなくてもググればだいたいなんとかなります。

とりあえず触って見る

個人的にCardと言うUIパーツが気になったので「画像とその説明文をCard」にしてみます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for material.Card',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Card Layout"),
      ),
      body: Card(
        elevation: 4.0,
        margin: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Image.asset("(任意の画像のpath)"),
            Container(
              margin: const EdgeInsets.all(16.0),
              child:Text('''これはインターネットに挑戦するタプリスです。これはインターネットに挑戦するタプリスです。これはインターネットに挑戦するタプリスです。'''
              ),
            ),
          ],
        ),
      ),
    );
  }
}

はい簡単に一瞬でできましたね。良い良い。
今回は簡単にしか実装していませんが、画像と説明文の間にユーザ名、ユーザのアイコン、いいね!ボタンを実装すれば簡単にInstagramもどきや、Twitterもどきを作ることができます。

あとがき

ちょろっと触ってみただけですが、かなり簡単にUIを実装することができ、非常にとっつきやすい印象がありました。もしかしたらReactNativeよりいいんじゃないかと思ってます(けどReactNativeも捨てがたい...)。
実装もかなり楽しくできるので長期休暇にFlutterでアプリ開発して、バズらせて一攫千金を狙いたいです。