Flutter初心者が知るべき基礎知識とは|環境構築とともに解説

FlutterはGoogleが開発したオープンソースのUIソフトウェア開発キットです。iOSとAndroidの両方のアプリケーションを、一つのコードベースで開発できるのが強みで、さまざまなアプリ開発に使えます。

Flutterには他の言語にはないようなさまざまなメリットがあります。この記事ではFlutterの基礎知識や便利な機能を解説します。環境構築の方法も解説しているので参考にして下さい。

Flutterの基礎知識

まず、Flutterの基本概念とメリット、そしてFlutter開発の基本であるDart言語について解説します。

Flutterとは：基本的な特性

Flutterは、高性能で美しいアプリを一つのコードベースで開発できるDart言語をベースにしたフレームワークです。主に3つの特性があります。

1. クロスプラットフォーム対応
2. ホットリロード
3. ウィジェットベースのUI

いずれもWenアプリケーション開発においては大きなアドバンテージとなります。以下それぞれの強みを説明します。

Flutterの利点①：クロスプラットフォーム対応

クロスプラットフォームはFlutterの最大の利点とも言える機能です。一度のコーディングで、iOSとAndroidの両方のプラットフォームに適応するアプリケーションを作成できます。

同一のコードベースで複数のプラットフォームをカバーできるため、開発時間の短縮、開発コストの低減を実現できます。

また、一つのコードベースを共有することで、アプリの一貫性が保たれ、バグの特定や新機能の追加が簡単になるのもメリットです。プラットフォームごとにコードを変えると、それぞれ別にデバッグやアップデートを行う必要がありますが、Flutterはその過程を省略できます。

Flutterの利点②：ホットリロード

ホットリロードは、コードの変更が即座にアプリに反映される機能です。これにより、アプリの変更を素早く、視覚的に確認できます。本来ならアプリの画面や動作を確認するにはビルドという過程を踏む必要がありますが、Flutterはその過程を省略できるため、コードのエラーやバグを素早く発見し、開発を迅速に進めることが可能です。

Flutterの利点③：ウィジェットベースのUI

Flutterは基本的にウィジェットによって構成されています。ウィジェットとは、ユーザーインターフェースを構築するための再利用可能なコンポーネントで、ボタンやテキストボックス、スライダーなど様々な要素のことです。ウィジェットを組み合わせることで、様々な機能を簡単に実現できます。

ウィジェットはツリー状に設計されており、全体の構成そのものがウィジェットであることが特徴といえます。他のフレームワークでは、画面の見た目を作る要素と、画面全体の構成は別物であることが多く、これはFlutterの大きな特徴と言えるでしょう。この特性により、アプリ内での状態管理が容易になる点もメリットです。

Dart言語とは

FlutterのベースにあるのがDartというプログラミング言語です。Googleによって2011年に開発されました。JavaScriptが持つ問題点の改善を目指しており、主にアプリ開発において使われています。

そのDartの主な特徴として、下記が挙げられます。

• オブジェクト指向型
• 動的型付けと静的型付けの使用が可能
• JavaScriptに似ている
• UIのために非同期/イベント駆動を組み合わせられる
• パフォーマンスが高速

主にFlutterにおいて使われる言語ですが、型付けや関数定義の方法など基本的な文法はマスターしておく必要があります。公式ドキュメントに書かれてあるのでしっかりと読んでおきましょう。

Flutterの環境構築

Flutterを学びたい方はまずは環境構築から始めましょう。環境構築にはFlutterと開発環境のインストールが必要です。今回はそれぞれIOSとAndroidアプリのエミュレータが付属したXcodeとAndroid Studioの導入手順も含めて解説します。

環境構築の手順

まず、Flutterを使う前に環境構築をしましょう。

以下の3つのプロセスに分けられます。

• Flutter SDK のインストール
• Android Studioのインストール
• Xcodeのインストール

まずはFlutterの公式サイトからSDKをダウンロードし、インストールします。

インストールしたら「flutter」コマンドを使えるようにパスを通しましょう。Mac/Linuxの場合の具体的な手順は以下のようになります。まずはターミナルを開き、インストールしにディレクトリに移動しましょう。

cd ~/development/flutter

次に、Flutterのbinディレクトリへのパスを、シェルの設定ファイルに追加し、最後に設定ファイルを読み込みます。bashではなくてzshを使っている場合はzshrcに変更してください。
これでFlutterコマンドを使う準備は完了です！

echo 'export PATH="$PATH:`pwd`/bin"' >> ~/.bashrc
source ~/.bashrc

次にAndroid Studioをインストールします。Android StudioはAndroidアプリの公式開発環境で、こちらのサイトからインストール可能です。

インストールが終わるとまずAndroid Studioを起動し、「SDK Manager」を開き、次に「Android SDK」欄の「SDK Tools」タブを開きます。開いた画面に出てくる「Android SDK Command-line Tools (latest)」にチェックを入れ、「Apply」を押します。

そしてAndroid studioにFlutterのプラグインを入れましょう。Android Studioを開いた後File>Settings>Pluginsでプラグイン画面にいき、FlutterとDartのプラグインを選択します。

最後にMacの方は、Xcodeをインストールしましょう。XcodeはiOSのアプリの開発環境、シミュレータです。Xcodeはこちらからインストールできます。

こちらは言われた手順のとおりに進めればインストール完了です。途中でサインインが求められるので、自分のApple IDを入力し、最新のバージョンをインストールしましょう。

シミュレータの起動

開発するときはまずはシミュレータを起動します。

Android Studioを起動し、Start a new Android Studio projectをクリックすることでアプリの開発準備に移れます。

Xcodeはターミナルで以下のコマンドを入力して起動しましょう。

$ open -a Simulator

これでAndroid、iOS両方のアプリの開発準備が整いました。

エミュレータの起動

次にAndroidエミュレータを起動します。Tool > Device Managerからデバイスマネージャーを開き、Create device ボタンを押しましょう。

するとデバイスの選択画面が出てきます。ここではどのデバイスでも構いません。その後はシステムイメージを選択し、名前などの設定を入力し、エミュレータの設定は完了です。システムイメージはRecommendで表示されるものの中から選ぶとよいでしょう。

「▶︎」ボタンを押してエミュレータを起動してみてください。

Hello World：最初の一歩

次にシンプルに「Hello World」を表示させてみましょう。ここではAndroid studioの例を説明します。

Android studioのFile > New Flutter Project からFlutterファイルを作成します。次にプロジェクト名を決めるように言われますが、何でも構いません。

すると、main.dartというファイルが表示されますが、Flutterではこちらのファイルを編集してアプリ開発を進めていきます。重要なので覚えておきましょう。

main.dartの内容を以下のように書き換えて下さい。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

エミュレータに「Hello World」と表示されると完了です！

Flutterのテクニック紹介

最後にFlutter使う上で便利な3つの機能を紹介します。ここで紹介している3つの機能を意識すればより柔軟にアプリを開発できるので、ぜひ使ってみて下さい！

ウィジェット

先程も説明したように、ウィジェットはFlutterアプリを構成する要素です。ウィジェットは状態管理を効率的に行ったり、マテリアルデザインという完成されたデザインでおしゃれなアプリを作れたり、さまざまなメリットがあり、Flutterの基礎を支えています。

アプリの基盤となるウィジェットを作ってみましょう。まずはlibフォルダ内の任意の場所に、dartファイルを作成します。

新しいウィジェットを作成するためには、新しいDartクラスを定義します。試しに作成したファイルに以下のコードを書き込みましょう。

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

ここで重要なのはStatelessWidgetとStatefulWidgetの違いです。以下の違いを覚えておきましょう。

• StatelessWidget:　状態を持たないウィジェットです。一度ビルドされたら、内部データは不変となります。例えば、テキストラベルやアイコンなどがこれに該当します。
• StatefulWidget:　状態を持つウィジェットです。ユーザーのインタラクションや時間経過などによって内部データが変化する可能性があります。例えば、チェックボックスやテキストフィールドなどがこれに該当します。

Flutterではこの違いを理解して使い分けることが重要です。

状態管理

Flutterアプリケーションで重要なのが、状態管理です。

状態とは「アプリケーションが保持するデータ」のようなものです。Flutterは状態をベースにおいてアプリケーションを設計します。状態をどういうフローで、どこで保持するか、状態が破綻なく回るようにします。

状態管理を適切に行うことで、アプリケーションの構造を整理し、コードの可読性や保守性が向上します。Flutterでは、管理が適切に行われていると、アプリの動作が予測しやすくなります。これにより、バグの発見や新機能の追加が容易になります。

Flutterには多くの状態管理のアプローチやパッケージが存在し、それぞれを使い分けることが重要です。ここでは特に重要な状態管理の手段としてRiverpodを説明します。

Riverpodを使うにはflutterディレクトリのpubspec.yamlというファイルに以下のコードを追加しましょう。

dependencies:
  flutter_riverpod: ^latest_version #最新のバージョンを記述

RiverpodではProviderを使って状態を管理します。以下のように記述します。

final helloProvider = Provider<String>((ref) {
  return 'Hello, Riverpod!';
});

このProviderは、アプリの他の部分で以下のようにアクセスできます。

class MyConsumerWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ProviderからStringを読み取り
    final myString = ref.watch(myProvider);
    return Text(myString);
  }
}

下記のコードでは「Hello, Riverpod!」というテキストを渡しています。これを応用すれば、例えばユーザーの入力したアンケート情報を柔軟に受け渡すことなどが可能です。

Riverpod以外でもflutterにはさまざまな状態管理の手段があります。実際に調べてみて使ってみましょう。

ナビゲーションとルーティング

ナビゲーションは、アプリ内での画面を変化・推移させる機能です。FlutterではNavigatorクラスを使用して画面の推移を制御します。以下のような形式で記述します。

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => SecondScreen(),
  ),
);

Navigatorクラスでは、新しい画面（ページ）を開く際はpushし、閉じる際はpopというメソッドを記述します。

ルーティングは画面の遷移先を定義する機能です。Flutterでは、MaterialAppやCupertinoAppウィジェットとrouteでルートを定義できます。

MaterialApp(
  routes: {
    '/': (context) => HomeScreen(),
    '/second': (context) => SecondScreen(),
  },
);

routeで定義したパスにはNavigator.pushNamedで移動可能です。

Navigator.of(context).pushNamed('/second');

Flutterではナビゲーションとルーティングの技術を使用することで、ユーザーが直感的に使えるアプリケーションを構築することができます。

エンジニアとして転職を考えるあなたへ

①自分のスキルについて詳しく知る
②自分のスキルについてより知識や知見を深める
②転職活動成功のノウハウを学ぶ

以上のようなポイントを抑えることで、
あなたのスキルをより強度で豊かなものへと成長させると共に、転職活動の成功をおさめることにもつながるでしょう。
このサイトでは今回紹介した内容以外にも、たくさんの情報を記載しております。
下記の記事にも触れておくことは、あなたのスキルアップやキャリアアップの後押しになることでしょう。
なぜRubyの求人は少ないの？その思い違いに至る原因を暴露
Rubyの需要って何？現代でどんな活躍をしているのか実例を紹介
JavaScriptの求人ってどうやって見極めたらいいの？オススメの方法を紹介