欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter6.加载图片,资源assets、pubspec、 图片

程序员文章站 2022-05-30 09:22:08
...

快捷键的使用

stf StatefulWidget的快捷键   stl StatelessWidget的快捷键

需要加载本地的图片首先需要找到pubspec.yaml 文件项目的静态资源,需要配置到根目录下的pubspec.yaml文件。

                                         Flutter6.加载图片,资源assets、pubspec、 图片

以静态图片为例子:
1、在项目的根目录下创建images文件夹,放进一张图片。

2、到 pubspec.yaml 配置一下

  assets:
    - assets/images/bg1.png
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

Flutter6.加载图片,资源assets、pubspec、 图片

main.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:typed_data';

import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

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

//assets/images/bg1.png
class MyApp extends StatelessWidget {
//  debugPaintSizeEnable = true;
  @override
  Widget build(BuildContext context) {
//    debugPaintSizeEnabled = true;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image示例demo'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              //加载网络图片
              Image.network(
                'https://www.baidu.com/img/bd_logo1.png?where=super',
                width: 100.0,
                height: 100.0,
              ),

              //加载Assets/images目录下的图片
              Image.asset(
                'assets/images/bg1.png',
                width: 200.0,
                height: 200.0,
              ),

              //Memory
              MemoryImageWidget(),

              //从文件加载图片
              FileImageWidget(),
            ],
          ),
        ),
      ),
    );
  }
}

//stf StatefulWidget的快捷键   stl StatelessWidget的快捷键
class FileImageWidget extends StatefulWidget {
  @override
  _FileImageWidgetState createState() => _FileImageWidgetState();
}

class _FileImageWidgetState extends State<FileImageWidget> {
  File _image;

  Future getImge() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Center(
          child: _image == null
              ? Text('未选择图片!')
              : Image.file(
            _image,
            width: 200.0,
            height: 200.0,
          ),
        ),
        FlatButton(
          onPressed: getImge,
          child: Text(
            '选择图片',
            style: TextStyle(
              color: Color(0xff0000ff),
            ),
          ),
        ),
      ],
    );
  }
}

//stf StatefulWidget快捷键, stl StatelessWidget快捷键
class MemoryImageWidget extends StatefulWidget {
  @override
  _MemoryImageWidgetState createState() => _MemoryImageWidgetState();
}

class _MemoryImageWidgetState extends State<MemoryImageWidget> {
  Uint8List bytes;

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/images/bg1.png').then((data) {
      if (mounted) {
        setState(() {
          //data中取数据
          bytes = data.buffer.asUint8List();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final _decoration = BoxDecoration(
      //判断图片是否是空
      image: bytes == null ? null : DecorationImage(image: MemoryImage(bytes)),
    );
    return Container(
      width: 100.0,
      height: 100.0,
      decoration: _decoration,
    );
  }
}

输出:

                                            Flutter6.加载图片,资源assets、pubspec、 图片

其中需要导入image_picker.dart,需要在pubspec.yaml中配置如下:

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  image_picker: ^0.5.0+9

dev_dependencies:
  flutter_test:
    sdk: flutter

Flutter6.加载图片,资源assets、pubspec、 图片

 

相关标签: Flutter

上一篇: Dart笔记

下一篇: MATLAB灰度变换