flutter 如何使用http插件请求的json数据进行展示

首先，在Flutter中使用http插件请求json数据需要先在`pubspec.yaml`文件中添加依赖：

dependencies:
  http: ^0.12.2

然后在Dart文件中导入http插件：

import 'package:http/http.dart' as http;

接着，可以使用http插件中的`get()`方法来请求json数据，例如：

Future<List<dynamic>> fetchData() async {
  final response = await http.get('https://jsonplaceholder.typicode.com/posts');
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load data');
  }
}

这个例子中，我们访问了一个在线的json数据接口，这个接口返回的是一个包含多个文章信息的json数组。在请求成功后，我们使用`json.decode()`方法将json字符串转换为List<dynamic>类型的数据，并返回给调用方。

最后，我们可以在Flutter中使用ListView等组件展示这些数据，例如：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter HTTP Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter HTTP Demo')),
        body: FutureBuilder<List<dynamic>>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(snapshot.data[index]['title']),
                    subtitle: Text(snapshot.data[index]['body']),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

这个例子中，我们使用了FutureBuilder来异步构建ListView组件，当请求到数据时，ListView的itemCount就是数据的长度，而每个item则显示了文章的标题和内容。如果请求失败，则显示异常信息。如果请求还在进行中，则显示一个圆形进度条。