Flutter Widget 重建的行为

Question

I have a simple Flutter program that creates a List of Buttons. When I click one Button, the button disappears and the others are shifted up one position. I made several versions, and in one of them the first time that the App is created, I prepare a List of ElevatedButton Widgets, so that the next time that build() is called, I return those already created, a sort of cache. When I run the App in Android Studio and track Widget rebuilds on the Flutter performance window, It appears that they are rebuilt, even if the old ones are used (see debug prints). Obviously the Widgets every time are identical, Can somebody explain if the widgets are really recreated? Would there be any benefits in my implementation?

import 'dart:async';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:should_rebuild/should_rebuild.dart';

void main() {
  Get.put(Controller());
  runApp(MaterialApp(home: HomePage()));
}

class Controller extends GetxController {
  RxList<String> tutti = RxList();
  List<ElevatedButton> righe = [];
  List<int> posizioni = [];

  void add(ElevatedButton r) {
    righe.add(r);
    posizioni.add(posizioni.length);
  }

  Widget at(int index) => righe[index];

  @override
  onInit() {
    for (int i = 0; i < 10; i++) {
      tutti.add('item $i');
    }
  }

  void aggiorna(int index) {
    for (int i = 0; i < posizioni.length; i++) {
      // keep widget positios updated, if any widget before them in the list is removed
      if (posizioni[i] == index) {
        righe.removeAt(i);
        tutti.removeAt(i);
        posizioni.removeAt(i);
        break;
      }
    }
  }
}

class MyList extends StatelessWidget {
  const MyList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Controller controller = Get.find();
    return Obx(() => ListView.builder(
        itemCount: controller.tutti.value.length,
        itemBuilder: (context, index) {
          if (index >= controller.righe.length) {
            // missing, create a new one
            print ('create button');
            ElevatedButton r = ElevatedButton(
                  child: Text(controller.tutti.value[index]),
                  onPressed: () {
                    controller.aggiorna(index);
                  },
                );

            controller.add(r);
            return r;
          } else {
            //     return existing
            print ('reuse button');
            return controller.at(index);
          }
        }));
  }
}

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('hello'),
        ),
        body: Center(child: const MyList()));
  }
}

Answer 1

You put your Controller in the main function so when ever the app rebuilds in development the main function is run again which overrides all the previous data in variables.

The cache will work maybe when its running in release mode but then too if the app gets cleared from the memory it loses all the state/data so the list you had buttons in is empty.

Speaking to the best of my knowledge and as per I understand the working. If you find something that says otherwise very eager to learn but I guess this is the behaviour most off.

Hope it helps....