在颤振中从 API 访问数据

Question

我想从下面的 API 访问数据。
“https://api.categen.com/api.php/recent_activity/1”
并希望以文本形式打印。 请帮帮我。

此外，还有3个类

首页。飞镖文件。
数据服务。飞镖文件。
模型 。飞镖文件

我尝试了下面的代码。
Home.dart .

import 'dart:convert';

import 'package:categen_api_test/data_service.dart';
import 'package:categen_api_test/model.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

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

class _HomePageState extends State<HomePage> {
  final _dataService = DataService();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Categen API"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Click me"),
          onPressed: () {
            _getlist();
          },
        ),
      ),
    );
  }

  void _getlist() async {
    final response = await _dataService.getData();
    print(response.name);
  }
}

数据服务

import 'dart:convert';

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

class DataService {
  Future<ModelData> getData() async {
    final String url = "https://api.categen.com/api.php/recent_activity/1";
    final uri = Uri.https('api.categen.com', '/api.php/recent_activity/1');
    final response = await http.get(uri);
    print(response.body);

    final json = jsonDecode(response.body);
    return ModelData.fromJson(json);
  }
}

Answer 1

首先创建一个这样的模型：

class Model {
  final String name;
  final String location;
  final String action_value;
  final String item;

  Model(this.name, this.location, this.action_value, this.item);

  List<Model> getList(json) {
    List<Model> tempList = []
    json['records'].forEach((model)=> tempList.add(
        Model(
           model["name"],
           model["location"],
           model["action_value"],
           model["item"]
         )
       )
      );
   return tempList;
  }
}

然后创建一个函数来获取数据：

Future<List<Model>> fetchData() async { 
   final response = await http.get('https://api.categen.com/api.php/recent_activity/1'); 
   if (response.statusCode == 200) { 
      return Model.getList(response.body); 
   } else { 
      throw Exception('Unable to fetch products from the REST API'); 
   } 
}

在 HomePage Widget 的初始化状态下调用获取数据函数

late Future<List<Model>> futureData;
void initState() {
    super.initState();
    futureData = fetchData();
}

现在剩下要做的是使用 FutureBuilder 小部件获取数据。 并显示您的数据列表

FutureBuilder<Model>(
  future: futureData,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
         children: snaphot.map((e)=>Text(e.name)).toList()
      );
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }
    return const CircularProgressIndicator();
  },
)

如果您想在单击按钮时重新加载数据，则在单击按钮时调用获取数据，然后重建主页小部件的状态，如下所示

onPressed: (){
   setState(
      (){
        futureData = fetchData();
      }
   );  
}

Answer 2

试试下面的代码希望它对你有帮助。如果您从 API 获取数据，请参考我的回答 here 或 here 或 here 希望对您有所帮助

创建您的主页小部件：

 Center(
    child: ElevatedButton(
      child: Text('Pressed Me'),
      onPressed: () => Navigator.push(
        context,
        MaterialPageRoute(
         builder: (context) => Jobs(),
        ),
      ),
    ),
  ),

创建您的列表小部件。

您的 API 调用函数：

Future<List<dynamic>> getJobsData() async {
    String url = 'https://api.categen.com/api.php/recent_activity/1';
    var response = await http.get(Uri.parse(url), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    return json.decode(response.body)['records'];
  }

您的小部件：

Column(
    children: [
      Expanded(
        child: Center(
          child: FutureBuilder<List<dynamic>>(
            future: getJobsData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ListView.builder(
                    itemCount: snapshot.data!.length,
                    itemBuilder: (context, index) {
                      var name = snapshot.data![index]['name'];
                      var location = snapshot.data![index]['location'];
                      var item = snapshot.data![index]['item'];
                      var action = snapshot.data![index]['action_value'];
                      var date = snapshot.data![index]['created_timestamp'];
                      return Card(
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.green.shade300),
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: ListTile(
                          leading: Text(
                            action.toString(),
                          ),
                          title: Text(name),
                          subtitle: Text(
                            location + '\n' + date,
                          ),
                          trailing: Text(item),
                        ),
                      );
                    },
                  ),
                );
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    ],
  ),

你的全班：

 class Jobs extends StatelessWidget {

  Future<List<dynamic>> getJobsData() async {
    String url = 'https://api.categen.com/api.php/recent_activity/1';
    var response = await http.get(Uri.parse(url), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    return json.decode(response.body)['records'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jobs'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: FutureBuilder<List<dynamic>>(
                future: getJobsData(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ListView.builder(
                        itemCount: snapshot.data!.length,
                        itemBuilder: (context, index) {
                          var name = snapshot.data![index]['name'];
                          var location = snapshot.data![index]['location'];
                          var item = snapshot.data![index]['item'];
                          var action = snapshot.data![index]['action_value'];
                          var date = snapshot.data![index]['created_timestamp'];
                          return Card(
                            shape: RoundedRectangleBorder(
                              side: BorderSide(color: Colors.green.shade300),
                              borderRadius: BorderRadius.circular(15.0),
                            ),
                            child: ListTile(
                              leading: Text(
                                action.toString(),
                              ),
                              title: Text(name),
                              subtitle: Text(
                                location + '\n' + date,
                              ),
                              trailing: Text(item),
                            ),
                          );
                        },
                      ),
                    );
                  }
                  return CircularProgressIndicator();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您的主页小部件输出屏幕->

您的列表小部件输出屏幕->