时间戳

首页 > 解决方案 > Flutter中如何使用文本字段数据并通过api调用计算？

android - Flutter中如何使用文本字段数据并通过api调用计算？

问题描述

实际上，今天我决定制作一个爱情计算器，为此我学习了颤振中的 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();
  }
}

这是一个lovecalculator 类，我在其中编写所有内容。如果有任何 NEWS 网站，数据是从 api 调用中获取的，那么这将非常容易。

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

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

标签： androidflutterflutter-layoutbackendflutter-test

解决方案

我假设您已经可以使用文本字段控制器并提取文本。您需要在请求中包含的内容是包含重要关键信息的标头。

如果你看这里，你可以找到几种语言请求示例的参考（例如我使用 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);
  }

推荐阅读