Flutter GetBuilder Dependent DropDownButton - 即使值已重置，也应该只有一个具有 [DropdownButton] 值的项目

Question

I have two DropDownButtons, one to show Categories (Fruits & Vegetables), The second one is showing Products (Apple, letucce, etc..) according to the category selected, so it depends from the first.

When I select the category, product list is updated to show corresponding items. If I then select a product, it is selected, but if I change the category again There should be exactly one item with [DropdownButton]'s value: (previous product value) error shows up over the products dropDown.

I'm trying to use Getx GetBuilder widget to update the screen only when necessary.

Here's a simplified code from my proyect to replicate the error:

Main

@override
Widget build(BuildContext context) {
  return GetMaterialApp(
    initialRoute: 'form',
    initialBinding: GeneralBinding(),
    routes: {'form' : (context) => FormScreen()},
  );
}

Bindings

class GeneralBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<FormController>(() => FormController(), fenix: true);
  }
}

Controller

class FormController extends GetxController {
  final DataAsset dataAsset = DataAsset();

  List<Category> categoriesList = <Category>[];
  List<Product> productsList = <Product>[];

  @override
  void onInit() {
    super.onInit();
    updateCategories();
  }

  Future<void> updateCategories() async {
    List<Category> newData = await fillCategories();
    categoriesList.assignAll(newData);
    update();
  }
  Future<void> updateProducts(int category) async {
    List<Product> newData = await fillProducts(category);
    newData = newData.where((e) => e.category == category).toList();
    productsList.assignAll(newData);
    update();
  }

  Future<List<Category>> fillCategories() async {
    return dataAsset.categories;
    //Other case, bring from Database, thats why I need it like Future
  }

  Future<List<Product>> fillProducts(int category) async {
    return dataAsset.products.where((element) => element.category == category ).toList();
    //Other case, bring from Database, thats why I need it like Future
  }
}

Models

class Category {
    Category({required this.id, required this.desc});
    int id;
    String desc;

    factory Category.fromMap(Map<String, dynamic> json) => Category(
      id: json["id"],
      desc: json["desc"],
    );
}
class Product {
    Product({required this.category,required this.id,required this.desc});
    int category;
    int id;
    String desc;

    factory Product.fromMap(Map<String, dynamic> json) => Product(
      category: json["category"],
      id: json["id"],
      desc: json["desc"],
    );
}

class DataAsset {
  List<Map<String, dynamic>> jsonCategories = [{'id': 1, 'desc': 'Fruits'}, {'id': 2, 'desc': 'Vegetables'}];
  List<Map<String, dynamic>> jsonProducts = [{'category': 1, 'id': 1, 'desc': 'Apple'}, {'category': 1, 'id': 2, 'desc': 'Grape'}, {'category': 1, 'id': 3, 'desc': 'Orange'}, {'category': 2, 'id': 4, 'desc': 'Lettuce'}, {'category': 2, 'id': 5, 'desc': 'Broccoli'}];

  List<Category> get categories {
    return List<Category>.from(jsonCategories.map((e) => Category.fromMap(e)));
  }
  List<Product> get products {
    return List<Product>.from(jsonProducts.map((e) => Product.fromMap(e)));
  }
}

Screen

class FormScreen extends StatefulWidget {
  const FormScreen({Key? key}) : super(key: key);

  @override
  _FormScreenState createState() => _FormScreenState();
}

class _FormScreenState extends State<FormScreen> {
  final _formKey = GlobalKey<FormState>();
  int? category;
  int? product;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Form(key: _formKey,
          child: Column(
            children: [
              buildSelectCategory(),
              buildSelectProduct(),
              buildSubmit()
            ],
          ),
        ),
      ),
    );
  }

  Widget buildSelectCategory() {
    return GetBuilder<FormController>(builder: (_formController) {
      print('Rebuilding categories');
      List<Category> categories = _formController.categoriesList;

      return DropdownButtonFormField<int>(
        value: (category == null)? null : category,
        isExpanded: true,
        decoration: const InputDecoration(labelText: 'Category'),
        items: categories.map((option) {
          return DropdownMenuItem(
            value: (option.id),
            child: (Text(option.desc)),
          );
        }).toList(),
        onChanged: (value) {
          category = value;
          product = null; //reset value of product variable
          _formController.updateProducts(category!);
        },
        validator: (value) => (value == null)? 'Mandatory field' : null,
      );
    });
  }

  Widget buildSelectProduct() {
    return GetBuilder<FormController>(builder: (_formController) {
      print('Rebuilding products');
      List<Product> products = _formController.productsList;

      return DropdownButtonFormField<int>(
        value: (product == null)? null : product,
        isExpanded: true,
        decoration: const InputDecoration(labelText: 'Product'),
        items: products.map((option) {
          return DropdownMenuItem(
            value: (option.id),
            child: Text(option.desc),
          );
        }).toList(),
        onChanged: (value) async {
          product = value;
        },
        validator: (value) => (value == null)? 'Mandatory field' : null,
      );
    });
  }

  Widget buildSubmit() {
    return ElevatedButton(
      child: const Text('SUBMIT'),
      onPressed: () {
        if (!_formKey.currentState!.validate() ) return;
        //Save object whit category and product value
      }
    );
  }
}

Hope someone can help, please, im stuck

Things I've tried:

• Add id to each getbuilder(id: 'category') and getbuilder(id: 'product') to only update product list with update(['product']);
• Move both, category and product variables from screen to controller

without success

Flutter 2.5.2 stable channel, get: ^4.3.8 package, (No other dependencies added)

Answer 1

I got it working after several try & error. Many things I learned from this:

You can use an UniqueKey in each field, so it is rebuilt each time its notified for update, like so:

return DropdownButtonFormField<int>(
  key: UniqueKey(),                                         // <-- Here
  value: (formControllerGral.product == null)? null : formControllerGral.product,
  isExpanded: true,
  decoration: const InputDecoration(labelText: 'Product'),
  items: newItems,
  onChanged: (value) {
    formControllerGral.product = value;
  },
  validator: (value) => (value == null)? 'Mandatory field' : null,
);

and it will work but only because you are explicitly telling the widget its not gonna be the same in each rebuilt.

I didn't like that solution, so i kept trying and worked now with normal DropdownButton's at first and notice that the values of the Dropdown weren't showing when onChanged function was called, so I added functions to update the widget itself, but without refreshing the options list (Like a setState) and this did the trick:

For this second and final solution:

• Add id to each getbuilder(id: 'category') and getbuilder(id: 'product') to only update product list with update(['product']);
• Move both, category and product variables from screen to controller

View

Widget buildSelectCategory() {
  return GetBuilder<FormController>(id: 'category', builder: (_) {
    List<Category> categories = formControllerGral.categoriesList;

    return DropdownButtonFormField<int>(
      value: (formControllerGral.category == null)? null : formControllerGral.category,
      isExpanded: true,
      decoration: const InputDecoration(labelText: 'Category'),
      items: categories.map((option) {
        return DropdownMenuItem(
          value: (option.id),
          child: (Text(option.desc)),
        );
      }).toList(),
      onChanged: (value) {
        formControllerGral.category = value;
        formControllerGral.product = null; //reset value of product variable
        formControllerGral.updateCategories(fillData: false); //Like a setState for this widget itself
        formControllerGral.updateProducts(value!);
      },
      validator: (value) => (value == null)? 'Mandatory field' : null,
    );
  });
}

Widget buildSelectProduct() {
  return GetBuilder<FormController>(
    id: 'product', 
    builder: (_) {
      List<Product> products = formControllerGral.productsList;

      List<DropdownMenuItem<int>>? newItems = products.map((option) {
        return DropdownMenuItem(
          value: (option.id),
          child: Text(option.desc),
        );
      }).toList();

      return DropdownButtonFormField<int>(
        value: (formControllerGral.product == null)? null : formControllerGral.product,
        isExpanded: true,
        decoration: const InputDecoration(labelText: 'Product'),
        items: newItems,
        onChanged: (value) {
          formControllerGral.product = value;
          formControllerGral.updateProducts(formControllerGral.category!, fillData: false);  //Like a setState for this widget itself
        },
        validator: (value) => (value == null)? 'Mandatory field' : null,
      );
    },
  );
}

Controller

Future<void> updateCategories({bool fillData = true}) async {
  if (fillData) {
    List<Category> newData = await fillCategories();
    categoriesList.assignAll(newData);
  }
  update(['category']);
}
Future<void> updateProducts(int category, {bool fillData = true}) async {
  if (fillData) {
    List<Product> newData = await fillProducts(category);
    newData = newData.where((e) => e.category == category).toList();
    productsList.assignAll(newData);
  }
  update(['product']);
}

Probably it was a basic issue I should have notice before, but I not gonna forget it now.