Flutter入門 - TalentX Tech Blog

はじめまして！MyReferのフロントエンド開発を行っている佐藤です。
MyReferでは、Webブラウザ版だけでなくモバイルアプリも提供しています。

tech.talentx.co.jp

初めてFlutter開発に携わる機会ができたので、Flutter初学者向けに環境構築と、基本ウィジェットの紹介を行います。

Flutter環境構築
初期コード解説
ウィジェット
- ウィジェット例
まとめ
最後に

Flutter環境構築

AppStoreでXcodeのインストールを行います。

Android Studio をインストールします。 IDEはvscodeでもいいですが、Android SDKやAndroidエミュレータなどAndroidアプリ開発で必要な設定をするのにAndroid Studioが必須でした。

Flutter SDKのダウンロードを行います。

ドキュメント記載の内容に則り、ダウンロードされたものを解凍しホームディレクトリにdevelopmentフォルダを作成後、developmentフォルダ内に移します。

Flutterパスの環境変数設定します。

例 )

open -e ~/.zshrc
export PATH=$HOME/development/flutter/bin:$PATH
source ~/.zshrc

flutter --versionでバージョン確認できたら成功です。
またflutter doctorというコマンドでflutterが正常にインストールできているか確認できます。この時点での実行結果は下記のとおり、2件のエラーが出ていました。

[✗] Android toolchain - develop for Android devices
...
[✗] Xcode - develop for iOS and macOS

表示されたエラー内容に従って、SDKマネージャーのインストールや、Androidライセンスの同意、後続で紹介するxcodeでiosシミュレーターのインストールなどを行うと解消されました。

iosシミュレーター起動とインストール

Mac画面上部のメニューのXcode→Open Developer Tool→Simulatorをクリックするとシミュレーターが起動します。
また、任意のシミュレーターのインストールは下記手順で行います。

Window→Devices and Simulatorsを選択します。

左下の「＋」ボタンを押下するとシミュレーターの作成が可能です。

Androidエミュレーター作成

Android StudioのサイドメニューにあるDevice ManagerからAndroidデバイスを追加します。 Select Hardware、System Imageでお好みのハードウェアとosバージョンを選択してください。

Finishで設定した仮想デバイスが生成されます。

startボタンでエミュレーターが起動したら完了です。

vscodeのFlutterプロジェクト作成とシミュレーター起動

あとはvscodeで「Flutter」と「Dart」拡張機能をインストールすればflutterプロジェクトの生成とシミュレーター、エミュレーターの起動もできます。

拡張機能インストール後、Cmd+Shift+Pでコマンドパレットを開き"Flutter: New Project" と入力し、選択
プロジェクトの種類を選択します（例：Application）
プロジェクトを保存するフォルダを選択
プロジェクト名を入力します

xcodeでiosシミュレーターを起動してから、vscodeの右下のメニューを見るとデバイス選択メニューがあるのでそれを押下すると、起動したiosシミュレーターやAndroidエミュレーターの選択ができます。

任意のデバイスを選択するとシミュレーターが立ち上がり、左メニューにある実行とデバックを押下するとbuildが開始され、プロジェクト作成時に生成されたmain.dartの内容がシミュレーターに反映されます。

初期コード解説

プロジェクト作成時に生成されるmain.dartの中身を簡単に解説します。

void main() {
  runApp(const MyApp()); 
}

上記はアプリのエントリーポイントです。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', 
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // アプリのテーマカラー
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'), // 初期画面（ホーム画面）
    );
  }
}

こちらではアプリ全体の設定（テーマや画面遷移の管理）を設定しています。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title; // 画面タイトル（MyAppから渡される）

  @override
  State<MyHomePage> createState() => _MyHomePageState(); // ホーム画面の状態を管理するクラスを作成
}

StatefulWidgetと言われるウィジェットからextendsしています。
FlutterにはStateless（ステートレス）ウィジェットとStateful（ステートフル）ウィジェットの2つのタイプが存在します。
State（状態）とはウィジェット内で変化できる値やデータのことで、Statelessは「状態を持たない」ことを示し、Statefulは「状態を持つ」ことを示します。
今回はStatefulWidgetを使用していて、状態を持つ画面（カウンターの値を管理）であることがわかります。

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

  void _incrementCounter() {
    setState(() {
      _counter++; 
    });
  }

  //  画面のレイアウトを描画する関数（buildメソッド）
  @override
  Widget build(BuildContext context) {
    return ...
  }
}

ホーム画面の状態管理クラス（カウンターの増加を管理）が定義されています。その中では、カウントアップ関数_incrementCounter()の他に、画面のレイアウトを描画する関数buildメソッドというものが使用されています。このメソッドはウィジェットの見た目（UI）を定義する役割を持っています。

return Scaffold( // 画面レイアウトを提供するウィジェット
        appBar: // appBar:ヘッダー部分,
        body: // 画面メイン部分,
        floatingActionButton: // 画面右下のボタン, 
    );

buildメソッドの戻り値には、FlutterでUIを構築するウィジェットと言われるものを渡します。
今回は、ScaffoldウィジェットというFlutterアプリの基本的なレイアウトを作るウィジェットを返却しています。
以上のコードで、下記のようなヘッダーとフッターボタンがあるカウントアップアプリが生成されています。

ウィジェット

ウィジェットには、主に単体で利用できるウィジェット（例:Text、Icon、Image）と、レイアウトを司るウィジェット（例:Column、Row、Container）があります。

ウィジェット例

ウィジェット	説明	コード
Text	テキスト表示	`Text('Hello,World!')`
Center	上下左右中方表示	`Center(child: //要素)`
Column	縦方向にウィジェット配置	`Column(children: [Text('Item 1'), Text('Item 2')])`
Row	横方向にウィジェット配置	`Row(children: [Icon(Icons.star), Text('Star')])`
Container	背景色やサイズの設定	`Container(width: 100, height: 100, color: Colors.blue)`

Textウィジェット

例として、長文テキストの2行目以降省略表示させたい時はTextウィジェットに、さらに引数を追加して表現します。 cssだと下記のようなコードです。

.line-clamp {
  width: 300px; /* 必要に応じて設定 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最大2行まで */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

Textウィジェットだと下記のようなコードで省略表示されます。

 body: Center(
        child: Text(
          "長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列",
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
        ),
      ),

Image.assetウィジェット

下記のようなコードで画像を表示できます。

...
body: Center(
        child: Image.asset(
            'assets/sample.png',
          width: 300,
        )
      ),

Paddingウィジェット

下記のようなコードで余白を指定できます。

  body: Container(
        color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
            '長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト'),
          )),

OutlinedButtonウィジェット

ボタンウィジェットも用意されていて、下記はアウトラインボタンです。

body: Center(
        child: OutlinedButton(
            onPressed: () {
              print("テスト");
            },
            child: Text("ボタン"),
      ),

Scaffoldウィジェット

Scaffold は Flutterアプリの基本的なレイアウトを作るウィジェットです。アプリの骨組みを提供し、画面全体の構造を簡単に作成できます。 appBar、body、floatingActionButtonプロパティなどを使って簡単に画面全体のレイアウトを構築できます。

Scaffold(
      appBar: AppBar(

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,

        title: Text(widget.title),
      ),
      body: Center(
        child: OutlinedButton(
            onPressed: () {
              print("テスト");
            },
            child: Text("ボタン"),
      ),

      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );

まとめ

今回はFlutter初学者向けに環境構築から基本的なウィジェットの使い方まで紹介しました。
その一部を紹介しましたが、Flutterでは非常に多くのウィジェットが用意されています！
これらのウィジェットを組み合わせていくことで、簡単にマテリアルデザインで実装された操作性をユーザーに提供できることがわかりました。
またカスタマイズ性も高く、基本ウィジェットを組み合わせて複雑なUIも実現可能です。

最後に

現在、TalentXでは一緒に働く仲間を募集しております。

talentx.brandmedia.i-myrefer.jp

カジュアル面談も行っておりますので、ぜひご応募ください！

i-myrefer.jp