Flutter使用NetworkImage实现图像显示效果

更新时间：2022年04月21日 08:35:19 作者：大前端之旅

这篇文章主要为大家介绍了如何在Flutter中使用NetworkImage实现图像显示效果，文中的示例代码讲解详细，快跟随小编一起学习一下吧

使用 NetworkImage 显示图像

在 GitHub 中，每个成员都有其头像的 URL。您的下一个改进是将该头像添加到Member课程中并在应用程序中显示这些头像。

更新Member以添加avatarUrl属性。它现在应该是这样的：

class Member {
  Member(this.login, this.avatarUrl);
  final String login;
  final String avatarUrl;
}

由于avatarUrl现在是必需参数，因此 Flutter 在_loadData. 将setState回调替换为_loadData以下更新版本：

setState(() {
  final dataList = json.decode(response.body) as List;
  for (final item in dataList) {
    final login = item['login'] as String? ?? '';
    final url = item['avatar_url'] as String? ?? '';
    final member = Member(login, url);
    _members.add(member);
  }
});

上面的代码使用avatar_url键在从 JSON 解析的地图中查找 URL 值，然后将其设置为url字符串，然后将其传递给Member。

现在您可以访问头像的 URL，将其添加到您的ListTile. 替换_buildRow为以下内容：

Widget _buildRow( int i) {
   return Padding( 
    padding: const EdgeInsets.all( 16.0 ), 
    child: ListTile( 
      title: Text( ' ${_members[i].login} ' , style: _biggerFont), 
      Leadership: CircleAvatar( 
        backgroundColor : Colors.green, 
        backgroundImage: NetworkImage(_members[i].avatarUrl), 
      ), 
    ), 
  ); 
}

这会CircleAvatar在您的ListTile. 当您等待图像下载时，背景CircleAvatar将是绿色的。

执行热重启而不是热重新加载。您将在每一行中看到您的会员头像：

整理代码

你的大部分代码现在都在main.dart 中。为了使代码更简洁一些，您将类重构为它们自己的文件。

在lib文件夹中创建名为member.dart和ghflutter.dart的文件。移动到member.dart两者并进入ghflutter.dart。Member``_GHFlutterState``GHFlutter

你不需要任何import语句member.dart，但在进口ghflutter.dart应该是：

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

您还需要更新main.dart 中的导入。用以下内容替换整个文件：

// ignore_for_file: prefer_const_constructors, unnecessary_new
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'jg_flutter_page.dart';
import 'strings.dart' as strings;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: strings.appTitle,
      theme: ThemeData(primaryColor: Colors.green.shade800),
      home: JGFlutter(),
    );
  }
}

jg_flutter_page.dart

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

import 'member.dart';
import 'strings.dart' as strings;

class JGFlutter extends StatefulWidget {
  const JGFlutter({Key? key}) : super(key: key);

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

class _JGFlutterState extends State<JGFlutter> {
  final _members = <Member>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    const dataUrl = 'https://api.github.com/orgs/raywenderlich/members';
    final response = await http.get(Uri.parse(dataUrl));
    setState(() {
      final dataList = json.decode(response.body) as List;
      for (final item in dataList) {
        final login = item['login'] as String? ?? '';
        final url = item['avatar_url'] as String? ?? '';
        final member = Member(login, url);
        _members.add(member);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(strings.appTitle),
      ),
      body: ListView.separated(
          itemCount: _members.length,
          itemBuilder: (BuildContext context, int position) {
            return _buildRow(position);
          },
          separatorBuilder: (context, index) {
            return const Divider();
          }),
    );
  }

  Widget _buildRow(int i) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: ListTile(
        title: Text('${_members[i].login}', style: _biggerFont),
        leading: CircleAvatar(
          backgroundColor: Colors.green,
          backgroundImage: NetworkImage(_members[i].avatarUrl),
        ),
      ),
    );
  }
}

member

class Member {
  Member(this.login, this.avatarUrl);
  final String login;
  final String avatarUrl;
}

strings.dart

const appTitle = 'JGFlutter';

以上就是Flutter使用NetworkImage实现图像显示效果的详细内容，更多关于Flutter NetworkImage图像显示的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Flutter+Metal实现图像处理详细流程

浅谈Flutter解析JSON三种方式
这篇文章主要介绍了浅谈Flutter解析JSON三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Android相册效果（使用C#和Java分别实现）
这篇文章主要介绍了Android相册效果（使用C#和Java分别实现）,原来C#也可以开发APP,小编第一次见了~感觉不错,因为小编暂时不喜欢Java,所以,需要的朋友可以参考下
2015-06-06
Android 实现九宫格抽奖功能
这篇文章主要介绍了Android 实现九宫格抽奖功能，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下
2021-03-03
Android TextView 字体滚动效果
这篇文章主要介绍了Android TextView 字体滚动效果的相关资料,需要的朋友可以参考下
2017-01-01
Android自定义九宫格输入框
这篇文章主要为大家详细介绍了Android自定义九宫格输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
Android内嵌Unity并实现互相跳转的实例代码
这篇文章主要介绍了Android内嵌Unity并实现互相跳转的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-11-11
Android自定义View绘制贝塞尔曲线实现流程
贝塞尔曲线的本质是通过数学计算的公式来绘制平滑的曲线，分为一阶，二阶，三阶及多阶。但是这里不讲数学公式和验证，那些伟大的数学家已经证明过了，所以就只讲讲Android开发中的运用吧
2022-11-11
Android数据库增删改查实战案例
我们在编程中经常会遇到数据库的操作,这篇文章主要给大家介绍了关于Android数据库增删改查的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04
Android自定义滚动选择器实例代码
本篇文章主要介绍了Android自定义滚动选择器实例代码，具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01
内存泄漏检测工具LeakCanary源码解析
这篇文章主要为大家介绍了内存泄漏检测工具LeakCanary源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01

Flutter使用NetworkImage实现图像显示效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具