Using TextField inside a Streambuilder

Question

How do we add a TextField inside a StreamBuilder? I have a TextField / TextFormField as one of the widgets inside the builder function of either a StreamBuilder or FutureBuilder, whenever we try to interact with the textfield it just refreshes the entire builder widget and calls the stream/future again.

body: StreamBuilder(
      stream: getClientProfile().snapshots(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.active) {
          print(snapshot.data.data);
          Client tempClient = Client.from(snapshot.data);
          print('details = ${tempClient.representative.email} ${tempClient
              .address.location} ${tempClient.businessDescription}');
          return Container(
            child: Column(
              children: <Widget>[
                TextFormField(

                )
              ],
            ),
          );
        } else if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else {
          return Center(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Icon(Icons.error),
                ),
                Text('Error loading data')
              ],
            ),
          );
        }
      }),

and firestore function

DocumentReference getClientProfile() {
   return _firestore.collection(SELLERS_COLLECTION).document(_uid);
}

What I want to achieve, is to have a form with pre-filled data from firestore document, basically an edit form. Is there any other way I could achieve the same or am I doing something wrong structurally ?

EDIT:

code after suggested edits.

    import 'package:flutter/material.dart';
import 'Utils/globalStore.dart';
import 'models/client_model.dart';
import 'dart:async';

class EditProfileInformation extends StatefulWidget {
  @override
  EditProfileInformationState createState() {
    return new EditProfileInformationState();
  }
}

class EditProfileInformationState extends State<EditProfileInformation> {
  Stream dbCall;
  final myController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    dbCall = getClientProfile().snapshots();
    myController.addListener(_printLatestValue);
  }

  _printLatestValue() {
    print("Second text field: ${myController.text}");
  }

  @override
  void dispose() {
    myController.removeListener(_printLatestValue);
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
//      key: _scaffoldKey,
      appBar: AppBar(
        title: Text(
          'Edit profile',
          style: TextStyle(),
        ),
      ),

      body: StreamBuilder(
          stream: dbCall,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.active) {
              print(snapshot.data.data);
              Client tempClient = Client.from(snapshot.data);
              print('details = ${tempClient.representative.email} ${tempClient
                  .address.location} ${tempClient.businessDescription}');
              return Container(
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextField(
                        controller: myController,
                      ),
                    )
                  ],
                ),
              );
            } else if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else {
              return Center(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(Icons.error),
                    ),
                    Text('Error loading data')
                  ],
                ),
              );
            }
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

        },
        child: Icon(Icons.done),
      ),
    );
  }
}

Answer 1

In order to use a StreamBuilder correctly you must ensure that the stream you are using is cached on a State object. While StreamBuilder can correctly handle getting new events from a stream, receiving an entirely new Stream will force it to completely rebuild. In your case, getClientProfile().snapshots() will create an entirely new Stream when it is called, destroying all of the state of your text fields.

class Example extends StatefulWidget {
  @override
  State createState() => new ExampleState();
}

class ExampleState extends State<Example> {
  Stream<SomeType> _stream;

  @override
  void initState() {
    // Only create the stream once
    _stream = _firestore.collection(collection).document(id);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new StreamBuilder(
      stream: _stream,
      builder: (context, snapshot) {
        ...

      },
    );
  }
}

EDIT: it sounds like there are other problems which I cannot diagnose from the code snippet you provided.