サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


00.flutter:04.flutter_webでfirestore


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.flutter:04.flutter_webでfirestore [2021/05/26]
adash333 [Flutter(web)アプリにFirebaseを追加(FirebaseとFlutterアプリの紐付け)]
00.flutter:04.flutter_webでfirestore [2021/05/26] (現在)
adash333 [Firestoreリンク]
行 153: 行 153:
 (変更前) (変更前)
 {{:00.flutter:pasted:20210526-094123.png}} {{:00.flutter:pasted:20210526-094123.png}}
- 
 (変更後) (変更後)
 +{{:00.flutter:pasted:20210526-094622.png}}
  
 +
 +===== Cloud Firestoreにデータ書き込み =====
 +以下の本を、Webアプリにしてみてやってみたいと思います。
 +
 +<html>
 +<a href="https://www.amazon.co.jp/Flutter%C3%97Firebase%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-%E6%8A%80%E8%A1%93%E3%81%AE%E6%B3%89%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%EF%BC%88NextPublishing%EF%BC%89-%E4%B8%8B%E7%95%91-%E7%BF%94-ebook/dp/B07LBPRHQD?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3E3GLWLKUTVY0&dchild=1&keywords=flutter+%E6%9C%AC&qid=1621684419&sprefix=flutter%2Caps%2C299&sr=8-4&linkCode=li2&tag=twosquirrel-22&linkId=61f68c992d76df46ab27b5c4010c840a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07LBPRHQD&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=twosquirrel-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=twosquirrel-22&language=ja_JP&l=li2&o=9&a=B07LBPRHQD" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
 +</html>
 +
 +
 +{{:00.flutter:pasted:20210526-095021.png}}
 +
 +まずは、開発モードの状態で、以下のように入力します。
 +
 +{{:00.flutter:pasted:20210526-102700.png}}
 +{{:00.flutter:pasted:20210526-102937.png}}
 +
 +
 +===== Cloud Firestoreからのデータ取得 =====
 +参考:https://firebase.flutter.dev/docs/firestore/usage
 +
 +flutter run して、Flutterアプリを起動します。
 +{{:00.flutter:pasted:20210526-104902.png}}
 +
 +
 +lib/main.dart を以下のように変更します。
 +
 +<code>
 +import 'package:flutter/material.dart';
 +
 +// Import the firebase_core and cloud_firestore plugin
 +import 'package:firebase_core/firebase_core.dart';
 +import 'package:cloud_firestore/cloud_firestore.dart';
 +
 +Future<void> main() async {
 +  // Fireabse初期化
 +  await Firebase.initializeApp();
 +  runApp(MyApp());
 +}
 +
 +class MyApp extends StatelessWidget {
 +  @override
 +  Widget build(BuildContext context) {
 +    return MaterialApp(
 +      title: 'かしかりメモ',
 +      theme: ThemeData(
 +        primarySwatch: Colors.blue,
 +      ),
 +      home: MyFirestorePage(),
 +    );
 +  }
 +}
 +
 +class MyFirestorePage extends StatefulWidget {
 +  @override
 +  _MyFirestorePageState createState() => _MyFirestorePageState();
 +}
 +
 +class _MyFirestorePageState extends State<MyFirestorePage> {
 +  // 作成したドキュメント一覧
 +  List<DocumentSnapshot> documentList = [];
 +
 +  @override
 +  Widget build(BuildContext context) {
 +    return Scaffold(
 +      appBar: AppBar(title: const Text("かしかりメモ")),
 +      body: Center(
 +        child: Column(
 +          children: <Widget>[
 +            ElevatedButton(
 +              child: Text('コレクション+ドキュメント作成'),
 +              onPressed: () async {
 +                // ドキュメント作成
 +                await FirebaseFirestore.instance
 +                    .collection('users') // コレクションID
 +                    .doc('id_abc') // ドキュメントID
 +                    .set({'name': '鈴木', 'age': 40}); // データ
 +              },
 +            ),
 +            ElevatedButton(
 +              child: Text('コレクション+ドキュメント作成2'),
 +              onPressed: () async {
 +                // ドキュメント作成
 +                await FirebaseFirestore.instance
 +                    .collection('users') // コレクションID
 +                    .doc('id_def') // ドキュメントID
 +                    .set({'name': '佐藤', 'age': 55}); // データ
 +              },
 +            ),
 +            ElevatedButton(
 +              child: Text('サブコレクション+ドキュメント作成'),
 +              onPressed: () async {
 +                // サブコレクション内にドキュメント作成
 +                await FirebaseFirestore.instance
 +                    .collection('users') // コレクションID
 +                    .doc('id_abc') // ドキュメントID << usersコレクション内のドキュメント
 +                    .collection('orders') // サブコレクションID
 +                    .doc('id_123') // ドキュメントID << サブコレクション内のドキュメント
 +                    .set({'price': 600, 'date': '9/13'}); // データ
 +              },
 +            ),
 +            ElevatedButton(
 +              child: Text('ドキュメント一覧取得'),
 +              onPressed: () async {
 +                // コレクション内のドキュメント一覧を取得
 +                final snapshot =
 +                    await FirebaseFirestore.instance.collection('users').get();
 +                // 取得したドキュメント一覧をUIに反映
 +                setState(() {
 +                  documentList = snapshot.docs;
 +                });
 +              },
 +            ),
 +            // コレクション内のドキュメント一覧を表示
 +            Column(
 +              children: documentList.map((document) {
 +                return ListTile(
 +                  title: Text('${document['name']}さん'),
 +                  subtitle: Text('${document['age']}歳'),
 +                );
 +              }).toList(),
 +            ),
 +          ],
 +        ),
 +      ),
 +    );
 +  }
 +}
 +</code>
 +Ctrl+Sで保存して、ターミナル画面で r を押して、更新します。
 +さらに、上から順番にボタンをクリックしていくと、以下のようになります。
 +
 +{{:00.flutter:pasted:20210526-114149.png}}
 +
 +{{:00.flutter:pasted:20210526-114243.png}}
 +
 +なお、82行目が、
 +<code>
 +documentList = snapshot.docs;
 +</code>
 +で動いて、
 +<code>
 +documentList = snapshot.documents;
 +</code>
 +ではエラーがでて動きませんでした。
  
  
行 163: 行 307:
 Cloud Firestore概要 Cloud Firestore概要
 →すごく分かりやすいです。お勧め。 →すごく分かりやすいです。お勧め。
 +
 +
 +https://qiita.com/Riscait/items/4be06794468d9c13f11e
 +@Riscait
 +が2020年11月03日に更新
 +FlutterFireがアップデートしたからMigration Guideに沿って修正した記録
 +→過去の記事のコードを写経して動かなかったときなど、非常に参考になります。
 +
 +https://blog.codemagic.io/integrate-firebase-cloud-firestore-with-flutter-perform-crud/
 +CRUD operations using Firebase Cloud Firestore and Flutter
 +Apr 14, 2021
 +
 +
  
  
行 193: 行 350:
 Firestoreでリアルタイム更新 Firestoreでリアルタイム更新
  
 +https://qiita.com/glassmonkey/items/02639da648b3ed299140 
 +@glassmonkey 
 +が2020年03月14日に更新 
 +Dart(Flutter)における非同期処理入門(Firestoreのデータ取得サンプルつき)
  
  


00.flutter/04.flutter_webでfirestore.1622022263.txt.gz · 最終更新: 2021/05/26 by adash333