如何使用文本字段数据并通过 api 调用进行计算？

Question

实际上，今天我决定做一个爱情计算器，为此我学习了 flutter 中的 http 调用，但现在我卡在了一个点上，我不知道如何继续前进。

import 'package:AllInOneCalci/Post.dart';
import 'package:AllInOneCalci/customAppBar.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';

class LoveCalUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var AppBarHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: customAppBar(
        height: (AppBarHeight / 3) * 0.4,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 18.0),
              child: Text(
                'All In One Cali',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 35.0,
                    fontFamily: 'DancingScript',
                    fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
      body: CustomFetchData(),
    );
  }
}

class CustomFetchData extends StatefulWidget {
  @override
  _CustomFetchDataState createState() => _CustomFetchDataState();
}

class _CustomFetchDataState extends State<CustomFetchData> {
  Future<Post> getData() async {
    final response =
        await http.get('https://love-calculator.p.rapidapi.com/getPercentage?fname=John&sname=Alice');

    if (response.statusCode == 200) {
      return Post.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to load api');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            child: FutureBuilder<Post>(
                future: getData(),
                builder: (BuildContext context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return Center(
                        child: Text('Please Wait while its loading...'));
                  } else {
                    if (snapshot.hasError) {
                      return Center(child: Text('Error: ${snapshot.error}'));
                    } else {
                      return Center(
                        child: Text('${snapshot.data}'),
                      );
                    }
                  }
                })),
      ],
    );
  }

  @override
  // ignore: must_call_super
  void initState() {
    getData();
  }
}

这是一个爱情计算器 class，我在其中编写所有内容。如果有任何新闻网站从 api 调用中获取数据，那将非常容易。

但我想在文本字段中输入两个名称，现在通过 api 计算过程，即逻辑是在后端编写的，我想将该逻辑提取到我的代码 () 鉴于我必须输入名称。你能帮我吗。我在这里给出了 api 参考。如果有人可以帮助我，那将是非常支持的。

api参考-https://rapidapi.com/ajith/api/love-calculator

Answer 1

我假设您已经可以使用 text field controllers and extract text。您需要在请求中包含的内容是 headers，其中包含重要的关键信息。

如果你look here，你可以找到几个语言请求示例的参考（例如我使用Swift作为参考）。下面你可以看到如何在 Flutter 中做到这一点：

在你的pubspec.yaml

http: ^0.12.2

在您的 .dart 文件中您需要导入

import 'dart:convert';
import 'package:http/http.dart' as http;

你还需要选择一个调用函数的地方，在我的例子中，它是来自默认 Flutter 启动项目的按钮：

Map<String, String> requestHeaders = {
    'x-rapidapi-host': 'love-calculator.p.rapidapi.com',
    'x-rapidapi-key': 'insert your API key from website',
  };

void _getNames({String name1, String name2}) async {
    final response = await http.get(
      'https://love-calculator.p.rapidapi.com/getPercentage?fname=$name1&sname=$name2',
      // Send authorization headers to the backend.
      headers: requestHeaders,
    );

    final responseJson = json.decode(response.body);
    print(responseJson);
  }

如何使用文本字段数据并通过 api 调用进行计算？

How to use the text field data and calculate through the api call in flutter?

android

backend

flutter

flutter-test

flutter-layout