How to update Flutter Cards in StreamBuilder without reseting state?

Question

I got the StreamBuilder to work properly. 1 thing, every time 1 of the elements change the entire list resets. So for example each Card has a counter that I would like to see add and subtract without the screen changing. How can I do this? Here is my code (updated with full file stack) ...

    final FirebaseAuth _auth = FirebaseAuth.instance;
final fb = FirebaseDatabase.instance.reference();
final falQuery = fb.child('NumberOnes').orderByChild('Value');
final streamQuery = fb.child('NumberOnes').orderByChild('Value').onValue;

class NumberOnesPage extends StatefulWidget {
  @override
  NumberOnesPageState createState() => new NumberOnesPageState();
}

class NumberOnesPageState extends State<NumberOnesPage> {
  List names = new List();
  List numbers = new List();
  List ids = new List();
  List vidImages = new List();

  void _handleJson(value) {
    Map myMap = value; //store each map
    var titles = myMap.values;
    for (var items in titles) {
      names.add(items['vidTitle']);
      numbers.add(items['Value']);
      ids.add(items['vidId']);
      vidImages.add(items['vidImage']);
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.amber,
          title: new Text(
            'Number Ones',
            style:
                new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
          ),
        ),
        body: new Container(
          child: new Center(
              child: new Column(
            children: <Widget>[
              new Flexible(
                  child: new FirebaseAnimatedList(
                      query: falQuery,
                      padding: new EdgeInsets.all(15.0),
                      //sort: (a, b) => b.key.compareTo(a.key),
                      reverse: false,
                      itemBuilder: (_, DataSnapshot followerSnap,
                          Animation<double> animation, int Index) {
                        return new StreamBuilder<Event>(
                            stream: streamQuery,
                            builder: (BuildContext context,
                                AsyncSnapshot<Event> event) {
                              switch (event.connectionState) {
                                case ConnectionState.none:
                                  return new Card(
                                    child: new Text('Loading...',
                                        style: new TextStyle(
                                            fontSize: 12.0,
                                            fontWeight: FontWeight.bold,
                                            fontStyle: FontStyle.italic)),
                                  );
                                case ConnectionState.waiting:
                                  return new Card(
                                    child: new Text('Awaiting Results...',
                                        style: new TextStyle(
                                            fontSize: 12.0,
                                            fontWeight: FontWeight.bold,
                                            fontStyle: FontStyle.italic)),
                                  );
                                default:
                                  if (event.hasError)
                                    return new Card(
                                      child: new Text('Error: ${event.error}',
                                          style: new TextStyle(
                                              fontSize: 12.0,
                                              fontWeight: FontWeight.bold,
                                              fontStyle: FontStyle.italic)),
                                    );
                                  else
                                    _handleJson(event.data.snapshot.value);
                                  return new InkWell(
                                    splashColor: Colors.blueAccent,
                                    onTap: () {
                                      Navigator.push(
                                          context,
                                          new MaterialPageRoute(
                                              builder: (_) =>
                                                  new Video.VideoPage()));
                                      Video.id = ids[Index];
                                      Video.title = names[Index];
                                      Video.videoImage = vidImages[Index];
                                    },
                                    child: new Card(
                                      child: new Column(
                                        children: <Widget>[
                                          new Padding(
                                              padding: new EdgeInsets.all(5.0)),
                                          new Image.network(vidImages[Index]),
                                          new Padding(
                                              padding: new EdgeInsets.all(3.0)),
                                          new Text(
                                              '${numbers[Index]} MyFavKPopers Have Made This Their #1'),
                                          new Padding(
                                              padding: new EdgeInsets.all(3.0)),
                                          new Text(
                                            names[Index],
                                            style: new TextStyle(
                                                fontSize: 18.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black),
                                            //textAlign: TextAlign.center,
                                          ),
                                          new Padding(
                                              padding: new EdgeInsets.all(5.0)),
                                        ],
                                      ),
                                    ),
                                  );
                              }
                            });
                      }))
            ],
          )),
        ));
  }
}

So for example, I would like numbers[Index] to change or even Cards to move up and down depending on the numbers value without completely changing the UI.

Answer 1

There is a widget that can do that : IndexedStack, it preserves the state of all the children in the stack, while allowing you to switch between them:

IndexedStack(
index: _widgetIndex,
children: [
 WidgetOne(),
 WidgetTwo()
]
)

You can use setState() any where in the code to change the widget that should be displayed by modifiying the value of _widgetIndex

setState(() => _widgetIndex = 2);