Open12

Flutter入門

世の中には色々と勉強する手段があるね

とにかく入門したい。何から手をつけようと考えあぐねて

  • Google Codelabs
  • Youtube
  • Zenn/Qiita/Note
  • Unity
  • 書籍

などなどあってどれやろうか迷ってる

↑2つやってみた。Firebaseとの連携のイメージがついたのはよかった!
実際Firebaseもほぼ初めてだったんで概要掴めたのはよかった。

ただ、如何せんFlutterアプリの仕組みやらが理解できたから開発できるか?と問われると厳しいと思う。
(そりゃそうだハンズオンでなぞっただけだし)

他の方法を模索してみよ

Youtubeで解説動画やってくれてる方いらっしゃったのでみてみる。

https://www.youtube.com/watch?v=-G7nW26N7_4

全体像わかりやすかった!
個人的に全体像を教えてもらえたのはよかった!
短時間で大まかに教えてもらえたんで、開発中に何を調べれば良いかのヒントになると思う

全体像〜基本的なWidgetの使い方

  • 公式デフォのカウントアップアプリを改造しながらだからわかりやすかった!
  • やっぱり有識者が話してると便利なショートカットやポイントを抑えてくれている事が◯
    • option + Enter でWidgetに対する操作をショートカットできるのは嬉しい
    • Ctrl + D デバック起動(Command + D だと行削除)
    • 公式のカウントアップアプリではmaterialデザインのパッケージを利用してる(Androidアプリでよくみかける)
    • へー!公式にCookBookってのがあるんだ
    • Navigator仕込むと一気にアプリ作ってる気分になる!CookBook通りにして超簡単実装やで
    • 画像扱うときは公式のWiget catalogみればいいんだね!

画面遷移


Root

Next

  • 新しい画面を作成する場合は、新しいファイルを作成し新しいクラスをその中に作成する
  • RaiseButtonのonPressedで定義する関数内にNavigationを非同期で実装すると簡単に実現できる
  • cookbookにある「Navigate to a new screen and back」か「Navigate with named routes」のやり方が基本
  • Navigate to a new screen and back
    • Navigator.pushのMaterialPageRouteで遷移先のクラス指定
    • Navigator.pop(context) で戻れる
  • Navigate with named routes
    • RootAppのコンストラクターに追加のプロパティ(initialRoute およびroutes)を提供する
      • routesにはルーティング全て定義する
    • ナビゲーションの際には定義したルーティングを指定する ex) Navigator.pushNamed(context, '/second');
    • Navigator.pop(context) で戻れる
  • 値渡し
    • Secondページのクラス内直後に同名のコンストラクタを定義し、その際に引数をつけることで値渡し可能となる
    • 遷移時のNavigatorのクラス指定時の引数に渡したい値を設定
  • 値戻し
    • Navigator.pushの戻り値を受け取るようにする(final res = Navigator.push( ... );)
      • async/awaitで受け取ること
    • Navigator.pop(context, {戻したい値})

↑の画像で貼り付けた方なイメージ

画像やアイコンを配置する方法+文字装飾

https://api.flutter.dev/flutter/widgets/Image-class.html
pubspec.yml
flutter:
assets:
  - images/cat.png
  - images/2x/cat.png
  - images/3.5x/cat.png
  • アイコン: Icon(Icons.audiotrack, color: Colors.green, size: 30.0)

文字装飾

  • Textのstyleプロパティに設定。
  • WidgetカタログのTextのTextStyleにある属性が利用可能
  • colorとforegroundは同時に適用できない、などの制約があるので注意
  • カスタムフォント: pubspec.yml のfont要素に設定することが可能
  • RichText: 文章の中に異なるスタイルを当てた文字列を用意したい時などに利用する
  • Default TextStyle: アプリのデフォルトのスタイルを定義できる。配下にあるテキストのスタイルに適用される。

入力フォーム

  • 今回はWidget Catalogでなく、CookBookのFormsで紹介する
  • TextField(): テキストフィールドを使用すると、ユーザーはアプリにテキストを入力できます。これらは、フォームの作成、メッセージの送信、検索エクスペリエンスの作成などに使用されます。
    • autofocusフィールド: 初期起動時にフォーカルが当たるので、ユーザのアクションが1つ省略できる
    • forcusNode: (これは使わないと思うのでskip)
    • onChanged: 値が変わるたびに呼び出される関数を定義する。
    • 変数に格納しておいて、submit時にサーバーに送る感じで使う。
  • TextFormField(): TextFieldの拡張(validate扱える)。Formで囲う必要あり。validatorについてはBuild a form with validationを参照。
    1. FormとGlobalKeyを作成する
    2. TextFormFieldを使用して検証ロジックを追加する
    3. フォーム送信ボタンを用意する: ボタンの中に_formKey.currentState.validate()で検証結果を判断する

閑話休題: flutter app 接続

  1. Flutterプロジェクトでiosアプリ登録(GoogleService-Info.plistをios/Runnerに保存)
  2. XcodeでAdd Files to "Runner" -> GoogleService-Info.plistを選択
  3. pubspec.ymlに
#...
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.2.0 #この行を追加
  1. $ flutter pub get 実行 (flutter packages getでもいいかも)
  2. Flutterプロジェクト上でFirebaseパッケージimport
import 'package:firebase_core/firebase_core.dart';
  1. Flutterアプリのmain()で以下コードで初期化する必要がある
void main() async {
  // Flutterの初期化処理を待つ
  WidgetsFlutterBinding.ensureInitialized();
  // アプリ起動時にFirebase初期化処理を入れる
  //   initializeApp()の返り値がFutureなので非同期処理
  //   非同期処理(Future)はawaitで処理が終わるのを待つことができる
  //   ただし、awaitを使うときは関数にasyncをつける必要がある
  await Firebase.initializeApp();

  runApp(MyApp());
}

Authentication(メール/パス手法)を準備するなら

  1. Firebaseプロジェクト画面にて、Authentication > Sign-in methios > メール/パスワードを有効にする
  2. pubspec.ymlに
#...
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.2.0
  firebase_auth: ^1.2.0 #この行を追加
  1. $ flutter pub get 実行 (flutter packages getでもいいかも)
  2. Flutterプロジェクト上でFirebaseパッケージimport
import 'package:firebase_auth/firebase_auth.dart';

Error

  • Error output from CocoaPods:

ログインするとコメントできます