Flutter Boot Camp iii – Resource Management

This is the 16th day of my participation in Gwen Challenge

preface

After setting up the Flutter engineering environment, let’s take a look at the project structure. Learn about the relationship between the Flutter project and the native Android and iOS projects, and how these relationships ensure that a Flutter application will eventually run on Android and iOS.

As you can see, in addition to the code, resources, dependencies, and configurations of the Flutter project, the Flutter project also contains the Android and iOS project directories. This makes sense because Flutter is a cross-platform development solution that requires a container to run on both Android and iOS, so the Flutter project is essentially a parent of both Android and iOS projects: We develop the Flutter code in the Lib directory, and provide the corresponding code implementation in the corresponding Android and iOS projects for reference by the corresponding Flutter code in some special scenarios. Flutter injects related dependencies and build artifacts into the two subprojects, eventually integrating them into their respective projects. The Flutter code we developed will eventually run as a native project. Here is another diagram of the underlying structure of Flutter for those who are interested.

After having an initial impression of the engineering structure of Flutter, we can begin to learn the project code for Flutter. Let’s start with how static resources, such as images and ICONS, are loaded and referenced in Flutter.

First, the Image widget

1.1 Image supports the following types of constructors:

new Image

Used to get images from the ImageProvider;

new Image.asset

Images obtained from AssetBundle using key;

new Image.network

Get images from web urls;

new Image.file

Get images from local files

new Image.memory

Used to fetch images from the Uint8List;

When loading the Image resources in your project, in order for the Image to automatically adapt to images of different resolutions based on pixel density, specify the Image with AssetImage and ensure that the MaterialApp exists above the “Image” widget in the Widget tree. WidgetsApp or MediaQuery window widget.

1.2 Image Supported Image formats

Image Supports the following types of images: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP.

1.3 How Do I Load Network Images?

To load a web image, we need to use the Image.net Work constructor:

Image.network(
  'http://www.devio.org/img/avatar.png'.)// demo
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter bottomNavigationBar',
      theme: new ThemeData.fallback(),
      home: Image.network(
        'http://www.devio.org/img/avatar.png',),); }}Copy the code

1.4 How to load still pictures and process pictures with different resolutions?

To load a static image in a project, there are two steps: declare the path of the image resource in the pubspec.yaml file;

Access images with AssetImage;

Pubspec. yaml declares the image path:

assets:
 - images/my_icon.png
Copy the code

Access images with AssetImage

Image(
  height: 26,
  width: 26,
  image: AssetImage(my_icon.png),
),
Copy the code

In addition to manually specifying AssetImage using the constructor of Image, we can also load static images via image.asset:

Image.asset(my_icon.png,
    width: 26,`
    height: 26.)Copy the code

Both are equivalent/sdcard/Download/Stack. The PNG

1.5 How Can I Load a Local Image?

Load a local image of the full path

import 'dart:io';
Image.file(File('/sdcard/Download/Stack.png')),
Copy the code

Step 1: Add the path_Provider plugin to pubspec.yaml;

Step 2: Import the header file

import 'dart:io';
import 'package:path_provider/path_provider.dart';

//Image.file(File('/sdcard/Download/Stack.png')),
FutureBuilder(future: _getLocalFile("Download/Stack.png"),
  builder:  (BuildContext context, AsyncSnapshot<File> snapshot) {
    returnsnapshot.data ! =null? Image.file(snapshot.data) : Container(); }))// Obtain the path of SDCard:
 Future<File> _getLocalFile(String filename) async {
    String dir = (await getExternalStorageDirectory()).path;
    File f = new File('$dir/$filename');
    return f;
  }
Copy the code

1.6 How to set Placeholder?

So in order to set the Placeholder we need to have a FadeInImage, which can load the Placeholder from memory, local resources. Loading Placeholder from memory

The first step:

Install the Transparent_Image plug-in.

The second step:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'http://www.devio.org/img/avatar.png',),),),),),); }}Copy the code

1.7 Load Placeholder from local resources

The first step

Configure local resources image:

flutter:
  assets:

- assets/loading.gif
Copy the code

The second step

Load local resource images as Placeholder:

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'http://www.devio.org/img/avatar.png',);Copy the code

1.8 How Can I Configure Image Cache?

With Flutter we can use cached_network_image to load images from the network and cache them locally for future use.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Cached Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: CachedNetworkImage(
            placeholder: (context, url) => new CircularProgressIndicator(),
            imageUrl:
                'https://picsum.photos/250? image=9'(), (), (), (); }}Copy the code

1.9 How do I Load ICONS?

In Flutter we can load ICONS with ICONS:

const Icon(this.icon//IconDate, {
   Key key,
   this.size,/ / size
   this.color,/ / color
   this.semanticLabel,/ / sign
   this.textDirection,// Draw the direction
 })
Copy the code

It is clear from the Icon constructor that the Icon constructor requires a parameter whose default type is IconData. We can construct our own IconData or use the Material_fonts provided by Flutter.

1.10 use the Icons

We can use the Material_Fonts built into Flutter with the following code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Icons"),
      ),
      body: new Center(
        child: new Icon(Icons.android,size: 100.0),),); }}Copy the code

1.11 Using custom ICONS

To use custom we need to construct a:

const IconData(
  this.codePoint,// Mandatory argument, fonticon corresponding to hexadecimal Unicode {
  this.fontFamily,// Font library series
  this.fontPackage,// The font is in that package
  this.matchTextDirection: false, whether the icon is displayed in the direction the icon is drawn});Copy the code

First I need to configure our icon in pubspec.yaml as we would with fonts:

fonts:
    - family: devio
      fonts:
        - asset: fonts/devio.ttf
// Then you can use it
child: new Icon(new IconData(0xf5566,fontFamily: "devio"),size: 100.0,color: Colors.blueAccent,)
Copy the code

Two, show the pictures on the Internet

Displaying images is the foundation of most mobile applications. Flutter provides Image widgets to display different types of images. To process images from urls, use the Image.network constructor.

new Image.network(
  'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg'.)Copy the code

2.1 Bonus: GIF animation

One of the amazing features of the Image Widget is that it supports ANIMATED giFs, but if you don’t like to own one, you can wrap your own frame library.

new Image.network(
  'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',);Copy the code

2.2 Placeholder maps and caching

Image.net Work doesn’t handle advanced features by default, such as fading out images after loading or caching them onto the device.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
        title: new Text(title),
      ),
        body: new Image.network(
 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?
raw=true',),),); }}Copy the code

2.3 Fade in images with placeholders

When displaying images using the default Image Widget, you may notice that they are displayed directly on the screen after loading. This can be visually jarring for users. Instead, wouldn’t it be better if you initially displayed a placeholder and then faded it in when the image was finished loading? We can do this using FadeInImage. FadeInImage works with any type of image: in-memory, local Asset, or images from the web. In this example, we will use the Transparent_Image package as a simple transparent placeholder map. You can also consider using local resources to make placeholders as per Assets and Picture guides.

new FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?
raw=true',);Copy the code

Full example:

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Stack(
        children: <Widget>[
          new Center(
            child: new CircularProgressIndicator()),
            new Center(
              child: new FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image:
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?
raw=true',),),),),),); }Copy the code

3. Cache images

In some cases, it may be convenient to cache images after downloading them from the Web so that they can be used offline. To do this, we can use the cached_network_image package. In addition to caching, the cached_image_network package supports placeholders and fade-in images at load time.

new CachedNetworkImage(
  imageUrl:
  'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?
raw=true',);Copy the code

3.1 Adding a placeholder

The cached_network_image package allows us to use any Widget as a placeholder! In this example, we will display a progress circle as the image loads.

new CachedNetworkImage(
  placeholder: new CircularProgressIndicator(),
  imageUrl:
  'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?
raw=true',);Copy the code

Full example:

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        body: new Stack(
          children: <Widget>[
            new Center(child: new CircularProgressIndicator()),
            new Center(
              child: new FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image:
                    'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',),),),),),); }}Copy the code