The next chapter will introduce you to the initial stages of Flutter, which is very simple to use and full of stuff

  • JsonToDart plug-in installed
  • JsonToDart use
  • How do I get the interface Json data
  • The Http get request
  • Get the request data and present it

JsonToDart plug-in installed

Some friends may ask what is JsonToDart? JsonToDart is a plug-in that converts Json into a Dart object class to parse network data, similar to GsonFromat in Android.

Flie – > Settings… -> Plugins

After installation, you need to restart.

JsonToDart use

Step 1: When needed, the New JsonTo Dart



Or use the shortcut Alt + Shift +D

Step 2: Class Name is the parse Name Json Text is the Json data click Format in the upper right corner to Format it

The following data is created:

/// id : 6503
/// uuid : "6c7697d2-46e1-413b-a40c-11a999bfd0db"
/// Hitokoto: "We read the world wrong and say that it deceives us."
/// type : "k"
/// from:
/// from_who: tagore
/// Creator: "Estate Estate I"
/// creator_uid : 7045
/// reviewer : 6844
/// commit_from : "app"
/// created_at : "1598342433"
/// length : 17

class ChickenSoupBean {
  int _id;
  String _uuid;
  String _hitokoto;
  String _type;
  String _from;
  String _fromWho;
  String _creator;
  int _creatorUid;
  int _reviewer;
  String _commitFrom;
  String _createdAt;
  int _length;

  int get id => _id;
  String get uuid => _uuid;
  String get hitokoto => _hitokoto;
  String get type => _type;
  String get from => _from;
  String get fromWho => _fromWho;
  String get creator => _creator;
  int get creatorUid => _creatorUid;
  int get reviewer => _reviewer;
  String get commitFrom => _commitFrom;
  String get createdAt => _createdAt;
  int get length => _length;

  ChickenSoupBean({
      int id, 
      String uuid, 
      String hitokoto, 
      String type, 
      String from, 
      String fromWho, 
      String creator, 
      int creatorUid, 
      int reviewer, 
      String commitFrom, 
      String createdAt, 
      int length}){
    _id = id;
    _uuid = uuid;
    _hitokoto = hitokoto;
    _type = type;
    _from = from;
    _fromWho = fromWho;
    _creator = creator;
    _creatorUid = creatorUid;
    _reviewer = reviewer;
    _commitFrom = commitFrom;
    _createdAt = createdAt;
    _length = length;
}

  ChickenSoupBean.fromJson(dynamic json) {
    _id = json["id"];
    _uuid = json["uuid"];
    _hitokoto = json["hitokoto"];
    _type = json["type"];
    _from = json["from"];
    _fromWho = json["from_who"];
    _creator = json["creator"];
    _creatorUid = json["creator_uid"];
    _reviewer = json["reviewer"];
    _commitFrom = json["commit_from"];
    _createdAt = json["created_at"];
    _length = json["length"];
  }

  Map<String, dynamic> toJson(a) {
    var map = <String, dynamic>{};
    map["id"] = _id;
    map["uuid"] = _uuid;
    map["hitokoto"] = _hitokoto;
    map["type"] = _type;
    map["from"] = _from;
    map["from_who"] = _fromWho;
    map["creator"] = _creator;
    map["creator_uid"] = _creatorUid;
    map["reviewer"] = _reviewer;
    map["commit_from"] = _commitFrom;
    map["created_at"] = _createdAt;
    map["length"] = _length;
    returnmap; }}Copy the code

How do I get the interface Json data

Method 1: You can put the interface on Baidu to search directly:

Interface as follows:v1.hitokoto.cn/

Method 2: You can use tools (I use PostMan)



Benefits of tools:

Post data can be requested, while baidu search can only request GET data

If you want to know about this tool, you can go to my Baidu web disk to download it or scan the QR code directly:

Links:Pan.baidu.com/s/1Og2ArEg9…

Extraction code: WHJH

The Http get request

Http requests require adding dependencies: Http: ^0.12.2

Guide package as follows:

  • The import ‘package: HTTP/HTTP. Dart’ as HTTP; / / HTTP packet
  • The import ‘dart: convert’; / / the serialization
/** * Asynchronously request network data */
  Future<ChickenSoupBean> _HttpGet(a) async {
  									// Request the Url interface
    final responce = await http.get("https://v1.hitokoto.cn/");

    print("statusCode = ${responce.statusCode}body:${responce.body}");

    // serialize the returned data
    final decode = json.decode(responce.body);
    return ChickenSoupBean.fromJson(decode);
  }
Copy the code

Future Async await is the keyword for asynchronous operations

  • Responce. StatusCode Response code data return success is 200
  • Responce. Body Network request Json data

Chickensoupbeans are Bean classes obtained using GsonToDart

Get the request data and present it

String _mValue = "";

 _HttpGet().then((ChickenSoupBean value)  {
          setState(() {
            _mValue =  value.hitokoto;
             print("value:${value}");
            });
         });
Copy the code

Complete code:

import 'package:flutter/material.dart';
import 'package:flutter_trip/beans/chicken_soup_bean.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState(a) => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {

  String _mValue = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: (Text("Search")),
      ),
      body: Center(
          child: Column(
        children: [
          InkWell(
            onTap: () {
              _HttpGet().then((ChickenSoupBean value)  {
                    setState(() {
                      _mValue =  value.hitokoto;
                      print("value${value}");
                    });
                  });
            },
            child: Container(
              margin: EdgeInsets.only(top: 20),
              child: Text("Click on me to get Http network data"),
            ),
          ),
          Container(
            child: Text(_mValue),
          )
        ],
      )),
    );
  }

  /** * Asynchronously request network data */
  Future<ChickenSoupBean> _HttpGet(a) async {
    final responce = await http.get("https://v1.hitokoto.cn/");

    print("statusCode = ${responce.statusCode}body:${responce.body}");

    // serialize the returned data
    final decode = json.decode(responce.body);
    returnChickenSoupBean.fromJson(decode); }}Copy the code

Take a look at the final result:

Rendering (1.1) :

The complete code

Chapter 1 :Flutter custom AppBar, Wheel Banner(3.1)

Next Chapter :Flutter Future and FutureBuilder Asynchronous Manipulation (3.3)

Original is not easy, your thumbs up is my biggest support, leave your thumbs up ~