Flutter Http with List

Flutter Http and Async Await and List

---

本篇汇集：网络交互、数据解析、列表展示、对话框显示、列表加载等待的显示

目录：
1、Flutter http using
2、JSON
3、ListView
4、ListView- loading status
5、ListView- Item and item event
6、本篇汇总的效果

1、Flutter http using

依赖：在pubspec.yaml文件中添加Flutter网路模块的依赖

dependencies:
  ...
  http: ^0.11.3+16

网络操作

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

  loadData() async {
    String dataURL = "https://jsonplaceholder.typicode.com/posts";
    http.Response response = await http.get(dataURL);

  }
}

2、JSON

导包

import 'dart:convert';

数据解析

  List widgets = [];

    setState(() {
      widgets = json.decode(response.body);
    });

3、ListView

        body: ListView.builder(
            itemCount: getItemCount(),
            itemBuilder: (BuildContext context, int position) {
              return getItemWidget(position);
            }));

  int getItemCount() {
    if (widgets.isEmpty) {
      return 5;
    }
    return widgets.length;
  }

  Widget getItemWidget(int position) {
    if (widgets.isEmpty) {
      return getEmptyLoadingWidget();
    }
    return getRow(position);
  }

4、ListView- loading status

  Widget getEmptyLoadingWidget() {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Card(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: CircleAvatar(
                child: Text('**'),
              ),
              title: Text(
                "******",
                maxLines: 1,
                style: TextStyle(
                  color: Colors.blue,
                ),
                semanticsLabel: 'semanticsLabel',
              ),
              subtitle: Text("******"),
              trailing: Text('******'),
            ),
            Text('努力加载中...'),
          ],
        ),
      ),
    );
  }

5、ListView- Item and item event

item event

          onLongPress: () {
            if (widgets.isNotEmpty) {
              showAboutDialog(
                applicationName: "Name",
                context: context,
                children: <Widget>[
                  Text('Title:${widgets[i]["title"]}'),
                  Divider(),
                  Text('Body:${widgets[i]["body"]}'),
                ],
              );
            }
          },

item

  Widget getRow(int i) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Card(
        child: ListTile(
          leading: CircleAvatar(
            child: Text('${widgets[i]["id"]}'),
          ),
          title: Text(
            "Row ${widgets[i]["title"]}",
            maxLines: 1,
            style: TextStyle(
              color: Colors.blue,
            ),
            semanticsLabel: 'semanticsLabel',
          ),
          subtitle: Text("Row ${widgets[i]["body"]}"),
          trailing: Text('userId:${widgets[i]["userId"]}'),
          onTap: () {},
          onLongPress: () {
            if (widgets.isNotEmpty) {
              showAboutDialog(
                applicationName: "Name",
                context: context,
                children: <Widget>[
                  Text('Title:${widgets[i]["title"]}'),
                  Divider(),
                  Text('Body:${widgets[i]["body"]}'),
                ],
              );
            }
          },
        ),
      ),
    );
  }

6、本篇汇总的效果

Flutter-Http.gif

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

class ListPage extends StatefulWidget {
  BuildContext mPreContext;
  ListPage(BuildContext preContext) {
    mPreContext = preContext;
  }
  @override
  _ListState createState() {
    // TODO: implement createState
    return _ListState();
  }
}

class _ListState extends State<ListPage> {
  List widgets = [];

  @override
  void initState() {
    super.initState();

    loadData();
  }

  int getItemCount() {
    if (widgets.isEmpty) {
      return 5;
    }
    return widgets.length;
  }

  Widget getItemWidget(int position) {
    if (widgets.isEmpty) {
      return getEmptyLoadingWidget();
    }
    return getRow(position);
  }

  Widget getEmptyLoadingWidget() {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Card(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: CircleAvatar(
                child: Text('**'),
              ),
              title: Text(
                "******",
                maxLines: 1,
                style: TextStyle(
                  color: Colors.blue,
                ),
                semanticsLabel: 'semanticsLabel',
              ),
              subtitle: Text("******"),
              trailing: Text('******'),
            ),
            Text('努力加载中...'),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Sample HTTP"),
        ),
        body: ListView.builder(
            itemCount: getItemCount(),
            itemBuilder: (BuildContext context, int position) {
              return getItemWidget(position);
            }));
  }

  Widget getRow(int i) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Card(
        child: ListTile(
          leading: CircleAvatar(
            child: Text('${widgets[i]["id"]}'),
          ),
          title: Text(
            "Row ${widgets[i]["title"]}",
            maxLines: 1,
            style: TextStyle(
              color: Colors.blue,
            ),
            semanticsLabel: 'semanticsLabel',
          ),
          subtitle: Text("Row ${widgets[i]["body"]}"),
          trailing: Text('userId:${widgets[i]["userId"]}'),
          onTap: () {},
          onLongPress: () {
            if (widgets.isNotEmpty) {
              showAboutDialog(
                applicationName: "Name",
                context: context,
                children: <Widget>[
                  Text('Title:${widgets[i]["title"]}'),
                  Divider(),
                  Text('Body:${widgets[i]["body"]}'),
                ],
              );
            }
          },
        ),
      ),
    );
  }

  loadData() async {
    String dataURL = "https://jsonplaceholder.typicode.com/posts";
    http.Response response = await http.get(dataURL);
    setState(() {
      widgets = json.decode(response.body);
    });
  }
}

---

未完待续。。。