【Flutter】DartPadで簡単に実行！

こんにちは！　
今回はFlutterで開発するために簡単に検証ができるツールをご紹介します！
スマホアプリの開発をしてみたいけど、環境構築が大変だな…　開発端末のスペックいいの持ってないから検証するのも一苦労なんだよなって人も手軽にFlutter（Dart）に触ることができますよ。
このツールを使用するのに必要なのはネット接続できる端末だけです！

こんな人におすすめ

環境構築をするのが大変な人
試しにFlutterを触ってみたい人
簡単なロジックの検証をしたい人

FlutterはDartというGoogleが開発している言語を元に作られています。
そのため、基本的な記法はDartの記法に準拠します。
DartPadはDartの動作を確認できるツールと言う方が正確ですが、前述のとおり、FlutterはDart言語で開発されています。
DartPad上でもサンプルコードとしてFlutterコードが公開されてます。
従って、Flutterの簡易動作ができるツールの位置づけであると言えるでしょう。

DartPadとは

web上で組込みライブラリを使用して簡易的な動作検証を行えるツールです。対応するライブラリはdart:*となっています。ただし、dart: ioは動作しないので注意が必要です。

では、どんなことが確認できるのか？

dart-coreライブラリが使えるため、以下のような基本的は機能が使用可能です。

文字列
数値
コレクション
日付
エラー処理
URI

ファイルの入出力を扱うライブラリ（dart :io）は使用不可です。
web上で操作検証するツールなので、ファイル操作が出来ないのは自然かもしれません。

DartPadはGitHubのgistと連携しています。
私が作成したサンプルコードを別の人に共有することが可能になります。
テレワークが広がりつつある今、質問対応とかにも使うことができると思います。

packageのライブラリは使用できません。
つまり、firebase_coreやsqfliteなどの人気なライブラリの使用検証はできない事に注意が必要です。
まぁ上記のようなライブラリを使うような人はガリガリ開発をしているような方だと思いますので、そもそもDartPadを使用する必要はないかもしれませんね。
個人的には、DartPadを利用して教育的なことに使用するのにちょうどいいと思います。

DartPadを体験!

実際にDartPadを使用してみましょう。
DartPadは↓のリンクから開けます

DartPad

次に、Flutterのソースコードが動作するか検証してみましょう。
Flutterでは新規プロジェクトを作成するとシンプルなサンプルコードが生成されます。

そのソースコードに少し変更を加えているソースコードです。youtubeの高評価、低評価のボタンを意識してみました。
このソースコードをコピーしてdartPadで動作することを確認してみてください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ぬるぽ開発',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ぬるぽ開発 DartPadでFlutter'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter1 = 0;
  int _counter2 = 0;

  void _incrementCounter() {
    setState(() {
      _counter1++;
    });
  }
  
  void _incrementCounter2() {
    setState(() {
      _counter2++;
    });
  }

  void _crearCounter() {
    setState(() {
      _counter1 = 0;
      _counter2 = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton.icon(
              icon: Icon(
                Icons.thumb_up,
                color: Colors.white,
              ),
              label: Text('高評価'),
              onPressed: _incrementCounter,
              color: Colors.blue,
              textColor: Colors.white,
            ),
            Text(
              '$_counter1',
              style: Theme.of(context).textTheme.headline4,
            ),
            RaisedButton.icon(
              icon: Icon(
                Icons.thumb_down,
                color: Colors.white,
              ),
              label: Text('低評価'),
              onPressed: _incrementCounter2,
              color: Colors.red,
              textColor: Colors.white,
            ),
            Text(
              '$_counter2',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _crearCounter,
        tooltip: '初期化ボタン',
        child: Icon(Icons.clear),
      ),
    );
  }
}

高評価ボタン、低評価ボタンを押すと数が増えていきます。
×ボタンを押すと初期値に戻るというアプリケーションです。
このソースコードはFlutterの標準的なライブラリのみを使用しています。
そのまま、androidstudioやVSCodeで新規プロジェクト作成し、貼り付けると動作します（多分）

ソースコードを共有したい場合は、githubにアカウントを作成し、Gistにソースコードを残すと共有が可能になります。
そのまま、別のサイトのインラインフレームとして扱うこともできますので
ウェブページとしても活用できるのでぜひ使用してみください。

まとめ

このように簡単にソースコードの検証ができるのでかなり便利なツールです。
端末のスペックが低い場合にも検証ができるのがとても素晴らしいことだなと思います。
やろうと思えば、スマホやタブレットからでもソースコードを書いて検証することができますし、隙間時間で勉強！ってことも
Flutterに興味を持ってくれるひとが一人でも増えることを望んています。

それでは、see you again!