title: How to display MySQL query results based on TextField value entered
body: <p>I am fairly new to Flutter and would like to find out how to display MySQL query results based on the TextField value entered by user. </p>
  
  <p>As I am new to Flutter I scraped bits and pieces from other Tutorials to try and achieve outcome .</p>
  
  <p>Some help would be tremendously grateful for , as I am struggling for weeks now with this.This is a re-edit on my question as I am trying to be bit more descriptive hoping someone can pleeeease help . Thank you </p>
  
  <p>This is my MySQL table : 
  <a href="https://i.stack.imgur.com/GF2bz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GF2bz.png" alt="My MySQL table"></a></p>
  
  <p>This my PHP file (flutter_data.PHP)</p>
  
  <pre><code>$con = mysqli_connect($HostName, $HostUser, $HostPass, $DatabaseName);
  
  $json = file_get_contents('php://input'); 
  
  $obj = json_decode($json,true);
  
  $name = $obj['name'];//this value coming from TextField ( i hope :-)) 
  
  $CheckSQL = "SELECT * FROM Student_data WHERE student_name = '$name'";
  
  $result = $con-&gt;query($CheckSQL);
  
  if ($result-&gt;num_rows &gt;0) {
  
   while($row[] = $result-&gt;fetch_assoc()) {
  
   $Item = $row;
  
   $json = json_encode($Item, JSON_NUMERIC_CHECK);
  
   }
  
  }else {
  
   echo "No Results Found.";
  
  }
  
  echo $json;
  
  $con-&gt;close();
  ?&gt;
  </code></pre>
  
  <p>I did a test to see if my PHP file works without the WHERE clause . Below running my PHP file .</p>
  
  <p><a href="https://i.stack.imgur.com/2g86v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2g86v.png" alt="enter image description here"></a></p>
  
  <p>My Home screen consisting of TextField , Image , FlatButton</p>
  
  <p><a href="https://i.stack.imgur.com/Jl8Ok.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jl8Ok.png" alt="enter image description here"></a></p>
  
  <p>Setting Class variables:</p>
  
  <pre><code>
   int studentID;
   String studentName;
   int studentPhoneNumber;
   String studentSubject;
  
    Studentdata({
      this.studentID,
      this.studentName,
      this.studentPhoneNumber,
      this.studentSubject
    });
  
    factory Studentdata.fromJson(Map&lt;String, dynamic&gt; json) {
      return Studentdata(
        studentID: json['id'],
        studentName: json['student_name'],
        studentPhoneNumber: json['student_phone_number'],
        studentSubject: json['student_class']
  
      );
    }
  }
  
  </code></pre>
  
  <p>I have set my TextField to capture onChanged value </p>
  
  <pre><code> onChanged: (value) {
  
                  setState(() {
  
                      name = value;
  </code></pre>
  
  <p>My FlatButton with onPressed :</p>
  
  <pre><code>onPressed: () {
  
  
                    var route = new MaterialPageRoute(
  
                      builder: (BuildContext context) =&gt; new NextPageState(name.toString(),                           
  
  
                    ));
                    Navigator.of(context).push(route);
                  },
  </code></pre>
  
  <p>Below code for NextPage :</p>
  
  <pre><code>class NextPageState extends StatefulWidget {
  
    final String name;
  
    NextPageState(this.name);
  
    @override
  
    State&lt;StatefulWidget&gt; createState() {
  
      return NextPage(this.name);
  
    }
  }
  
  class NextPage extends State&lt;NextPageState&gt; {
  
    final String name ;
  
    NextPage(this.name);
  
    // API URL
    var url = 'https://www.datashine.co.za/flutter_data.php';
  
    Future&lt;List&lt;Studentdata&gt;&gt; fetchStudent() async {
  
      var data = {'name': name};
  
      var response = await http.post(url, body: json.encode(data));
  
      if (response.statusCode == 200) {
  
        print(response.statusCode);
  
        final items = json.decode(response.body).cast&lt;Map&lt;String, dynamic&gt;&gt;();
  
        List&lt;Studentdata&gt; studentList = items.map&lt;Studentdata&gt;((json) {
          return Studentdata.fromJson(json);
        }).toList();
  
        return studentList;
  
        }
  
      else {
        throw Exception('Failed to load data from Server.');
      }
    }
  
    @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text(name),
            automaticallyImplyLeading: true,
            leading: IconButton(icon:Icon(Icons.arrow_back),
            onPressed:() =&gt; Navigator.pop(context, false),
          )
        ),
        body: FutureBuilder&lt;List&lt;Studentdata&gt;&gt;(
        future: fetchStudent(),
        builder: (context, snapshot) {
  
        if (!snapshot.hasData) return Center(
          child: CircularProgressIndicator()
        );
  
          return ListView(
        children: snapshot.data
        .map((data) =&gt; Column(children: &lt;Widget&gt;[
  
          GestureDetector(
            onTap: (){print(data.studentName);},
            child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
  
            Padding(
            padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
            child: Text('Name = ' + data.studentName.toString(),
              style: TextStyle(fontSize: 21))),
  
  
  
                    ]),)
                   ],))
             .toList(),
                );
               },
              )
            ));
           }
          }
  </code></pre>
  
  <p>Upon running App , it seems like no results are returning . So I have no idea on how to fix . The Circularprogress indicator just loads and hangs .</p>
  
  <p><a href="https://i.stack.imgur.com/oE3cF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oE3cF.png" alt="enter image description here"></a></p>