使用FutureBuilder启动api调用时未调用生成器

Question

我试图在登录按钮点击时调用一个api，该api被调用，并返回正确的数据，但生成器没有被调用，CircularProgressIndicator:

class _LoginState extends State<Login> {
Future<LoginModel> getLoginData(String username, String password) async {
var loginModel = await LoginAuthentication().login('name', 'pass');
return loginModel;
}

点击按钮，我调用一个小部件

void _loginTapped(BuildContext context) {
buildLoginAPI(context);
}
Future<Widget> buildLoginAPI(BuildContext context) async {
return FutureBuilder<LoginModel>(
future:  getLoginData('',''),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return Center(
child: Text(
snapshot.error.toString(),
textAlign: TextAlign.center,
textScaleFactor: 1.3,
),
);
}
//TODO: Handle data: store the tokens in preferences
//  final result = snapshot.data?.body;
} else {
return const CircularProgressIndicator();
}
return const CircularProgressIndicator();
},
);
}

Answer 1

我不太明白你想在这里实现什么。FutureBuilder是一个小部件，我们使用它来等待一些数据被提取，并根据这些数据在屏幕上显示一些内容。我假设您希望显示正在提取的数据：你不应该把FutureBuilder作为函数的返回(在我们的例子中是buildLoginAPI(，而是应该把FutureBuilder直接放在你的窗口小部件树中(例如在你的脚手架主体中(通过这种方式，FutureBuilder将显示从函数getLogiData中提取的数据(注意，您必须调用该函数才能提取数据，您可以通过在initState中调用它或按下按钮来实现(

示例：

//Here the FutureBuilder can be the body of a scaffold for example
return Scaffold(
body :FutureBuilder<LoginModel>(
future:  getLoginData('',''),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return Center(
child: Text(
snapshot.error.toString(),
textAlign: TextAlign.center,
textScaleFactor: 1.3,
),
);
}
//TODO: Handle data: store the tokens in preferences
//  final result = snapshot.data?.body;
} else {
return const CircularProgressIndicator();
}
return const CircularProgressIndicator();
},
),
);

对于函数getLogiData，您可以通过按下按钮来调用它，例如：

ElevatedButton(
child: Text("Fetch Data"),
onPressed: ()=>getLoginData('',''),
),