Google謹製のFlutterの使い方(1)

のえる

2018.12.20

スマートフォンアプリ開発が初期の頃から、AndroidとiOSのマルチプラットフォーム開発は行われてきました。
しかし、各OS仕様の変更や開発環境の制限など、様々な理由からマルチプラットフォームの実現は厳しいと思います。

そんな折、Googleから「Flutter」というマルチプラットフォーム開発用SDKが提供されました。
このSDKではGoogleが開発した「Dart」という言語を使用し、iOS/Androidのアプリを同時に開発することが可能となりました。

そこで今回はFlutterをインストールし、テンプレートアプリを起動できるまでを行って行こうと思います。

1 Flutter SDK インストール
2 Android Studio 設定
3 プロジェクト作成
4 アプリを実行する
- 4.1 iPhoneにインストール出来ない場合

Flutter SDK インストール

Flutterのインストールを行っていきます。
すでにインストールが終わってる方はコチラからスキップできます。

FlutterはGitHubにて公開されていますので　clone をするか、公式サイトからzipファイルをダウンロードします。


$git clone -b stable https://github.com/flutter/flutter.git

$git clone -b stable https://github.com/flutter/flutter.git

※記事作成時点でのstableバージョンは v1.0.0 です

ダウンロード後は flutter/bin までパスを通し、コマンドを実行できるようにします。


[Mac OS]
$export PATH=$PATH:`pwd`/flutter/bin

[Mac OS]

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

その後、下記コマンドを実行し、flutterの環境チェックを行います。


$ flutter doctor -v

$ flutter doctor -v

実行後、下記のような内容が表示されると思います。
このとき、「Connected device」以外でチェックがついていないものがある場合、正しく起動できない場合があります。
その際は内容がコマンド結果に表示されますので、逐次対応をします。
(詳細を表示する場合、コマンドオプションで -v を追加してください）


$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.6 17G4015, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.2)
[!] Connected device
    ! No devices available
! Doctor found issues in 1 category.

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.6 17G4015, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)

[✓] Android Studio (version 3.2)

[!] Connected device

! No devices available

! Doctor found issues in 1 category.

そしてお気づきかと思いますが、開発は Android Studio で行います。
また、iOSアプリケーションを開発する場合、Xcodeが必要となります。
※Android Studio および Xcode のインストール方法は割愛します。

Android Studio 設定

Android Studioにも設定を行います。
Preferences -> Plugins を開き、下記のものを検索＆インストールします。
(必要に応じてAndroid Studioを再起動してください)

Dart
Flutter
Flutter i18n

プロジェクト作成

さて、ここからが本題です。
Flutterのプロジェクトを作成していきましょう。

Android Studio -> File -> New -> New Flutter Project でプロジェクトを作成します。

コチラの画面では、作成するプロジェクトの設定を行います。
アプリケーションを作成するので、今回は Flutter Application を選択します。

アプリケーション設定では、アプリケーション名やFlutter SDKの場所などを設定します。

Project Name: プロジェクト名(小文字のみのスネークケース)
Flutter SDK Path: インストールしたFlutter SDKまでのパス(binの１つ上までを指定)
※Install SDKは押す必要がありません。
Project Location: プロジェクトを保存するディレクトリを指定
Description: プロジェクトの説明などを記載(記載する必要は特にないと思います)
Create project offline: 特にチェックする必要はありません

最後にアプリケーションのパッケージ名を設定します。

Company domain: 企業ドメイン(例: blitzgate.co.jp)
※ここに記載する場合、「ドメインの逆記載」をする必要はありません。
Package name: パッケージ名(ドメインの逆記載)
※故意に変更する必要がない場合、自動入力の内容でOKです。
Platform channel language: プラットフォーム内で使用可能な言語の追加
※KotlinやSwiftを使用可能にするかどうかです。

ここまで設定を行うと、プロジェクトが作成されます。

アプリを実行する

プロジェクト作成後 lib/main.dart が開かれていることと思います。
内容は下記のとおりです。


import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyHomePage(title: 'Flutter Demo Home Page'),

);

}

class MyHomePage extends StatefulWidget {

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

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State {

int _counter = 0;

void _incrementCounter() {

setState(() {

_counter++;

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text(

'You have pushed the button this many times:',

Text(

'$_counter',

style: Theme.of(context).textTheme.display1,

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: Icon(Icons.add),

);

}

この状態で Android Studio 上部にあるデバイス設定からアプリを実行するデバイスを選択。
そして Run(実行) をすることで、デバイスにアプリケーションがインストールされ、実行されます。

実行後、下記のような画面がデバイスで表示されれば、無事成功となります。

iPhoneにインストール出来ない場合

iOS12 でのアプリ実行時、下記のようなエラーが表示されることがあります。


Could not install build/ios/iphoneos/Runner.app on 935a686145273bd8c6b4ca9565f81f7e4d8953de.
Try launching Xcode and selecting "Product > Run" to fix the problem:
  open ios/Runner.xcworkspace
Error launching application on [iPhoneName].

Could not install build/ios/iphoneos/Runner.app on 935a686145273bd8c6b4ca9565f81f7e4d8953de.

Try launching Xcode and selecting "Product > Run" to fix the problem:

open ios/Runner.xcworkspace

Error launching application on [iPhoneName].

この場合、iPhoneの設定 -> 一般 -> プロファイルとデバイス管理 -> デベロッパAPP に、開発者を信頼する項目があります。
この項目にある「”xxx@example.co.jp”を信頼」という項目をタップし、信頼することでアプリをインストール・実行することができます。

続いて、開発のTipsはコチラです。

おすすめ記事

POPULAR

のえる

Full-stack Developer

記事一覧

簡単にドラッグ&ドロップができるjquery.pep.jsを実装する【デモ有り】

Google謹製のFlutterの使い方(2)

のえる

Full-stack Developer

お休みはゲーム三昧。目指すは生涯自由人。ツナ缶大好き。

記事一覧

Google謹製のFlutterの使い方(1)

Flutter SDK インストール

Android Studio 設定

プロジェクト作成

アプリを実行する

iPhoneにインストール出来ない場合

Git初心者必見！最低限これは覚えておこう

WebブラウザからWindowsアプリケーションを開く[追記あり]

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない

Google謹製のFlutterの使い方(1)

Flutter SDK インストール

Android Studio 設定

プロジェクト作成

アプリを実行する

iPhoneにインストール出来ない場合

Google謹製のFlutterの使い方(2)

Git初心者必見！最低限これは覚えておこう

Windows10でタッチパッドを無効化できない方に試して欲しいこと

WebブラウザからWindowsアプリケーションを開く[追記あり]

Composerが使えない環境でComposer用のライブラリを使う方法

Git初心者必見！最低限これは覚えておこう

Windows10でタッチパッドを無効化できない方に試して欲しいこと

WebブラウザからWindowsアプリケーションを開く[追記あり]

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない