时间戳

首页 > 解决方案 > 来自json Api的flutter中的下拉菜单

flutter - 来自json Api的flutter中的下拉菜单

问题描述

我有一个 Api，我想在 Flutter 应用程序的下拉菜单中显示它。

我能够在简单的文本小部件中获取列表，但无法在 DropDownButton 中获取。

这是我的代码示例

_getAllCategories() async {
    var categories = await _categoryService.getCategories();
    var _list = json.decode(categories.body);
    List<Category> results = [];
    _list['data'].forEach((data) {
      var model = Category();
      model.id = data["id"];
      model.name = data["categoryName"];
      model.icon = data["categoryIcon"];
      results.add(model);
    });
    if (mounted) {
      setState(() {
        _categoryList = results;
      });
    }
  }

我正在使用

ListView.builder(
          itemCount: _categoryList.length,
          itemBuilder: (context, index){
            return Text(_categoryList[index].name,style: TextStyle(fontSize: 25),);
          },
        ),

在此处输入图像描述

标签： flutterdart

解决方案

您可以尝试一个简单的下拉小部件，如下所示：

    
  List<Category> _categoryList = List<Category>();

  Category dropdownValue;

  @override
  Widget build(BuildContext context) {
    
    return DropdownButton<Category>(
      value: dropdownValue,
      icon: Icon(Icons.arrow_downward),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (Category newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: _categoryList.map<DropdownMenuItem<Category>>((Category value) {
        return DropdownMenuItem<Category>(
          value: value,
          child: Text(value.name),
        );
      }).toList(),
    );
  }
}

class Category {
  String name;
  String icon;
  int id;
}

推荐阅读