Flutter firestore 同期、非同期処理について

Question

Flutterの同期、非同期処理についてご教示いただきたく存じます。

firestoreよりデータを取得し、取得した値をaという変数に格納。
その後、if文にてaの変数の値によって処理を行うプログラムです。
Widgetの中に記載しております。

現状、[1]のget()まで処理が行われ、[2]のelse、最後に[3]のthenの中を処理しています。
本当であれば、[1]→[3]→[2]の順でif文の処理が行われるようにしたいです。
async、awaitを入れれば非同期処理を同期処理にできると思っていたのですが。。。。
何が原因でしょうか？同期、非同期について理解できていないためご教示いただけますと幸いです。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
              Container(
                  child: Text('メニュー')),
            ]),
            Container(
              child: _buildChild(context),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildChild(BuildContext context) {
    String uid = FirebaseAuth.instance.currentUser!.uid;

    String a = "";

    Future<void> future1() async {
      await FirebaseFirestore.instance
          .collection('users')
          .doc(uid)
          .get()      //[1]
          .then((DocumentSnapshot document) async {
            Map<String, dynamic> data = await document.data()! as Map<String, dynamic>;    //[3]
            a = await data['username'];　　　//data['username']には"aaa"が入ります
      });
    }

    future1();

    if (a == "aaa") {
      return Column(
          mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
        Container(
            margin: EdgeInsets.only(top: 100),
            alignment: Alignment.center,
            child: Text('はじめまして')),
      ]);
    }
    return Padding(        //[2]
      padding: EdgeInsetsDirectional.fromSTEB(0, 20, 0, 0),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Padding(
            padding: EdgeInsetsDirectional.fromSTEB(15, 0, 0, 0),
            child: Container(
              width: 280,
              height: 100,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Container(
                    width: 280,
                    height: 30,
                    child: Padding(
                      padding:
                      EdgeInsetsDirectional.fromSTEB(0, 4, 0, 0),
                      child: Text(
                        'こんにちは',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Comments

[rn383]

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
Container(
child: Text('メニュー')),
]),
Container(
child: _buildChild(context),
),
],
),
),
);
}

Widget _buildChild(BuildContext context) {
String uid = FirebaseAuth.instance.currentUser!.uid;

String a = "";

Future<void> future1() async {
await FirebaseFirestore.instance
.collection('users')
.doc(uid)
.get()
.then((DocumentSnapshot document) async {
Map<String, dynamic> data = await document.data()! as Map<String, dynamic>;
a = await data['username'];
});
}

future1();

if (a == "aaa") {
return Column(
mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
Container(
margin: EdgeInsets.only(top: 100),
alignment: Alignment.center,
child: Text('はじめまして')),
]);
}
return Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 20, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(15, 0, 0, 0),
child: Container(
width: 280,
height: 100,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
width: 280,
height: 30,
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 4, 0, 0),
child: Text(
'こんにちは',
textAlign: TextAlign.center,
),
),
),
],
),
),
),
],
),
);
}
}

[ta.fu]

コードは、元の質問側に追記もしくは修正するようにしてください。
こちら側にコードを入れられても、フォーマットされないので見づらいためです。

[rn383]

失礼しました。
元のコードを修正しました。

Answer 1

FlutterでFutureで情報を取り出した結果を利用するにはFutureBuilderを使うのがいいです。

以下はこんな感じかなととりあえず書いた例です。データが確定しない間とかエラーだった場合の処理は適当です。

class Home extends StatelessWidget {
  Future<String> future1() async {
    String uid = FirebaseAuth.instance.currentUser!.uid;
    String a = "";
    await FirebaseFirestore.instance
        .collection('users')
        .doc(uid)
        .get()
        .then((DocumentSnapshot document) async {
      Map<String, dynamic> data =
          await document.data()! as Map<String, dynamic>;
      a = await data['username'];
    });
    return a;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
              Container(child: Text('メニュー')),
            ]),
            Container(
              child: FutureBuilder(
                builder: _buildChild,
                future: future1(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildChild(BuildContext context, AsyncSnapshot<Object?> snapshot) {
    if (snapshot.hasData) {
      if (snapshot.data == "aaa") {
        return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  margin: EdgeInsets.only(top: 100),
                  alignment: Alignment.center,
                  child: Text('はじめまして')),
            ]);
      }
      return Padding(
        padding: EdgeInsetsDirectional.fromSTEB(0, 20, 0, 0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Padding(
              padding: EdgeInsetsDirectional.fromSTEB(15, 0, 0, 0),
              child: Container(
                width: 280,
                height: 100,
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Container(
                      width: 280,
                      height: 30,
                      child: Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(0, 4, 0, 0),
                        child: Text(
                          'こんにちは',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    } else {
      // データが確定しない場合に表示するウィジェットの作成処理
      return Text("hoge");
    }
  }
}

ーーーー
await future1();とするのが一番早いです。

ただ、たぶんfuture1();を呼び出す側がasyncがついてない関数なのでしょうか。
だから関数にラッピングしてるのかもしれないですが。

そうすると次善の策としては、thenの中の呼び出し関数の中に[2]の処理を入れるという形になるのかな。
こちらも処理は非同期で実行されるので、変数aの内容をfuture1();の後で使う(同期させる)という使い方はできないですが。

.then((DocumentSnapshot document) async {
            Map<String, dynamic> data = await document.data()! as Map<String, dynamic>;    //[3]
            a = await data['username'];　　　//data['username']には"aaa"が入ります
            if (a == "aaa") {
　          }else{
                //[2]
            }
      });

Comments

[rn383]

回答ありがとうございます。
全体のコードを乗せたのですが、await future1();とすると、
以下のようにする必要があると思います。

Widget _buildChild(BuildContext context) {
↓
Future<Widget> _buildChild(BuildContext context) async {

そうすると、child: _buildChild(context)の箇所で、Future<Widget>を呼び出せないとエラーが出てしまいます。
エラーを取る方法はありますでしょうか？

また、widgetの中だからか、if文をthenに入れることはできなそうです。。。

[rn383]

うまく処理できました。ありがとうございます。