在flutter中從API訪問資料

我想從下面的 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);
  }
}

uj5u.com熱心網友回復：

首先創建一個這樣的模型：

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 的 init 狀態呼叫獲取資料函式

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();
      }
   );  
}

uj5u.com熱心網友回復：

試試下面的代碼希望它對你有幫助。如果您從 API 獲取資料，請

Your List Widget output screen->

標籤：扑 接口 镖 接口连接

上一篇：有什么方法可以在flutter中為Windows桌面應用程式播放音頻檔案？

下一篇：Flutter使用“.withOpacity”導致“該欄位被初始化為一個非常數值”