API calls in flutter

Question

I'm new to flutter and im trying to design an application that pulls information via a car numberplate. I have followed this tutorial regarding the API: https://docs.flutter.dev/cookbook/networking/fetch-data. For the API i need to specify the numberplate which i have used this tutorial where its saved text from the textfield: https://docs.flutter.dev/cookbook/forms/retrieve-input. I can't seem to figure out how to get text from the textfield and then make the API call.

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


void main() => runApp(const MyApp());

Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://v1.motorapi.dk/vehicles/'),
       headers: {"X-AUTH-TOKEN": "rfrzsucnc7eo3m5hcmq6ljdzda1lz793"});

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

//headers: {"X-AUTH-TOKEN": "rfrzsucnc7eo3m5hcmq6ljdzda1lz793"}

class Album {
  final String registration_number;
  final String status;
  final String type;
  final String use;
  final String first_registration;
  final String vin;
  final int doors;
  final String make;
  final String model;
  final String variant;
  final String model_type;
  final String color;
  final String chasis_type;
  final String engine_power;
  final String fuel_type;
  final String RegistreringssynToldsyn;
  final String date;
  final String result;

  Album({
    required this.registration_number,
    required this.status,
    required this.type,
    required this.use,
    required this.first_registration,
    required this.vin,
    required this.doors,
    required this.make,
    required this.model,
    required this.variant,
    required this.model_type,
    required this.color,
    required this.chasis_type,
    required this.engine_power,
    required this.fuel_type,
    required this.RegistreringssynToldsyn,
    required this.date,
    required this.result,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      registration_number: json['registration_number'],
      status: json['status'],
      type: json['type'],
      use: json['use'],
      first_registration: json['first_registration'],
      vin: json['vin'],
      doors: json['doors'],
      make: json['make'],
      model: json['model'],
      variant: json['variant'],
      model_type: json['model_type'],
      color: json['color'],
      chasis_type: json['chasis_type'],
      engine_power: json['engine_power'],
      fuel_type: json['fuel_type'],
      RegistreringssynToldsyn: json['RegistreringssynToldsyn'],
      date: json['date'],
      result: json['result'],
    );
  }
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // When the user presses the button, show an alert dialog containing
        // the text that the user has entered into the text field.
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text the that user has entered by using the
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}

You need to initialize the model class and pass the field of model class to text, images and everywhere you required. — Ankit Tale, Dec 09 '21 at 17:01
Look here how future builder work with data snapshot same way you can do it : https://docs.flutter.dev/cookbook/networking/fetch-data — Ankit Tale, Dec 09 '21 at 17:04
If you get data from API refer my answer [here](https://stackoverflow.com/a/68709502/13997210) or [here](https://stackoverflow.com/a/68533647/13997210) or [here](https://stackoverflow.com/a/68594656/13997210) hope it's helpful to you — Ravindra S. Patil, Dec 09 '21 at 17:29

VeeraLavan · Answer 1 · 2021-12-13T09:57:56.857

0

You miss this method

@override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

edited Dec 13 '21 at 09:57

answered Dec 10 '21 at 05:05

VeeraLavan

46
7

Remember that Stack Overflow isn't (just) intended to solve the immediate problem, but (also) to help future readers understand the solution so that they can apply it to similar problems, or come to better understand the code. Given that, please don't just post code. Can you [edit] your answer to include an explanation of what you're doing and why you believe this is the best approach? – Jeremy Caney Dec 12 '21 at 00:46

score 0 · Answer 2 · answered Dec 10 '21 at 06:58

change your code for this

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  TextEditingController myController ;

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }
@override
  void initState() {
    super.initState();
    myController=TextEditingController();
    futureAlbum = fetchAlbum();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // When the user presses the button, show an alert dialog containing
        // the text that the user has entered into the text field.
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text the that user has entered by using the
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: const Icon(Icons.text_fields),
      ),
    );
  }

API calls in flutter

2 Answers2