Blog

The client-server exchange format has been used in all mobile applications to transfer information between two nodes. The format is used to transfer information between the client and the server in a format that can be quickly processed. The client-server exchange format uses the JSON data exchange format to transfer information between the client and the server. The format allows you to transfer hundreds of records in a single object within seconds.

JSON data exchange format is used in all mobile applications to transfer information between two nodes, Client and Server. We can transfer hundreds of records into a single object within a few seconds and process them using JSON.

Open the pubspec.YAML file in the code editor and find dependencies line and put HTTP: ^0.13.4 in next line like I did in below code.

dependencies:

  flutter:

    SDK: flutter

  HTTP: ^0.13.4

Complete Source code for my pubspec.YAML file after done changes:

name: flutter_application

description: A new Flutter project.

publish_to: ‘none’ # Remove this line if you wish to publish to a pub. dev

version: 1.0.0+1

environment:

  sdk: “>=2.15.1 <3.0.0”

dependencies:

  flutter:

    sdk: flutter

  http: ^0.13.4

  cupertino_icons: ^1.0.2

dev_dependencies:

  flutter_test:

    sdk: flutter

Start Coding for App:

 Import material.dart, dart:convert, http.dart package in your app’s main.dart file.

import ‘dart:convert’;

import ‘package:flutter/material.dart’;

import ‘package:http/http.dart’ as http;

Creating void main run app() method and here we would call our main Root MyApp class.

void main() {

  runApp(MyApp());

}

Creating the main class named MyApp extends with the Stateless widget. In this class, we would call  class of other page to run our project  which we would make in the next few steps.

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: ‘Food recipe’,

      home: alevel(),

    );

  }

}

 Create a class named add level. Inside this class, we would make 4 different types of the variable named as name, description, category. We would make factory add level.fromJson() method in this class, and here we would pop up the JSON items from online JSON. The name pass in json[] should be the same as passed in the JSON file.

Dart has two functions, JSON encode() and jsonDecode(), that allow you to easily write code that can work with JSON data. These functions are part of the dart: convert library and can be accessed using either import ‘dart: convert’ or import ‘package: JSON/JSON.dart’. The jsonDecode function takes a JSON string as an argument and returns a Data value representing the decoded data. The JSON encode function takes a Data value and returns a JSON string representing the data.

class addlevel {

  int? id;

  String? name;

  String? description;

  String? category;

  addlevel({this.id, this.name, this.description, this.category});

  addlevel.fromJson(Map<String, dynamic> json) {

    id = json[‘id’];

    name = json[‘name’];

    description = json[‘description’];

    category = json[‘category’];

  }

  Map<String, dynamic> toJson() {

    final Map<String, dynamic> data = new Map<String, dynamic>();

    data[‘id’] = this.id;

    data[‘name’] = this.name;

    data[‘description’] = this.description;

    data[‘category’] = this.category;

    return data;

  }

}

Complete source code for main. dart file:

import ‘dart:convert’;

import ‘package:flutter/material.dart’;

import ‘package:http/http.dart’ as http;

class alevel extends StatefulWidget {

  const alevel({Key? key}) : super(key: key);

  @override

  _alevelState createState() => _alevelState();

}

class _alevelState extends State<alevel> {

  var apiURL = Uri.parse(‘YOUR URL’);

  Future<List<addlevel>> fetchJSONData() async {

    var jsonResponse = await http.get(apiURL);

    if (jsonResponse.statusCode == 200) {

      final jsonItems = json.decode(jsonResponse.body).cast<Map<String, dynamic>>();

      List<addlevel> usersList = jsonItems.map<addlevel>((json) {

        return addlevel.fromJson(json);

      }).toList();

      return usersList;

    } else {

      throw Exception(‘Failed to load data from internet’);

    }

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: FutureBuilder<List<addlevel>>(

        future: fetchJSONData(),

        builder: (context, snapshot) {

          if (!snapshot.hasData)

            return Center(child: CircularProgressIndicator());

          return ListView(

            children: snapshot.data!

                .map((data) => ListTile(

                      title: Text(data.name.toString()),

                    ))

                .toList(),

          );

        },

      ),

    );

  }

}

class addlevel {

  int? id;

  String? name;

  String? description;

  String? category;

  addlevel({this.id, this.name, this.description, this.category});

  addlevel.fromJson(Map<String, dynamic> json) {

    id = json[‘id’];

    name = json[‘name’];

    description = json[‘description’];

    category = json[‘category’];

  }

 Map<String, dynamic> toJson() {

    final Map<String, dynamic> data = new Map<String, dynamic>();

    data[‘id’] = this.id;

    data[‘name’] = this.name;

    data[‘description’] = this.description;

    data[‘category’] = this.category;

    return data;

  }

}

import ‘package:flutter/material.dart’;

class ptext extends StatelessWidget {

  late final String hintText;

  late final IconData icon;

  TextEditingController controller = TextEditingController();

  var link;

  ptext({required this.hintText, required this.icon, required this.controller});

  @override

  Widget build(BuildContext context) {

    return TextFormField(

        controller: controller,

        decoration: InputDecoration(

          hintText: (hintText),

          prefixIcon: Icon(

            icon,

            color: Colors.orange,

          ),

          enabledBorder: UnderlineInputBorder(

            borderSide: BorderSide(color: Colors.orange),

          ),

          focusedBorder: UnderlineInputBorder(

            borderSide: BorderSide(color: Colors.orange),

          ),

          border: UnderlineInputBorder(

            borderSide: BorderSide(color: Colors.orange),

          ),

        ));

  }

}