LoginSignup
8
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@shohei-y(shohei yamamoto)

Flutterハンズオン（超入門）

Posted at

Flutterって何？

Flutter (フラッター) は、Googleによって開発されたフリーかつオープンソースの
モバイルアプリケーションフレームワークである。FlutterはAndroidやiOS向けの
アプリケーションの開発に利用されている。Fuchsiaではアプリケーションの開発
は主にFlutterを利用して行われている[4]。

2018年12月4日、ロンドンで開催されたFlutter Live '18にて、初の正式版となる
Flutter 1.0のリリースが発表された[5]。

最も重要なことは、「マルチプラットフォーム」の開発ができるフレームワークであるということです。

作りたいアプリがある場合に、通常の開発であれば、動作させる環境毎に言語・開発環境が異なります。その為、全ての環境のアプリケーションを作るには、それぞれ技術を保有する人材が必要となり１つのアプリを作るコストが大きくなります。
新規事業で、新しいアプリケーションを作る場合にブラウザ（WEB）アプリケーションが多いのは、動作させるブラウザがAndroid、iPhone、Windows、Macをカバーしている為、１つのブラウザ（WEB）アプリケーションを作るだけで実現でき比較的難易度が低いから選定されています。

image.png (127.7 kB)

Flutterでは、Dart言語とFlutterFWで、全てのアプリケーションを作成可能であり、開発コストを大幅に削減することが可能です。
image.png (81.1 kB)

OS固有の技術を利用する場合は、KotlinやSwift、C++などで拡張する必要があります。
どんなことを実現したいアプリケーションなのかで、利用技術を選定してください。

ハンズオンのゴール

Flutterでの開発方法、動作確認を学ぶ
開発選択肢の１つに加えてもらう

Step

  1. 環境構築（Mac／Windows）
    • 所要時間：45分
  2. HelloWorld
    • 所要時間：15分
  3. ボタンを配置してみる
    • 所要時間：15分
  4. 画面遷移してみる
    • 所要時間：15分

環境構築（Mac／Windows）

- 所要時間：45分

この作業のゴール：Mac
image.png (575.8 kB)

この作業のゴール：Windows
image.png (112.4 kB)

  1. Flutter SDKをインストールする

    1. https://flutter.dev/docs/get-started/install

      • MacOS

        cd ~/development
unzip ~/Downloads/flutter_macos_1.22.6-stable.zip

export PATH="$PATH:`pwd`/flutter/bin"

      • Windows

        C:\src\flutter あたりに解凍

        c:\src\flutter\flutter_console.bat を実行
        image.png (166.3 kB)

  2. FlutterでWindows/Macを有効にする

    flutter channel dev
flutter upgrade
flutter config --enable-windows-desktop
flutter config --enable-macos-desktop

  3. Flutter doctorで必要なアプリケーションをインストールする

    flutter doctor
    • MacOS
      • Android Studio
        • Dart/Flutterプラグイン設定
      • Xcode
      • VS Code
        • Dart/Flutterプラグイン設定
      • Chrome
    • Windows
      • Android Studio
        • Dart/Flutterプラグイン設定
      • VS Code
        • Dart/Flutterプラグイン設定
      • Visual Studio
        • C++ (WindowsDesktopアプリケーション開発環境)
      • Chrome

HelloWorld

- 所要時間：15分

プロジェクトを作成し、VSCodeで表示

プロジェクト作成

flutter create handson
image.png (1.1 MB) image.png (201.4 kB)

Flutterのディレクトリ構造説明

  • pubspec.yaml
    image.png (487.6 kB)
    • プロジェクト定義ファイル
      • 類似
        • Node.js - package.json
        • PHP Larabel - composer.json
        • Python - requirements.txt
  • lib/*
    image.png (496.9 kB)
    • Flutterの実行ロジックを格納するディレクトリ
    • 最初に読み込みされるファイルは、lib/main.dart
  • test/* , integration_test/*
    image.png (463.1 kB)
    • Flutterのテストロジックを格納するディレクトリ
  • android/* , ios/* , macos/* , web/* , windows/*
    image.png (455.0 kB)
    • 実行環境毎の定義ファイルや、拡張ロジックを格納するディレクトリ
    • アプリ系（android/iso/macos）などのマイク機能、カメラ機能を利用します。などの許可定義などもここ
    • ビルド定義もここになるので、うまくビルドが通らない時は、このディレクトリのファイルを変更する
  • build/*
    image.png (441.1 kB)
    • ビルドで作成された実行ファイルが格納されるディレクトリ

Flutterを実行してみる

flutter run 
# macos
flutter run -d macos

# windows
flutter run -d windows

# chrome
flutter run -d chrome

# ios
open -a simulator 
flutter run
image.png (863.8 kB)

HelloWorldの文字を追加してみる

lib/main.dart
            Text(
              'Hello World!!!',
            ),

  • main.dart ファイルを開いて、９５行目あたりにのTextを１つ追加する。
    image.png (164.4 kB)

  • コマンドプロンプト・ターミナルでホットリロード shift + r を実行
    image.png (946.9 kB)

ボタンを配置してみる

- 所要時間：15分
lib/main.dart
            RaisedButton(
              child: Text('ボタンです！'),
              onPressed: () {},
            ),
  • main.dart のHello WorldのText要素の下に、RaisedButtonを配置してみる。
    image.png (830.9 kB)
lib/main.dart
            RaisedButton(
              child: Text('ボタンです！'),
              onPressed: () => showDialog(
                context: context,
                builder: (_) {
                  return AlertDialog(
                    title: Text("message"),
                    content: Text("Flutterって面白い！"),
                    actions: <Widget>[
                      // ボタン領域
                      FlatButton(
                        child: Text("閉じる"),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  );
                },
              ),
            ),
  • ボタンを押下したときの、アクション onPressed を追加してみる。
    image.png (795.1 kB)

画面遷移してみる

- 所要時間：15分

遷移先の画面作成

sub_container.dart
import 'package:flutter/material.dart';

class SubPage extends StatefulWidget {
  @override
  _SubPageState createState() => _SubPageState();
}

class _SubPageState extends State<SubPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Subページです'),
      ),
      body: const Text('Subページです!!'),
    );
  }
}
  • lib/sub_container.dart で新規ファイルを作成する。
    image.png (463.9 kB)

遷移処理の追加

lib/main.dart
import 'sub_container.dart';
  • 作成したファイルをimport
    image.png (106.2 kB)
lib/main.dart
      routes: <String, WidgetBuilder>{
        '/sub': (BuildContext context) => (SubPage()),
      },
  • 画面遷移を担う、routesを設定
    image.png (222.8 kB)
lib/main.dart
            RaisedButton(
              splashColor: Colors.purple,
              child: Text('Subページに移動'),
              onPressed: () => {Navigator.pushNamed(context, '/sub')},
            ),
  • 遷移用のボタンを追加
    image.png (220.7 kB)

動かしてみる

image.png (816.1 kB) image.png (812.3 kB)

締め

Flutterの技術記事は増えてきているので、調べてみるといろいろ出てきます。
私が学習に利用したサイトを紹介します。

Flutter/Dartは、Reactをオブジェクト指向にした感じだなーと。
マルチプラットフォームで動かせることは、非常に魅力的な要素なので少しアプリ作ってみるときにFlutterってあったな〜と思い出してもらえれば幸いです。

8
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?