Flutterを環境構築 + 初歩的なDartコードを書いてみた

Angela Yu氏のFlutter開発講座を受講開始しました。

Python・Kivyを使った開発だとビルドがうまくいかずムカついてしまったので、（笑）マルチプラットフォームでちゃんとしたオンライン講座があるフレームワークを使いたいと考えました。日常生活を便利するアプリをいろいろ作ってみたいなと思ってます。

Flutterについて

FlutterはGoogleが開発した、マルチプラットフォームで開発ができるアプリ開発用フレームワークです。開発言語には、こちらもGoogleが独自開発したDartという言語を使います。
Flutterを用いれば、ネイティブクオリティーのiOS・Androidアプリを手早く制作することができます。Flutterを使ってアプリ開発をしている企業にはGoogle、アリババ、ハミルトンミュージカル等々の大企業が挙げられます。

Flutterを使う利点の一つが、マルチプラットフォームであることです。Flutterは1つのDartコードからiOS・Androidアプリ、そしてWebアプリケーションをデプロイすることができます。
もう一つの利点が、UIツールキットを使ってレスポンシブ対応ができることです。レスポンシブ対応とは、Web開発で用いられるページレイアウトを様々な画面幅に適応させる手法です。UIツールキットには、レスポンシブ対応が可能な様々なレイアウト・デザイン用の部品が含まれています。

Flutter開発に必要なもの

Flutterにおける開発は、ウィジェットをレゴブロックの様に組み合わせていくという要領で行われます。これらのウィジェットは、ツリー構造で積み重なる形となります。（ウィジェットツリー）

Fultterの開発には、ハードに関してはWindowsかMac・Linux、ソフトに関してはAndroid StudioかVSCodeが必要です。私はAndroid Studioを使用しています。またGitをDLする必要があります。Flutterは、SDKとしてAndroid Studioに導入する形で使います。

必要なもの一覧

• Git：https://git-scm.com/download/win
• Android Studio:https://developer.android.com/studio
• Dart SDK: https://dart.dev/get-dart/archive
• Flutter SDK：https://docs.flutter.dev/get-started/install/windows

Flutterのコードの実行には付属のエミュレーターが使える他、Android・iOS携帯の実機をPCに接続してデバッグに使うことができます。

Android StudioでFlutterを使うには、Android StudioにFlutter・DartのプラグインをDLする他、Flutter SDKを環境変数に通して機能を使えるようにする必要があります。特に、プロジェクトの作成がうまく行かない場合はコマンドプロンプトでflutter doctorを実行すれば必要な作業が明白になります。

Dartコードを書いてみた

早速初歩的なDartコードを書いて実行してみました。Textウィジェットを画面中央に表示するコードです。

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Center(child: Text("Hello World"))));

丸カッコの終端にコンマを入れ、右クリック→"Reformat code with Dart format"を押せば・改行・インデントを含んだレイアウトに自動でリフォームしてくれます。

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: Center(
        child: Text("Hello World"),
      ),
    ),
  );
}

次に、アプリの基礎となるスカフォールド(Scaffold)ウィジェットを作ります。スカフォールドウィジェットでは、上・下のバーに加え左右のナビゲーション、右下のトグルボタン等々がセットになっています。

まずは、上のバー + ボディーに画像を表示するアプリとして見ました。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: const Text('I am Rich'),
          backgroundColor: Colors.blueGrey[900]
        ),
        body:Center(
          child: const Image(
            image:AssetImage("images/diamond-6687408_640.png"),
          ),
        ),
      ),
    ),
  );
}

次回はこうしたアプリの構造を踏まえたうえで、実用的なアプリの開発を目指します。頑張りますね！