title: How I can fetch the data after button click in flutter?
body: <p>I am making a Love Calculator as I am a newbie. But I am fetching the data from the api and calculating it in the backend. But I am not able to do it via button click. Please help me to do so.</p>
  <pre><code>import 'dart:io';
  
  import 'package:AllInOneCalci/CustomTextField.dart';
  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(
                  'Love Calculator',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 35.0,
                      fontFamily: 'DancingScript',
                      fontWeight: FontWeight.bold),
                ),
              ),
            ],
          ),
        ),
        body: CustomFetchData(),
      );
    }
  }
  
  class CustomFetchData extends StatefulWidget {
    @override
    _CustomFetchDataState createState() =&gt; _CustomFetchDataState();
  }
  
  class _CustomFetchDataState extends State&lt;CustomFetchData&gt; {
    int percentage = 0;
    String result = &quot;&quot;;
  
    TextEditingController firstNameController = new TextEditingController();
    TextEditingController secondNameController = new TextEditingController();
  
    Future&lt;Post&gt; _getData({String name1, String name2}) async {
      final response = await http.get(
          'https://love-calculator.p.rapidapi.com/getPercentage?fname=$name1&amp;sname=$name2',
          headers: {
            'x-rapidapi-host': 'love-calculator.p.rapidapi.com',
            'x-rapidapi-key':
                '84e84770b9msh59a96d8b03cb4aap1615a1jsn1cd0efaeedfe',
          });
  
      if (response.statusCode == 200) {
        final responseJson = json.decode(response.body);
        setState(() {
          percentage = int.parse(responseJson['percentage']);
          result = responseJson['result'];
        });
      } else {
        throw Exception('Failed to load api');
      }
    }
  
    Widget ErrorDesign() {
      return Padding(
        padding: const EdgeInsets.all(20.0),
        child: Container(
          alignment: Alignment.center,
          child: Text(
            'Error: Kindly Connect to Internet',
            style: TextStyle(
              color: Colors.redAccent,
              fontFamily: 'DancingScript',
              fontSize: 40.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      );
    }
  
    Widget FetchedCalculationValues() {
      return Column(
        children: [
          Container(
              child: FutureBuilder&lt;Post&gt;(
                  future: _getData(),
                  builder: (BuildContext context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return Center(
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: CircularProgressIndicator(),
                        ),
                      );
                    } else {
                      if (snapshot.hasError) {
                        return Container(
                          child: ErrorDesign(),
                        );
                      } else {
                        return Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Column(
                            children: [
                              Text('Percentage is $percentage %',
                                  style: TextStyle(
                                    color: Colors.black,
                                  )),
                              Text('Result is: $result',
                                  style: TextStyle(
                                    color: Colors.black,
                                  )),
                            ],
                          ),
                        );
                      }
                    }
                  })),
        ],
      );
    }
  
    @override
    Widget build(BuildContext context) {
      bool visibilitySwitch = false;
      return SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 18.0, right: 18.0, top: 15.0),
              child: CustomTextField('First Name', &quot;&quot;, Colors.cyan, Colors.cyan,
                  Colors.redAccent, firstNameController, firstNameController),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 18.0, right: 18.0),
              child: CustomTextField(
                  'Second Name',
                  &quot;&quot;,
                  Colors.red,
                  Colors.redAccent,
                  Colors.cyanAccent,
                  secondNameController,
                  secondNameController),
            ),
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: MaterialButton(
                  color: Colors.redAccent,
                  child: Text(
                    'Result',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    _getData(
                      name1: firstNameController.text,
                      name2: secondNameController.text,
                    );
                  }),
            ),
            Text(
              'Your Score Is: $percentage%',
              style: TextStyle(
                color: Colors.redAccent,
                fontSize: 25.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: Text(
                '$result',
                style: TextStyle(
                  color: Colors.redAccent,
                  fontFamily: 'DancingScript',
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      );
    }
  
    @override
    // ignore: must_call_super
    void initState() {
      _getData();
    }
  }
  
  </code></pre>
  <p><strong>Here I just want to call FetchedCalculationValues() after Result button clicked but I am not able to do so, as the circularProgressIndicator is only loading and not showing the data.</strong>
  The data is displayed but there are some bugs: As by default it is showing 16% and result without entering a single input.</p>
  <p><strong>Please help me so that whenever I click the Result button I get a curcularProgressIndicator and then the actual result and whenever I am entering the data it should hide the previous result displayed.</strong>
  Thank You:}</p>