title: Flutter search using TextFormField with onFieldSubmitted property from api and display resulting cards in ListView
body: <p>I have this code to send data to API</p>
  <pre><code>import 'dart:async';
  import 'dart:convert';
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  
  Future&lt;Albumm&gt; createAlbum(String title) async {
    final http.Response response = await http.post(
      Uri.parse('https://jsonplaceholder.typicode.com/search'),
      headers: &lt;String, String&gt;{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(&lt;String, String&gt;{
        'title': title,
      }),
    );
  
    if (response.statusCode == 201) {
      return Albumm.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to create album.');
    }
  }
  
  class Albumm {
    final String title;
  
    Albumm({required this.title});
  
    factory Albumm.fromJson(Map&lt;String, dynamic&gt; json) {
      return Albumm(
        title: json['title'],
      );
    }
  }
  </code></pre>
  <p>and the following TextFormField to type the title to search</p>
  <pre><code>TextFormField(
                      onFieldSubmitted: (String value) {
                        Albumm(
                            title: &quot;title&quot;);
                      },
                      textInputAction: TextInputAction.search,
                      keyboardType: TextInputType.text,
                   ),
                    ),
  </code></pre>
  <p>and the following listview to list the cards with the searched title</p>
  <pre><code>ListView.builder(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        physics: ScrollPhysics(),
                        itemCount: snapshot.data!.length,
                        itemBuilder: (context, i) =&gt; InkWell(
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) =&gt; JobDetails()),
                            );
                          },
                          child: Card(
                              
                              
                              clipBehavior: Clip.hardEdge,
                              child: Padding(
                                  padding: const EdgeInsets.all(7.0),
                                  child: Stack(children: &lt;Widget&gt;[
                                    Align(
                                      alignment: Alignment.centerRight,
                                      child: Stack(children: &lt;Widget&gt;[
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 10, top: 5.0),
                                          child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            children: &lt;Widget&gt;[
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Expanded(
                                                      child: Text(
                                                    snapshot.data[i].title,
                                                    style: TextStyle(
                                                        fontSize: 20,
                                                        fontWeight:
                                                            FontWeight.bold,
                                                        color: Color.fromARGB(
                                                            255,
                                                            252,
                                                            114,
                                                            2)),
                                                  )),
                                                  IconButton(
                                                      onPressed: () {},
                                                      icon: Icon(Icons
                                                          .favorite_border))
                                                ],
                                              ),
                                              Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: [
                                                    Expanded(
                                                      child: Text.rich(
                                                          TextSpan(children: [
                                                        WidgetSpan(
                                                            child: Icon(
                                                          Icons
                                                              .business_center,
                                                          size: 18,
                                                        )),
                                                        TextSpan(
                                                          text: snapshot
                                                              .data[i]
                                                              .companyName,
                                                        )
                                                      ])),
                                                    ),
                                                    Expanded(
                                                        child: Text.rich(
                                                            TextSpan(
                                                                children: [
                                                          WidgetSpan(
                                                              child: Icon(
                                                            Icons
                                                                .query_builder,
                                                            size: 17,
                                                          )),
                                                          if (snapshot.data[i]
                                                                  .jobType ==
                                                              &quot;1&quot;)
                                                            TextSpan(
                                                              text:
                                                                  &quot; Full-time&quot;,
                                                            )
                                                          else if (snapshot
                                                                  .data[i]
                                                                  .jobType ==
                                                              &quot;2&quot;)
                                                            TextSpan(
                                                              text:
                                                                  &quot; Part-time&quot;,
                                                            )
                                                          else
                                                            TextSpan(
                                                              text:
                                                                  &quot; Internship&quot;,
                                                            )
                                                        ]))),
                                                    Expanded(
                                                      child: Text.rich(
                                                          TextSpan(children: [
                                                        WidgetSpan(
                                                            child: Icon(
                                                          Icons.place,
                                                          size: 18,
                                                        )),
                                                        TextSpan(
                                                          text: snapshot
                                                              .data[i]
                                                              .location,
                                                        )
                                                      ])),
                                                    ),
                                                  ]),
                                              SizedBox(height: 15),
                                              Row(
                                                children: [
                                                  Expanded(
                                                      child: ReadMoreText(
                                                    snapshot.data[i]
                                                        .jobDescription,
                                                    trimLines: 2,
                                                    colorClickableText:
                                                        Colors.black,
                                                    trimMode: TrimMode.Line,
                                                    trimCollapsedText: 'more',
                                                    trimExpandedText: 'less',
                                                    moreStyle: TextStyle(
                                                        color: Color.fromARGB(
                                                            255,
                                                            252,
                                                            114,
                                                            2)),
                                                    style: TextStyle(
                                                        fontSize: 15,
                                                        color: Colors.black),
                                                  )),
                                                ],
                                              ),
                                              SizedBox(height: 15),
                                              Row(
                                                children: [
                                                  Text(&quot;Salary: &quot;,
                                                      style: TextStyle(
                                                          color:
                                                              Colors.black)),
                                                  Text(
                                                      snapshot.data[i].salary,
                                                      style: TextStyle(
                                                          color:
                                                              Colors.black))
                                                ],
                                              ),
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Expanded(
                                                    child: Row(
                                                      children: [
                                                        Container(
                                                            decoration:
                                                                BoxDecoration(
                                                                    border:
                                                                        Border
                                                                            .all(
                                                                      color: Colors
                                                                          .lightGreen,
                                                                    ),
                                                                    borderRadius:
                                                                        BorderRadius.all(
                                                                            Radius.circular(20))),
                                                            child: Text.rich(
                                                              TextSpan(
                                                                  children: [
                                                                    if (snapshot
                                                                            .data[i]
                                                                            .jobCategory ==
                                                                        1)
                                                                      TextSpan(
                                                                        text:
                                                                            &quot;Developer&quot;,
                                                                      )
                                                                
                                                                    else
                                                                      TextSpan(
                                                                        text:
                                                                            &quot;Designer&quot;,
                                                                      )
                                                                  ]),
                                                              style: TextStyle(
                                                                  color: Colors
                                                                      .lightGreen,
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .bold),
                                                            )
  
                                                            
                                                            ),
                                                      ],
                                                    ),
                                                  ),
                                                  ElevatedButton(
                                                      style: ElevatedButton
                                                          .styleFrom(
                                                              primary: Color
                                                                  .fromARGB(
                                                                      255,
                                                                      252,
                                                                      114,
                                                                      2)),
                                                      onPressed: () {
                                                        getUserData();
                                                      },
                                                      child: Text(
                                                        &quot;Apply now&quot;,
                                                        style: TextStyle(
                                                            fontSize: 17,
                                                            fontWeight:
                                                                FontWeight
                                                                    .bold),
                                                      ))
                                                ],
                                              )
                                            ],
                                          ),
                                        ),
                                      ]),
                                    ),
                                  ]))),
                        ),
                      );
                  }),
  </code></pre>
  <p>So how can I make it when I search using the title on the TextFOrmField, to list cards with that title?</p>
  <p>NB. the API endpoint is a fake JSON placeholder, I have the search endpoint</p>