[shutter] shutter resource file use (import resource pictures | use image resources)

One 、Flutter Import resource pictures

---

Flutter Resource path configuration : The resource path is in the root directory pubspec.yaml Configuration in profile ;

take flutter Node under assets The comment of the node opens , That is to delete the previous # Annotation symbols ;

And then in flutter Project root creation images Catalog , The picture hunter.png Copy to this images Directory ;

And in pubspec.yaml Profile's assets Under node configuration - images/hunter.png Information ;

# The following section is specific to Flutter.flutter:  # The following line ensures that the Material Icons font is  # included with your application, so that you can use the icons in  # the material Icons class.  uses-material-design: true  # To add assets to your application, add an assets section, like this:  assets:   - images/hunter.png

And then you can go in flutter This file is used in the project ;

The following figure shows the directory structure of the resource file and the configuration information in the configuration file ;

Import resource picture styles :

Two 、Flutter Use resource pictures

---

Image Use resource images in components , In its image Fields use AssetImage Type of picture is enough ;

Code example : Set up a 200 x 200 The size of Image Components , Show images/hunter.png Resource pictures ;

Image(  width: 200,  height: 200,  image: AssetImage("images/hunter.png"),)

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';class ResourcePage extends StatefulWidget { 
      @override  _ResourcePageState createState() => _ResourcePageState();}class _ResourcePageState extends State<ResourcePage> { 
      @override  Widget build(BuildContext context) { 
        return MaterialApp(      title: " Resource file usage ",      theme: ThemeData(primarySwatch: Colors.blue),      home: Scaffold(        appBar: AppBar(          title: Text(" Resource file usage "),          leading: GestureDetector(            onTap: (){ 
                  Navigator.pop(context);            },            child: Icon(Icons.arrow_back_ios),          ),        ),        body: Container(          //  centered           alignment: Alignment.center,          //  Vertical linear layout           child: Column(            mainAxisAlignment: MainAxisAlignment.center,            children: <Widget>[              Image(                width: 200,                height: 200,                image: AssetImage("images/hunter.png"),              )            ],          ),        ),      ),    );  }}

Running effect :

Four 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15539996 ( The source code snapshot of this blog , You can find the source code of this blog )