Shulou(Shulou.com)05/31 Report--

This article mainly explains "Flutter how to use NetworkImage to achieve image display effect", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how Flutter uses NetworkImage to achieve image display effect".

Display an image using NetworkImage

In GitHub, each member has a URL with his or her avatar. Your next improvement is to add the avatar to the Member course and display it in the application.

Update the Member to add the avatarUrl attribute. It should now look like this:

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

Since avatarUrl is now a required parameter, Flutter is in _ loadData. Replace the setState callback with the following updated version of _ 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);}})

The above code uses the avatar_ URL key to find the URL value in the map parsed from JSON, sets it to a url string, and passes it to Member.

Now you can access the URL of the avatar and add it to your ListTile. Replace _ buildRow with the following:

Widget _ buildRow (int I) {return Padding (padding: const EdgeInsets.all), child: ListTile (title: Text ('${_ members.login}', style: _ biggerFont), Leadership: CircleAvatar (backgroundColor: Colors.green, backgroundImage: NetworkImage (_ members.avatarUrl),);}

This will CircleAvatar in your ListTile. When you wait for the image to download, the background CircleAvatar will be green.

Perform a hot restart instead of a hot reload. You will see your member profile picture in each line:

Organize the code

Most of your code is now in main.dart. To make the code more concise, you ReFactor the classes into their own files.

Create files named member.dart and ghflutter.dart in the lib folder. Move to both member.dart and enter ghflutter.dart. Member`` _ GHFlutterState``GHFlutter

You don't need any import statement member.dart, but the import ghflutter.dart should be:

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

You also need to update the imports in main.dart. Replace the entire file with the following:

/ / ignore_for_file: prefer_const_constructors, unnecessary_newimport '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), child: ListTile (title: Text ('${_ members.login}', style: _ biggerFont), leading: CircleAvatar (backgroundColor: Colors.green, backgroundImage: NetworkImage (_ members.avatarUrl),);}}

Member

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

Strings.dart

Const appTitle = 'JGFlutter'; so far, I believe you have a deeper understanding of "how Flutter uses NetworkImage to achieve image display effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.