zoukankan      html  css  js  c++  java
  • Flutter异步编程 http网络请求数据

    import 'dart:convert';
    
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    import 'dart:async';
    
    class HttpDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('HttpDemo'),
            elevation: 0.0,
          ),
          body: HttpDemoHome(),
        );
      }
    }
    
    class HttpDemoHome extends StatefulWidget {
      @override
      _HttpDemoHomeState createState() => _HttpDemoHomeState();
    }
    
    class _HttpDemoHomeState extends State<HttpDemoHome> {
      @override
      void initState() {
        super.initState();
        // fetchPosts()
        //   .then((value) => print(value));
    
        // final post = {
        //   'title': 'hello',
        //   'description': 'nice to meet you.',
        // };
    
        // print(post['title']);
        // print(post['description']);
    
        // final postJson = json.encode(post);
        // print(postJson);
    
        // final postJsonConverted = json.decode(postJson);
        // print(postJsonConverted['title']);
        // print(postJsonConverted['description']);
        // print(postJsonConverted is Map);
    
        // final postModel = Post.fromJson(postJsonConverted);
        // print('title: ${postModel.title}, description: ${postModel.description}');
    
        // print('${json.encode(postModel)}');
      }
    
      Future<List<Post>> fetchPosts() async {
        final response = 
            await http.get('https://resources.ninghao.net/demo/posts.json');
        
        // print('statusCode: ${response.statusCode}');
        // print('body: ${response.body}');
    
        if (response.statusCode == 200) {
          final responseBody = json.decode(response.body);
          List<Post> posts = responseBody['posts']
            .map<Post>((item) => Post.fromJson(item))
            .toList();
    
          return posts;
        } else {
          throw Exception('Failed to fetch posts.');
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return FutureBuilder(
          future: fetchPosts(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            print('data: ${snapshot.data}');
            print('connectionState: ${snapshot.connectionState}');
            
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: Text('loading...'),
              );
            }
    
            return ListView(
              children: snapshot.data.map<Widget>((item) {
                return ListTile(
                  title: Text(item.title),
                  subtitle: Text(item.author),
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(item.imageUrl),
                  ),
                );
              }).toList(),
            );
          },
        );
      }
    }
    
    class Post {
      final int id;
      final String title;
      final String description;
      final String author;
      final String imageUrl;
    
      Post(
        this.id,
        this.title,
        this.description,
        this.author,
        this.imageUrl,
      );
    
      Post.fromJson(Map json)
        : id = json['id'],
          title = json['title'],
          description = json['description'],
          author = json['author'],
          imageUrl = json['imageUrl'];
    
      Map toJson() => {
        'title': title,
        'descritpion': description,
      };
    }
     http: ^0.12.0

  • 相关阅读:
    二维数组 A[m][n] 按行优先和按列优先的 下标地址转换公式
    服务器的公网ip 和内网ip
    剑指offer 23.二叉搜索树的后序遍历序列
    剑指offer 22. 从上往下打印二叉树 & 102. 二叉树的层序遍历
    剑指offer 21.栈的压入、弹出序列 & leetcode 剑指 Offer 31. 栈的压入、弹出序列
    剑指offer 4. 重建二叉树 & leetcode 剑指 Offer 07. 重建二叉树 & leetcode hot 100 105. 从前序与中序遍历序列构造二叉树
    Linux配置Nginx+Tomcat负载均衡
    yum安装apache及问题解决
    Linux高级文本处理命令
    JMeter:生成漂亮的多维度的HTML报告
  • 原文地址:https://www.cnblogs.com/loaderman/p/11345801.html
Copyright © 2011-2022 走看看