FlutterでFirestoreに空のドキュメントを作るにはどうすれば良いでしょうか。

Question

FlutterにてonPressedを実行したときにFirestoreへフィールドや値に入力することなくドキュメントを自動idで作成することは可能でしょうか？

上記の場合testsというコレクションがある状態で空のドキュメント(題名は自動id)をボタンを押した時に作るコードはありますでしょうか。

Answer 1

これでどうでしょうか?

onPressed: () async {
  await FirebaseFirestore.instance.collection('tests').add({});
},

Comments

[ixei]

出来ました！！
Firebase.initializeApp();を入れてもエラーが謎に出てしまっていたんですけど、理由はわかりませんが何回か試して出来ました。ありがとうございます。

[ixei]

ここで作成されたドキュメントidを(onpressed実行時に)同時に取得して他の値に代入するにはどうしたら良いでしょうか？

[nskhei]

これで試してみてください
```
onPressed: () async {
final firestore = FirebaseFirestore.instance;
final ref = await firestore.collection('tests').add({});
final id = ref.id;
}
```

[ixei]

以下のようにしたのですがidが表示されません、ボタンを押すごとにidを変更表示したいのですが(最初はidと表示)それは可能でしょうか？ドキュメントidを表示したいところに//ここにid と表記しております。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'next_page.dart';
import 'package:url_launcher/url_launcher.dart';

var id ='id';

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(App());
}

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(
builder: (context) => Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.white12,
padding: EdgeInsets.all(3.0),
margin: EdgeInsets.all(3.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RaisedButton.icon(
icon: Icon(
Icons.add_box,
color: Colors.white,
),
label: Text("New"),
onPressed: () async {
final firestore = FirebaseFirestore.instance;
final ref = await firestore.collection('tests').add({});
final id = ref.id;
},
color: Colors.deepOrangeAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton.icon(
icon: Icon(
Icons.content_copy,
color: Colors.black,
),
label: Text("copy"),
onPressed: () async {
//
},
color: Colors.white38,
textColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
),
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.black12,
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
),
child: IconButton(
icon: Icon(Icons.share),
tooltip: 'share',
onPressed: () {
//ここに入力
},
),
),
],
),
],
),
Center(
child: Container(
height: 40,
decoration: BoxDecoration(
color: Colors.black12,
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
),
child: Center(
child: Text(
id,//ここにid
style: TextStyle(
fontSize: 11.0,
fontStyle: FontStyle.normal,
color: Colors.black87,
letterSpacing: 1.0,
),
),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 50,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Type',
),
),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 50,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Type',
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
RaisedButton.icon(
icon: Icon(
Icons.check_box,
color: Colors.white,
),
label: Text("Next"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NextPage(),
),
);
},
color: Colors.deepOrangeAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
],
),
],
),
),
Column(
children: <Widget>[
SizedBox(
width: 200,
height: 35,
child: RaisedButton.icon(
icon: Icon(
Icons.reply,
color: Colors.white,
),
label: Text("Share this app!!"),
onPressed: () {
//
},
color: Colors.deepOrangeAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
Icons.security,
color: Colors.deepOrange,
),
FlatButton(
textColor: Colors.blueGrey,
onPressed: _launchURL,
child: Text('Privacy Policy'),
),
FlatButton(
textColor: Colors.blueGrey,
onPressed: _launchURL,
child: Text('Terms and conditions'),
),
],
),
],
),
],
),
),
),
),
);
}
}

_launchURL() async {
const url = 'https://flutter.dev';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}

[nskhei]

画面に反映させるのであれば、StatefullWidgetにして、ドキュメント作成後にsetStateで画面を更新する必要があると思います。
```
class App extends StatefulWidget {
@override
_AppState createState() => _AppState();
}

class _AppState extends State<App> {
String id = '';

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(
builder: (context) => Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.white12,
padding: EdgeInsets.all(3.0),
margin: EdgeInsets.all(3.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RaisedButton.icon(
icon: Icon(
Icons.add_box,
color: Colors.white,
),
label: Text("New"),
onPressed: () async {
final firestore = FirebaseFirestore.instance;
final ref =
await firestore.collection('tests').add({});
setState(() {
this.id = ref.id;
});
},
color: Colors.deepOrangeAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton.icon(
icon: Icon(
Icons.content_copy,
color: Colors.black,
),
label: Text("copy"),
onPressed: () async {
//
},
color: Colors.white38,
textColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
),
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.black12,
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
),
child: IconButton(
icon: Icon(Icons.share),
tooltip: 'share',
onPressed: () {
//ここに入力
},
),
),
],
),
],
),
Center(
child: Container(
height: 40,
decoration: BoxDecoration(
color: Colors.black12,
borderRadius:
BorderRadius.all(Radius.circular(8.0)),
),
child: Center(
child: Text(
id, //ここにid
style: TextStyle(
fontSize: 11.0,
fontStyle: FontStyle.normal,
color: Colors.black87,
letterSpacing: 1.0,
),
),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 50,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Type',
),
),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 50,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Type',
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
RaisedButton.icon(
icon: Icon(
Icons.check_box,
color: Colors.white,
),
label: Text("Next"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NextPage(),
),
);
},
color: Colors.deepOrangeAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
],
),
],
),
),
Column(
children: <Widget>[
SizedBox(
width: 200,
height: 35,
child: RaisedButton.icon(
icon: Icon(
Icons.reply,
color: Colors.white,
),
label: Text("Share this app!!"),
onPressed: () {
//
},
color: Colors.deepOrangeAccent,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
Icons.security,
color: Colors.deepOrange,
),
FlatButton(
textColor: Colors.blueGrey,
onPressed: _launchURL,
child: Text('Privacy Policy'),
),
FlatButton(
textColor: Colors.blueGrey,
onPressed: _launchURL,
child: Text('Terms and conditions'),
),
],
),
],
),
],
),
),
),
),
);
}
}
```

[ixei]

出来ました！！
ありがとうございます！！！

これとは関係ないのですがcolorを入れるときにシミュレーターだと色が付かないことや濃さが違うことがある(現状white系やblack系の場合のみ)のですがそれはandroidstudioで示されている色が実際には表示されていると思って良いのでしょうか？

[nskhei]

端末によって多少色が違って見えることはあるかもしれませんが、色が付かないことは無いです。

[nskhei]

もしその現象が続くようであれば、該当のコードや、色がつかない部分のスクショを貼って質問してもらえれば、何か答えられるかもしれません。

[ixei]

わかりました！