【Flutter】アプリ開発入門 Flutter環境構築 Hello Flutter!!

# この記事で紹介すること

FlutterのSDKインストールから、Hello Flutterアプリ開発までを紹介

1. FlutterSDKインストール
2. Android Studio にFlutterプラグインのインストール
3. Android Studio にDartプラグインのインストール
4. Hello Flutterアプリ起動

※私自身すでに、Xcode、Android Studioはインストール済みでしたので、そちらはインストールを済ませておいてください。

# Flutterとは

[Flutter](https://flutter.dev/)は、Googleによって開発されたモバイルアプリケーションSDK

↓↓↓公式サイトから引用↓↓↓

```
Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.
（Google翻訳: Flutterを使うと、iOSとAndroid上で単一のコードベースから美しいネイティブアプリケーションを構築できます。)
```

# 各種インストール

基本的に[公式サイト](https://flutter.dev/docs/get-started/install)を参考にしてください。

## Flutter SDKのインストール

Macの方は、[こちら](https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.9.1+hotfix.6-stable.zip)

## FlutterのPathを通す

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

## Fluuterのプレダウンロード

```terminal:
$  flutter precache
```

## Flutter Doctorで確認

この`flutter doctor`は環境設定に何が足りないかを教えてくれるのでとても便利

```terminal
$ flutter doctor
```

おそらく、この時点では、以下のようになるかと、、

```terminal
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.6 18G95, locale en-US)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available
```

これは、Android StudioにPluginをインストールしていないから発生しているだけですので、気になさらずに、、

## Android StudioにFlutterプラグインのインストール

Android Studioを開いて、**Config>Plugins**を選択

<img width="901" alt="Screen Shot 2019-11-03 at 10.49.50 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/c6c7d2c5-002e-e2d7-efaf-0ef8c82a3b50.png">

検索ボックスで、**Flutteｒ**, **Dart**と検索してインストールを行ってください。

<img width="912" alt="Screen Shot 2019-11-03 at 10.52.39 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/487834e8-2880-e842-f2f2-67c82f101b48.png">
<img width="912" alt="Screen Shot 2019-11-03 at 10.52.49 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/7ac4bc8f-d45d-a9ff-ac33-a4d670c41a6f.png">

# Hello Flutterアプリの作成

Android Studioを開いて、**Start new flutter project**を選択

<img width="889" alt="Screen Shot 2019-11-03 at 10.15.41 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/ce06bdcd-fe50-8fcd-d286-8f39f2429b34.png">

<img width="912" alt="Screen Shot 2019-11-03 at 10.17.33 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/72fbc13a-7087-36b3-f939-ca904f4d03d6.png">

右上の再生ボタンを押して、アプリを実行してください。

![Screen Shot 2019-11-03 at 10.22.45 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/037c4af2-e370-92bd-d5d1-a4c17595dd24.png)

以下のようなデモアプリが起動されます。

<img width="404" alt="Screen Shot 2019-11-03 at 10.22.36 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/2d992e4c-2b0e-3b9a-d3a1-8313c42eddbf.png">

では、実際にコードを変更してみましょう。

こちらのファイル(**/lib/main.dart**)を以下のように変更します。

```dart:main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Hello Flutter'),
        ),
        body: new Center(
          child: new Text('Hello Flutter'),
        ),
      ),
    );
  }
}

```

これで再度アプリをRUNしてみてください。

↓↓↓↓↓↓完成↓↓↓↓↓↓

<img width="404" alt="Screen Shot 2019-11-03 at 10.26.19 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/5adb3f9a-06d8-5f53-c677-f9a945050051.png">

# 最後に

巷で話題になっていたFlutterを少しだけ触ってみました！

実際にここまでの開発はインストール含めて、30分程度でした！

引き続きキャッチアップしていきたいと思います！