FlutterのGet startedだけやってみた

最近お疲れ気味だったので気分転換にFlutter触ってみる

Flutterてちらほら目にはしてたけど、いまいちわかってなかったので
Get startedだけやってみる

とりあえず、「iOS, Androidのアプリを1ソースコードで書ける
Googleの作った素敵なフレームワーク
JavaScriptではなくDartで書かれてる」くらいのイメージ

Flutter SDKをMacにインストール

基本的に公式の指示に従うだけ
こんな感じでflutterコマンド打てるようになってれば大丈夫なはず！

$ flutter --version
Flutter 1.21.0-9.2.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 81a45ec2e5 (9 days ago) • 2020-08-27 14:14:33 -0700
Engine • revision 20a9531835
Tools • Dart 2.10.0 (build 2.10.0-7.3.beta)

他ツールのインストール

flutter doctorとかいうコマンドがあって
flutter動かすために必要なツール入ってるか見てくれる

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E287, locale ja-JP)
[✗] Android toolchain - develop for Android devices
   ✗ Unable to locate Android SDK.
     Install Android Studio from: https://developer.android.com/studio/index.html
     On first launch it will assist you in installing the Android SDK components.
     (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
     If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
     You may also want to add it to your PATH environment variable.

[✗] Xcode - develop for iOS and macOS
   ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
     Download at: https://developer.apple.com/xcode/download/
     Or install Xcode via the App Store.
     Once installed, run:
       sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
       sudo xcodebuild -runFirstLaunch
   ✗ CocoaPods not installed.
       CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
       Without CocoaPods, plugins will not work on iOS or macOS.
       For more info, see https://flutter.dev/platform-plugins
     To install:
       sudo gem install cocoapods
[!] Android Studio (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)
   ✗ Flutter plugin not installed; this adds Flutter specific functionality.
   ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
   ! No devices available

! Doctor found issues in 5 categories.

なんか色々言われた。

iOS setupとAndroid setupに従ってAndroid Studio、Xcode入れたり、FlutterにPlugin入れてくとissue解決してく！
（Connected deviceは面倒だったので一旦スルー）

ちなみに、Android Studioインストールしただけでは上手くいかず
Android SDK Command-line Tools(Latest)をinstallしないといけないトラップに自分はハマった👶

コード書いてみる

Flutterのplugin入った状態のAndroid Studioで
Create New Flutter Projectを選択して新しく作成

/pubspec.yamlに依存関係追加
英単語返却してくれるっぽいやつ

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
+  english_words: ^3.1.5

dev_dependencies:
   flutter_test:​

依存関係をインストール

$ flutter pub get
Running "flutter pub get" in flutter...                             1.3s

/lib/main.dart を以下で書き換える

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Startup Name Generator',
     home: RandomWords(),
   );
 }
}

// #docregion _RandomWordsState, RWS-class-only
class _RandomWordsState extends State<RandomWords> {
 final _suggestions = <WordPair>[];
 final _biggerFont = TextStyle(fontSize: 18.0);

 // #enddocregion RWS-class-only
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Startup Name Generator'),
     ),
     body: _buildSuggestions(),
   );
 }

 Widget _buildSuggestions() {
   return ListView.builder(
       padding: EdgeInsets.all(16.0),
       itemBuilder: /*1*/ (context, i) {
         if (i.isOdd) return Divider(); /*2*/

         final index = i ~/ 2; /*3*/
         if (index >= _suggestions.length) {
           _suggestions.addAll(generateWordPairs().take(10)); /*4*/
         }
         return _buildRow(_suggestions[index]);
       });
 }

 Widget _buildRow(WordPair pair) {
   return ListTile(
     title: Text(
       pair.asPascalCase,
       style: _biggerFont,
     ),
   );
 }
// #docregion RWS-class-only
}
// #enddocregion _RandomWordsState, RWS-class-only

// #docregion RandomWords
class RandomWords extends StatefulWidget {
 @override
 State<RandomWords> createState() => _RandomWordsState();
}

Simulatorを起動する

Hot Reloadを有効にしてると
ソースの変更検知して画面も更新される

でけた！！

所感

良さげ。
webアプリばっかりでアプリ開発経験なかったけど
Flutterなら割と気軽にトライできそう！
アプリ書く機会あったらFlutter使ってみよう🌝