Flutter前后端数据联调

上篇博客实现了Flutter启动服务,这里实现前端请求数据，后端提供数据。

添加依赖：

http: ^0.12.0

测试接口是否连通并获取数据：

import 'dart:convert';
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(
        title: 'Flutter Demo',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('测试数据接口'),
          onPressed: () async {
            String url = 'http://172.25.11.67:8080/?action=getProducts';
            var res = await http.get(url);
            String body = res.body;
            //解析json数据
            var json = jsonDecode(body);
            print(json);

            // 前端encode -> 后端decode
            // 前端decode -> 后端encode
          },
        ),
      ),
    );
  }
}

class Hello extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 40.0, fontWeight: FontWeight.bold, color: Colors.red),
      ),
    );
  }
}

查看是否正确获取数据：

image.png