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初心者必見！最低限これは覚えておこう

イラストレーターで座標に変な小数点が入ったときに消す方法

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

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

WindowsのDockerでMySQLが起動しない

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

Flutter SDK インストール

Android Studio 設定

プロジェクト作成

アプリを実行する

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

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

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

イラストレーターで座標に変な小数点が入ったときに消す方法

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

PHPのセッションが勝手に消えてしまう問題と解決法

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

イラストレーターで座標に変な小数点が入ったときに消す方法

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

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

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

WindowsのDockerでMySQLが起動しない