api - 如何在flutter中使用rest api在下拉列表中显示数据

Question

这是我的api 数据结构。使用这个 api，我已经获取了数据。

源代码在这里。现在我想在下拉列表中显示数据（例如 pPROJTNAME），用户可以选择如下图所示的列表。如何做到这一点？

这是main.dart

import 'package:flutter/material.dart';
import 'package:get_api/model.dart';
import 'package:get_api/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JsonParseDemo(),
    );
  }
}

class JsonParseDemo extends StatelessWidget {
  /* ---------------------------------------------------------------------------- */
  const JsonParseDemo({Key key}) : super(key: key);
  /* ---------------------------------------------------------------------------- */
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hi!'),
        centerTitle: true,
      ),
      body: FutureBuilder<User>(
          future: NetService.fetchTickesInfo(),
          builder: (context, snapshot) => snapshot.hasData
              ? ListView.builder(
                  itemCount: snapshot.data.projectInfos.length,
                  itemBuilder: (context, index) => Card(
                    child: Column(
                      children: [
                        Text(snapshot.data.projectInfos[index]?.pROJTNAME ??
                            '--'),
                        Text(snapshot.data.projectInfos[index]?.pROJTDESC ??
                            '--'),
                      ],
                    ),
                  ),
                )
              : snapshot.hasError
                  ? Text('Something was wrong!: ${snapshot.error}')
                  : Center(
                      child: CircularProgressIndicator(),
                    )),
    );
  }
}

标签： apirestflutterdartdropdown

Answer 1

您可以使用 DropdownButton 小部件：https ://api.flutter.dev/flutter/material/DropdownButton-class.html