如何从json返回值，让它显示在颤振文本小部件上

Question

如何显示变量user的值并在文本小部件中显示它，下面是源代码。已经在终端

中打印的值

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
//get valueID => null;
@override
void initState() {
super.initState();
getStringValuesSF();
}
getStringValuesSF() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
var stringValue = prefs.getString('currentUserId');
String apiurl = "http://192.168.161.144/api/dash.php";
var response = await http.post(Uri.parse(apiurl), body: {
"userid": stringValue,
});
if (response.statusCode == 200) {
var data = json.decode(response.body);
if (data["success"] == true) {
String user;
String userpics;
user = data["uname"];
userpics = data["upic"];
print(user);
print(userpics);
} else if (data["success"] == '10') {
print('not connected from DB');
}
} else {
print('not connected');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("HomePage")),
body: Container(
child: Text("Welcome User", style: TextStyle(color: Colors.black)),
),
);
}
}

Answer 1

你需要定义一个新的变量，并在你的api响应准备好时更新它，像这样:

class _HomeState extends State<Home> {
String userName = "";
@override
void initState() {
super.initState();
getStringValuesSF();
}
getStringValuesSF() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
var stringValue = prefs.getString('currentUserId');
String apiurl = "http://192.168.161.144/api/dash.php";
var response = await http.post(Uri.parse(apiurl), body: {
"userid": stringValue,
});
if (response.statusCode == 200) {
var data = json.decode(response.body);
if (data["success"] == true) {
String userpics;
userpics = data["upic"];
setState(() {
userName = data["uname"];
});
print(userName);
print(userpics);
} else if (data["success"] == '10') {
print('not connected from DB');
}
} else {
print('not connected');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("HomePage")),
body: Container(
child: Text("Welcome User = $userName",
style: TextStyle(color: Colors.black)),
),
);
}
}

Answer 2

您可以创建一个模型类，

class UserModel {
final String user;
final String userpics;
UserModel({
required this.user,
required this.userpics,
});
/// add fromJson will be better, skipping for now
}

和使用FutureBuilder的未来方法

class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
Future<UserModel?> getStringValuesSF() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
var stringValue = prefs.getString('currentUserId');
String apiurl = "http://192.168.161.144/api/dash.php";
var response = await http.post(Uri.parse(apiurl), body: {
"userid": stringValue,
});
if (response.statusCode == 200) {
var data = json.decode(response.body);
if (data["success"] == true) {
String user;
String userpics;
user = data["uname"] ?? "";
userpics = data["upic"] ?? "";
print(user);
print(userpics);
return UserModel(user: user, userpics: userpics);
} else if (data["success"] == '10') {
print('not connected from DB');
}
} else {
print('not connected');
}
}
late final future = getStringValuesSF();
@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder<UserModel?>(
future: future,
builder: (context, snapshot) {
if (snapshot.hasData) {
final user = snapshot.data;
return Column(
children: [
Text(user?.user?? ""),
],
);
}
if (snapshot.hasError) return Text("Got error");
return Text("Other state");
},
),
);
}
}

关于使用FutureBuilder的更多信息