flutterとfirebaseに慣れるために以下の記事を参考にしてアプリの開発を行いました。 <a href="https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make" target="_blank" rel="noopener noreferrer">https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make</a><h2 id="h26e220755e">firestoreにデータを送信</h2>参考にしていた記事の実装がラストとなります。 PostPageウィジェットのメソッド定義領域に以下のメソッドを追加してみます。 この関数は、TextFieldウィジェットにonSubmitイベントに仕込みます。 このウィジェットのonSubmitイベントは、文字列を入力してEnterを押すと発火するようです（デフォルトの挙動）。 ①_onSubmit関数の定義<pre><code>// サブミットイベント時に発火する関数を解説
// 引数のcontentはTextFieldのデフォルトの挙動で渡ってくるっぽいな
_onSubmitted(String content){
// コレクションリファレンスを作成
&nbsp; &nbsp; CollectionReference posts = FirebaseFirestore.instance.collection('posts');
// リファレンスに対して、addを行う（ID自動採番）
// ドキュメントの"content"フィールドに引数で受け取ったcontentを入力する
&nbsp; &nbsp; posts.add({
&nbsp; &nbsp; &nbsp; "content": content
&nbsp; &nbsp; });
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; //　非同期処理を待たずにテキストフィールドをクリアする
&nbsp; &nbsp; _textEditingController.clear();
}</code></pre> ②TextFieldウィジェットにonSubmitイベントに先程定義した関数を渡す<pre><code>child: TextField(
&nbsp; &nbsp; &nbsp; &nbsp;controller: _textEditingController,
&nbsp; &nbsp; &nbsp; &nbsp;onSubmitted: _onSubmitted, // この一文を追加します
&nbsp; &nbsp; &nbsp; &nbsp;enabled: true,</code></pre> ビルドを走らせてみましょう。 以下のように文字列を入力してみます。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/51a907df7ebb4671b516348cc4ba61b4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.25.21.png" alt=""> 入力が完了したらEnterを押します。 ※注意点 なぜかわかりませんが、firebase側への書き込みオペレーションを起動すると、flutterのビルドが一時停止されます。 なので、データが反映されているのか確認する際は、一度ビルドし直す必要があります。 ビルドを再度走らせると、トップページは以下のように表示されています。 データの書き込みがうまくいっていますね。（この画像を撮る前に、何回か書き込みを行なっていました...） <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/50bb82ec2e0a4cf285ae9bf58df18410/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.25.29.png" alt=""> 書いたコードは以下の通りです。<pre><code>import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';


// void main() {
// runApp(const MyApp());
// }


// firebaseを導入した場合のmain関数
Future&lt;void&gt; main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase?.initializeApp();
 runApp(MyApp());
}


class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);


 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Flutter Demo',
 // 右上のdebugタグを外すためのやつ
 debugShowCheckedModeBanner: false,
 theme: ThemeData(
 primarySwatch: Colors.yellow,
 ),
 home: const MyHomePage(title: '掲示板デモアプリ'),
 );
 }
}


class MyHomePage extends StatefulWidget {
 const MyHomePage({required this.title}) : super();


 final String title;


 @override
 State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}


// ここから書き換えてみました
// Stateを継承しているウィジェットが見た目の部分のビルドを行っています
class _MyHomePageState extends State&lt;MyHomePage&gt; {


 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(widget.title),
 actions: [
 IconButton(
 icon: Icon(Icons.edit),
 onPressed: () {
 Navigator.of(context).push(MaterialPageRoute(builder: (context) {
 return PostPage();
 }));
 },
 ),
 ],
 ),
 body: StreamBuilder&lt;QuerySnapshot&gt;(
 stream: FirebaseFirestore.instance.collection('posts').snapshots(),
 builder: (BuildContext context, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
 if (snapshot.connectionState == ConnectionState.waiting) {
 // 通信状況が悪いときにプログレスインジケーターの表示
 return Center(child: CircularProgressIndicator());
 }
 // 通信が正常にいっているのであれば
 return ListView(
 children: snapshot.data!.docs.map((DocumentSnapshot document) {
 final documentData = document.data()! as Map;
 print("---------------");
 print(documentData["content"]);
 print("---------------");
 return Card(
 child: ListTile(
 title: Text(document.exists? documentData['content'] : "データが存在していません" ),
 subtitle: const Text("サブタイトル"),
 ),
 );
 }).toList(),
 );
 },
 ),
 );
 }
}


// 投稿ページの実装
class PostPage extends StatefulWidget {


 @override
 _PostPagePageState createState() =&gt; _PostPagePageState();
}


class _PostPagePageState extends State&lt;PostPage&gt; {


 // 入力情報をハンドリングするためのコントローラを作成
 TextEditingController _textEditingController = TextEditingController();


 // データ送信用のプラベートメソッドを作成
 _onSubmitted(String content){
 CollectionReference posts = FirebaseFirestore.instance.collection('posts');
 // 自動採番でデータをfirestore側に作成する
 posts.add({
 "content": content
 });
 
 /// 入力欄をクリアにする
 _textEditingController.clear();
 }


 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("投稿画面"),
 ),
 body: Center(
 child: TextField(
 controller: _textEditingController,
 onSubmitted: _onSubmitted, // データ送信
 enabled: true,
 maxLength: 50, // 入力数
 style: TextStyle(color: Colors.black),
 obscureText: false,
 maxLines:1 ,
 decoration: const InputDecoration(
 icon: Icon(Icons.speaker_notes),
 hintText: '投稿内容を記載します',
 labelText: '内容 * ',
 ),
 ),
 ),
 );
 }
}</code></pre> 念のためにfirestoreの方も確認してみましょう。 ドキュメントが追加されていますね。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/f53c0c1612a24a809e9f05feeff5998d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.30.53.png" alt=""> 以上で投稿アプリの作成を終わります。 <h2 id="h6517cb6336">締めの一言</h2>エラーへの対処大変！

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる3

flutterとfirebaseに慣れるために以下の記事を参考にしてアプリの開発を行いました。 <a href="https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make" target="_blank" rel="noopener noreferrer">https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make</a> <h2 id="hc532db3e76">firebaseとの連携</h2>今回は、実際にfirestoreとflutterを連携していきますが、いくつかつまづいた点があったのでメモっておきます。 まず、cloud firestoreでデータベースを作成しました。 この辺は上の記事を見て適当にやりました。 firestore上に以下のようなドキュメントを作成。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/f0ba2d6adb7d44a9b319ad1a2bb176d0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.36.42.png" alt=""> firebaseのコードを使用するために、pubspec.yaml（next.jsでいうところのpackage.json）に以下のコードを追記。<pre><code>dependencies:
 flutter:
 sdk: flutter



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


 # firestoreのプラグイン(---以下の2行を追記してください---)
 firebase_core: ^1.0.1
 cloud_firestore: ^2.5.4</code></pre> firebaseのデータベースと連携するためのコードを追加したmain関数を書きます。 一応、以下のコードの軽い解説をしてくれてる記事を載せときます。 <a href="https://qiita.com/edasan/items/f32bc58a4afd0ca92432" target="_blank" rel="noopener noreferrer">https://qiita.com/edasan/items/f32bc58a4afd0ca92432</a> <pre><code>// （変更前のコード）
// void main() {
// runApp(const MyApp());
// }


// firebaseを導入した場合のmain関数（変更後のコード）
// 非同期関数になるので、戻り値の型もFuture型になる（待ってもあたいは返ってこないFuture型や）
Future&lt;void&gt; main() async {
// アプリの起動時にfirebaseと連携する（firebaseの機能をたくさん使う場合はこの記述がいいみたい）
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase?.initializeApp();
 runApp(MyApp());
}</code></pre> vscodeのデバッグモードを起動したら、以下のようなエラーが発生しました。<h3 id="hac7a0917c4">エラー①</h3>何が起きとるんや...<pre><code>Error running pod install Error launching application on iPhone 13.
Error output from CocoaPods:
↳
[!] Automatically assigning platform `iOS` with version `9.0` on target `Runner` because no platform was
specified. Please specify a platform for this target in your Podfile. See
`https://guides.cocoapods.org/syntax/podfile.html#platform`.</code></pre> 調査を進めたところ、ios直下のPodfileに問題があるような感じ。 vimでPodfileの中身を確認したところ、以下のようになっていた。 Podfileを一回消して、もう一回作ったり、<code>platform: ios, '9.0</code><code> → platform: ios, '10.0</code>のように書き換えたりしたが動かん。。。 <pre><code># Uncomment this line to define a global platform for your project
# platform :ios, '12.0'


# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

---省略---

post_install do |installer|
&nbsp; installer.pods_project.targets.each do |target|
&nbsp; &nbsp; flutter_additional_ios_build_settings(target)
&nbsp; end
end</code></pre> なんだかんだ試行錯誤をしているうちに以下の記事に遭遇 <a href="https://zenn.dev/junki555/articles/8d0b962d2e6c1fa4d8ca" target="_blank" rel="noopener noreferrer">https://zenn.dev/junki555/articles/8d0b962d2e6c1fa4d8ca</a> ここで初歩的なミスに気づく。 なんと、<code>platform :ios, '12.0`</code>のところがデフォルトでコメントアウトされていた。 コメントアウトを外して、ビルドを走らせると上記のエラーは出ませんでした。 ですが、新しいエラーに遭遇！<h3 id="h224f3c0a46">エラー②</h3>google-services.plistとは、cloud firestoreとアプリを連携する際に生成されるファイルである。 参考記事通りに、ios/Runnerディレクトリに挿入したはずなのに、ないと言われている。<pre><code>Firebase has not been correctly initialized. Have you added the "google-services.plist" file to the project?</code></pre> おそらく、このファイルへのパスが通っていないことが原因だと考えた。 色々調べたら以下の記事を見つけた。 <a href="https://fukatsu.tech/file-treatment-xcode" target="_blank" rel="noopener noreferrer">https://fukatsu.tech/file-treatment-xcode</a> この記事を参考に、Xcodeを開いてgoogle-services.plistをドラッグ＆ドロップでRunnerディレクトリの後ろに追加。 <code>Copy items if needed</code>と<code>Create groups</code>にチェックを入れて設定画面を閉じる。 ビルドを走らせたら、エラーが消えていました。<h2 id="h11976fa767">flutterで見た目を作成</h2>次に状態を持つ見た目の描画を担う_MyHomePageStateウィジェットのbodyのフィールドを以下のように書き換えます。<pre><code>body: StreamBuilder&lt;QuerySnapshot&gt;(
 stream: FirebaseFirestore.instance.collection("posts").snapshots(),
 builder: (BuildContext context, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
 if (snapshot.connectionState == ConnectionState.waiting) {
 return Center(child: CircularProgressIndicator());
 }
 return ListView(
 children: snapshot.data!.docs.map((DocumentSnapshot document) {
 final documentData = document.data() as Map;
 return Card(
 child: ListTile(
 title: Text(documentData["content"]),
 subtitle: const Text("サブタイトル"),
 ),
 );
 }).toList(),
 );
 },
 ),</code></pre> ちなみにmapメソッドを実行した後で、toList()メソッドを呼び出すのは、mapメソッドによって生成されるのはあくまでMap型の変数だからです。 Map型とはjsのオブジェクトのようなものであるため、リストに直さないとリストのメソッドが使えなかったり、今回のようにフィールドにリストを持つキーで受け取れないといった問題が生じます。 詳しくは以下の記事を参考にしてください。<ul><li>Mapについて知りたいかた→　<a href="https://flutternyumon.com/how-to-use-map/" target="_blank" rel="noopener noreferrer">https://flutternyumon.com/how-to-use-map/</a></li><li>Map.toListについて知りたいかた→　<a href="https://qiita.com/7_asupara/items/01c29c006556e89f5b17" target="_blank" rel="noopener noreferrer">https://qiita.com/7_asupara/items/01c29c006556e89f5b17</a></li></ul> bodyのトップウィジェットであるStreamBuilderについても説明します。 こちらのウィジェットは、streamキーを持っており、このstreamでデータを受け取るたびに再描画を行うようです。 ちなみに、streamとは日本語で「小川」という意味で、何らかのデータが流れてくるイメージで覚えて貰えば結構です。 今回の場合ですと、postsコレクションのスナップショットを受け取っています（非同期的に受け取っている）。<pre><code>FirebaseFirestore.instance.collection("posts").snapshots()</code></pre> このデータの方は以下のようになっていました。Stream型ですね。 実際に受け取るのはQuerySnapshotになります。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1099d8aaf6454bfe9778c09f4724894c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2013.56.23.png" alt=""> builderのフィールドのコードですが、参考にしていた記事とは少し違うコードになっています。 変えた部分は以下になります。<pre><code> final documentData = document.data() as Map;
 return Card(
 child: ListTile(
 title: Text(documentData["content"]),
...</code></pre> 元々のコードは以下になります。<pre><code> return Card(
 child: ListTile(
 title: Text(document.data()['content']),</code></pre> 参考にしていた記事のコードをそのまま書くとdocument.data()['content']のところで以下のエラーが出ます。<pre><code>The method '[]' can't be unconditionally invoked because the receiver can be 'null'.
Try making the call conditional (using '?.') or adding a null check to the target </code></pre> 対策をググっていたら、以下の記事に辿り着きました。 この記事によると、Objectを一回Mapにキャストすることでアクセスできるようになるとのことだったので実践してみた。 <a href="https://qiita.com/qst_exe/items/79a444bbb13df0ce6a6d" target="_blank" rel="noopener noreferrer">https://qiita.com/qst_exe/items/79a444bbb13df0ce6a6d</a> 一応ここまでやったら、以下のような画面が出力されるはず。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4e645455a4b24680a960c56c26654262/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2012.56.00.png" alt=""> キリがいいので今回の記事はここまで

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる2

flutterとfirebaseに慣れるために以下の記事を参考にしてアプリの開発を行いました。 <a href="https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make" target="_blank" rel="noopener noreferrer">https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make</a><h2 id="h0ef859a5d4">環境構築</h2>以下の記事と公式ドキュメントを参考に環境を構築する。<ul><li>Kboyさんが描いてる記事→ <a href="https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc" target="_blank" rel="noopener noreferrer">https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc</a></li><li>日本語版のflutter公式ドキュメント→ <a href="https://flutter.ctrnost.com/install/" target="_blank" rel="noopener noreferrer">https://flutter.ctrnost.com/install/</a></li></ul> <h2 id="he0eb640aed">アプリケーション開発を始める</h2>vscodeにてStudioProjects直下のあなたのプロジェクトディレクトリを開きます。 libフォルダの中にmain.dartというファイルがあるので開いてみる。 基本的にアプリケーションのコードはこのファイルに書くと思う。 main.dartを以下のように書き換えてみる。 <pre><code>import 'package:flutter/material.dart';


void main() {
 runApp(const MyApp());
}


class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);


 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Flutter Demo',
 // 右上のdebugタグを外すためのやつ
 debugShowCheckedModeBanner: false,
 theme: ThemeData(
 primarySwatch: Colors.yellow,
 ),
 home: const MyHomePage(title: '掲示板デモアプリ'),
 );
 }
}


class MyHomePage extends StatefulWidget {
 const MyHomePage({required this.title}) : super();


 final String title;


 @override
 State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}


// ここから書き換えてみました
// Stateを継承しているウィジェットが見た目の部分のビルドを行っています
class _MyHomePageState extends State&lt;MyHomePage&gt; {


 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(widget.title),
 actions: [
 IconButton(
 icon: Icon(Icons.edit),
 onPressed: () {
 Navigator.of(context).push(MaterialPageRoute(builder: (context) {
 return PostPage();
 }));
 },
 ),
 ],
 ),
 body: Center(
 child: Text(
 "ここにみんなの投稿が流れる"
 ),
 ),
 );
 }
}



class PostPage extends StatefulWidget {


 @override
 _PostPagePageState createState() =&gt; _PostPagePageState();
}


class _PostPagePageState extends State&lt;PostPage&gt; {


 TextEditingController _textEditingController = TextEditingController();


 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("投稿画面"),
 ),
 body: Center(
 child: TextField(
 controller: _textEditingController,
 enabled: true,
 maxLength: 50, // 入力数
 maxLengthEnforced: false, // 入力上限になったときに、文字入力を抑制するか
 style: TextStyle(color: Colors.black),
 obscureText: false,
 maxLines:1 ,
 decoration: const InputDecoration(
 icon: Icon(Icons.speaker_notes),
 hintText: '投稿内容を記載します',
 labelText: '内容 * ',
 ),
 ),
 ),
 );
 }
}</code></pre> command+sで保存したら、以下のような画面がエミュレーター上に表示されます。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/85f72232da3245e795b10ee1cd40f9f1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-31%2023.14.52.png" alt=""> いい感じやな <h2 id="h47a6a63ca5">cloud firebaseの構築で行き詰まった点</h2>先程、紹介した記事の通りにfirebaseの構築とcloud firestoreの設定をしていく。 この辺の設定で1箇所だけつまづいた点があったのでメモっておく。 それが、iosバンドルIDと呼ばれるものの存在である。 IOSバンドルIDとは、アプリケーションを識別するために使用される一意な値のようです。 このIDをcloud firestore側に登録しておくことによって、あなたのflutterプロジェクトとcloud firestoreを紐づけることができます。 今回作成したflutterアプリのプロジェクトのもバンドルIDが存在していますので、確認してみましょう。 確認する方法を以下に示します。<ol><li>Xcodeを立ち上げる</li><li>StudioProjects/your_project/ios/Runner.xcodeprojを開く（StudioProjectsフォルダは、Android Studioにてプロジェクトを作成した時に生成されるフォルダ）</li><li>General をクリックする</li><li>Bundle Identifierを参照（ここにバンドルIDが載っています）</li></ol><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/aec04445de4c45d48ecf1b1c543968d7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-31%2023.29.12.png" alt=""> 確認したバンドルIDをcloud firestoreに保存します。 今回の記事はここまでとします。

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる3

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる2

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる

Tags

About this Blog