为什么我的代码停在CircularProgressIndicator()上？

huangapple
go评论98阅读模式
英文:

Why is my code stuck on CircularProgressIndicator()

问题

以下是您提供的代码的翻译部分：

  1. import 'package:app/logic/models/http.dart';
  2. import 'package:app/screens/myhomepage.dart';
  3. import 'logic/models/user.dart';
  4. import 'package:flutter/material.dart';
  5. import 'package:provider/provider.dart';
  6. import 'dart:async';
  8. void main() {
  9.   runApp(MyApp());
  10. }
  12. class MyApp extends StatelessWidget {
  13.   MyApp({super.key});
  14.   Http http = Http();
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return StreamBuilder(
  19.       stream: Stream.fromFuture(
  20.         http.makeUserGetRequest(),
  21.       ),
  22.       builder: (context, response) {
  23.         if (!response.hasData) {
  24.           return const Center(
  25.             child: CircularProgressIndicator(),
  26.           );
  27.         } else if (response.hasError) {
  28.           return Center(
  29.             child: Text('${response.error}'),
  30.           );
  31.         } else {
  32.           return MultiProvider(
  33.             providers: [
  34.               Provider<List<User>?>.value(value: response.data),
  35.             ],
  36.             child: MaterialApp(
  37.               title: 'Flutter Rest Api',
  38.               theme: ThemeData(
  39.                 brightness: Brightness.dark,
  40.                 primarySwatch: Colors.orange,
  41.               ),
  42.               home: const MyHomePage(),
  43.             ),
  44.           );
  45.         }
  46.       },
  47.     );
  48.   }
  49. }

这是主要的Flutter应用程序代码，用于从REST API获取用户数据并显示在界面上。

以下是HTTP请求部分的翻译：

  1. import 'dart:convert';
  2. import './user.dart';
  3. import '../BO/bo.dart';
  4. import 'dart:async';
  6. class Http {
  7.   // localhost || 10.0.2.2 (mysql for Android Emulator)
  8.   final url = 'localhost:8000/';
  9.   final users = 'users/';
  10.   final headers = {'Content-type': 'application/json'};
  11.   final encoding = Encoding.getByName('utf-8');
  12.   Http();
  14.   Future<List<User>> makeUserGetRequest() async {
  15.     http.Response response = await http.get(Uri.parse('$url$users'));
  16.     List<User> result = List<User>.from(
  17.       json.decode(response.body).map((json) => User.fromJson(json)),
  18.     );
  19.     result.sort((a, b) => a.id.compareTo(b.id));
  20.     print(getStatusCode(response.statusCode));
  21.     return result;
  22.   }
  24.   makeUserPostRequest(User user) async {
  25.     String body = json.encode(user.toJson());
  26.     http.Response response = await http.post(
  27.       Uri.parse('$url$users'),
  28.       headers: headers,
  29.       encoding: encoding,
  30.       body: body,
  31.     );
  32.     print((response.body));
  33.     print(
  34.         'response status ${response.statusCode} => ${getStatusCode(response.statusCode)}');
  35.   }
  37.   makeUserPutRequest(User user) async {
  38.     String body = json.encode(user.toJson());
  39.     http.Response response = await http.put(Uri.parse('$url$users${user.id}'),
  40.         headers: headers, encoding: encoding, body: body);
  41.     print((response.body));
  42.     print(
  43.         'response status ${response.statusCode} => ${getStatusCode(response.statusCode)}');
  44.   }
  46.   makeUserDeleteRequest(User user) async {
  47.     http.Response response =
  48.         await http.delete(Uri.parse('$url$users${user.id}'), headers: headers);
  49.     print((response.body));
  50.     print(
  51.         'response status ${response.statusCode} => ${getStatusCode(response.statusCode)}');
  52.   }
  53. }

这部分代码用于与REST API进行通信，包括获取、创建、更新和删除用户数据。

至于您的问题，您提到在模拟器或物理设备上运行应用程序时只能看到一个"圆形进度指示器"小部件。这可能是因为应用程序正在等待从API获取数据，并且在数据准备好之前显示了进度指示器。

要解决此问题，您可以考虑以下几点：

  1. 确保您的API端点（$url$users）是正确的，并且服务器正在运行且可访问。

  2. 检查网络连接，确保您的设备能够访问API服务器。

  3. 在应用程序中添加错误处理，以便能够捕获和处理API调用中的错误。您可以在makeUserGetRequest等方法中添加更多的错误处理代码，以帮助诊断问题。

  4. 如果您的API调用需要身份验证或令牌，请确保您已正确配置它们。

  5. 使用调试工具（例如Flutter DevTools）来跟踪应用程序的网络请求和响应，以便更好地理解问题所在。

通过检查这些方面，您应该能够找到并解决导致应用程序显示进度指示器而不获取数据的问题。希望这些提示对您有所帮助！

英文: 
  1. import &#39;package:app/logic/models/http.dart&#39;;
  2. import &#39;package:app/screens/myhomepage.dart&#39;;
  3. import &#39;logic/models/user.dart&#39;;
  4. import &#39;package:flutter/material.dart&#39;;
  5. import &#39;package:provider/provider.dart&#39;;
  6. import &#39;dart:async&#39;;
  8. void main() {
  9.   runApp(MyApp());
  10. }
  12. class MyApp extends StatelessWidget {
  13.   MyApp({super.key});
  14.   Http http = Http();
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return StreamBuilder(
  19.       stream: Stream.fromFuture(
  20.         http.makeUserGetRequest(),
  21.       ),
  22.       builder: (context, response) {
  23.         if (!response.hasData) {
  24.           return const Center(
  25.             child: CircularProgressIndicator(),
  26.           );
  27.         } else if (response.hasError) {
  28.           return Center(
  29.             child: Text(&#39;${response.error}&#39;),
  30.           );
  31.         } else {
  32.           return MultiProvider(
  33.             providers: [
  34.               Provider&lt;List&lt;User&gt;?&gt;.value(value: response.data),
  35.             ],
  36.             child: MaterialApp(
  37.               title: &#39;Flutter Rest Api&#39;,
  38.               theme: ThemeData(
  39.                 brightness: Brightness.dark,
  40.                 primarySwatch: Colors.orange,
  41.               ),
  42.               home: const MyHomePage(),
  43.             ),
  44.           );
  45.         }
  46.       },
  47.     );
  48.   }
  49. }

This is my main and the below code is http file import 'package:http/http.dart' as http;

  1. import &#39;dart:convert&#39;;
  2. import &#39;./user.dart&#39;;
  3. import &#39;../BO/bo.dart&#39;;
  4. import &#39;dart:async&#39;;
  6. class Http {
  7.   //localhost || 10.0.2.2 (mysql for Android Emulator)
  8.   final url = &#39;localhost:8000/&#39;;
  9.   final users = &#39;users/&#39;;
  10.   final headers = {&#39;Content-type&#39;: &#39;application/json&#39;};
  11.   final encoding = Encoding.getByName(&#39;utf-8&#39;);
  12.   Http();
  14.   Future&lt;List&lt;User&gt;&gt; makeUserGetRequest() async {
  15.     http.Response response = await http.get(Uri.parse(&#39;$url$users&#39;));
  16.     List&lt;User&gt; result = List&lt;User&gt;.from(
  17.       json.decode(response.body).map((json) =&gt; User.fromJson(json)),
  18.     );
  19.     result.sort((a, b) =&gt; a.id.compareTo(b.id));
  20.     print(getStatusCode(response.statusCode));
  21.     return result;
  22.   }
  24.   makeUserPostRequest(User user) async {
  25.     String body = json.encode(user.toJson());
  26.     http.Response response = await http.post(
  27.       Uri.parse(&#39;$url$users&#39;),
  28.       headers: headers,
  29.       encoding: encoding,
  30.       body: body,
  31.     );
  32.     print((response.body));
  33.     print(
  34.         &#39;response status ${response.statusCode} =&gt; ${getStatusCode(response.statusCode)}&#39;);
  35.   }
  37.   makeUserPutRequest(User user) async {
  38.     String body = json.encode(user.toJson());
  39.     http.Response response = await http.put(Uri.parse(&#39;$url$users${user.id}&#39;),
  40.         headers: headers, encoding: encoding, body: body);
  41.     print((response.body));
  42.     print(
  43.         &#39;response status ${response.statusCode} =&gt; ${getStatusCode(response.statusCode)}&#39;);
  44.   }
  46.   makeUserDeleteRequest(User user) async {
  47.     http.Response response =
  48.         .
  49. 3await http.delete(Uri.parse(&#39;$url$users${user.id}&#39;), headers: headers);
  50.     print((response.body));
  51.     print(
  52.         &#39;response status ${response.statusCode} =&gt; ${getStatusCode(response.statusCode)}&#39;);
  53.   }
  54. }

I am trying to make restful api using node.js as server, mysql as database and flutter as frontend.
I have checked my backend using Postman and it is working fine but once I try to run the app on either emulator or physical device I am just getting a Circular Progress Indicator Widget.
What is wrong and how do I solve this? Please do tell. I am new to API and Backend.

答案1

得分: 0

  1. 我倾向于在处理StreamBuilder或FutureBuilder时反转逻辑，以便在没有捕获的任何情况下显示进度指示器。
  3. 也为什么将一个Future转换为一个流，当已经存在FutureBuilder？
  5. ```Dart
英文:

I tend to flip the logic when dealing with StreamBuilder or FutureBuilder, so that in any situation that is not caught it is displaying a progress indicator.

  1. ...
  2. Widget build(BuiildContext context) {
  3.   return StreamBuilder(
  4.     stream: Stream.formFuture(http.makeUserGetRequest(),),
  5.     builder: (context, snapshot) {
  6.       if (snapshot.hasData) {
  7.         return Text(snapshot.data);
  8.       } else if (snapshot.hasError) {
  9.         return Text(&quot;${snapshot.error}&quot;);
  10.       }
  11.       return CircularProgressIndicator();
  12.     },
  13.   )
  14. }

Also why are converting a future to a stream, when a FutureBuilder exists?

  1. ...
  2. Widget build(BuiildContext context) {
  3.   return FutureBuilder(
  4.     future: http.makeUserGetRequest(),
  5.     builder: (context, snapshot) {
  6.       if (snapshot.hasData) {
  7.         return Text(snapshot.data);
  8.       } else if (snapshot.hasError) {
  9.         return Text(&quot;${snapshot.error}&quot;);
  10.       }
  11.       return CircularProgressIndicator();
  12.     },
  13.   )
  14. }

huangapple
  • 本文由 发表于 2023年6月19日 01:19:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76501743.html
  • flutter
  • http
  • mysql
  • node.js
  • rest
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定