Flutter variable is look like it has two datas

Question

I want to use a variable, which i want to fill with firebase data. In the Firebase section it fills it up with the correct data and print it correctly to log, but after that in the Scaffold its looks like it using the data in the starting declaration. But why? It's one variable with two data? So at the end of the code in the Text('$masik') i want to use the firebase data, not the starting string. What am i doing wrong?

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

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String masik = '';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase',
      home: AddData(),
    );
  }
}

class AddData extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    String doksi = 'valami más';
    var ezlett;
    String masik = 'minden';
    String sajt = '';

    final Stream<QuerySnapshot> collectionStream = FirebaseFirestore.instance.collection('zenek').snapshots();

    FirebaseFirestore.instance
        .collection('zenek')
        .doc(doksi)
        .get()
        .then((DocumentSnapshot documentSnapshot) {
      if (documentSnapshot.exists) {
        String ezegyszoveg = documentSnapshot.data().toString();
        print('Document exists on the database $ezegyszoveg');
        ezlett = ezegyszoveg.substring(9, ezegyszoveg.indexOf(','));
        print(ezlett);
        masik = ezegyszoveg.substring(ezegyszoveg.indexOf('text: ')+6, ezegyszoveg.indexOf('}'));
        print(masik);

      }
    });

    return Scaffold(

      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text("próba"),
      ),

      body:Row(
        children: [
          Text('$masik'),
        ],
      )

    );
  }
}

Answer 1

hey ur doing a silly mistake u have to use setState when u update your variable :

   setState(){
          masik = ezegyszoveg.substring(ezegyszoveg.indexOf('text: ')+6,ezegyszoveg.indexOf('}'));
           } // this line put in setState in your code 

Answer 2

Something like this example will work to update the UI when there is new data has been updated

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

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

    class MyApp extends StatefulWidget {
      @override
      State<MyApp> createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
      String masik = '';
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Firebase',
          home: AddData(),
        );
      }
    }

    class AddData extends StatefulWidget {
      @override
      State<AddData> createState() => _AddDataState();
    }

    class _AddDataState extends State<AddData> {
      String doksi = 'valami más';
      var ezlett;
      String masik = 'minden';
      String sajt = '';
      @override
      void initState() {
        super.initState();
        updateTheUi();
      }

      void updateTheUi() {
        final Stream<QuerySnapshot> collectionStream =
            FirebaseFirestore.instance.collection('zenek').snapshots();

        FirebaseFirestore.instance
            .collection('zenek')
            .doc(doksi)
            .get()
            .then((DocumentSnapshot documentSnapshot) {
          if (documentSnapshot.exists) {
            String ezegyszoveg = documentSnapshot.data().toString();
            ezlett = ezegyszoveg.substring(9, ezegyszoveg.indexOf(','));
            masik = ezegyszoveg.substring(
                ezegyszoveg.indexOf('text: ') + 6, ezegyszoveg.indexOf('}'));
            setState(() {});
          }
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text("próba"),
            ),
            body: Row(
              children: [
                Text('$masik'),
              ],
            ));
      }
    }