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图像显示的资料请关注其它相关文章！