使用 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 {
  final _members = [];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _loadData();
  }
​
  Future _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图像显示的资料请关注脚本之家其它相关文章！

关键词： 图像显示 相关文章 是这样的 以下内容 应用程序