币游国际平台

滑动快速启动

最新更新日期:Oct-31-2023

快速启动是为了快速尝试使用数个常见云性特征不一定使用编码最佳实践 和代码你在这里创建

快速启动代码沙盒或干净工程

可同时使用视图完成代码快速启动Github和代码探索器

小技巧
如果你不熟悉云形,你可能想先看一看 开发者启动指南高层次概述云化编码并介绍主要概念

你也可以发现我们词汇表帮助理解云专用术语

快速启动后,你将学习 如何从云内传输媒体@cloudinary/flutter包化

小技巧
深入理解架构时,你可能想从结构入手 滑动SDK介绍.

预设条件

快速启动需要:

开工搭建并配置SDK

安装包

安装@cloudinary_flutter通过添加云化yaml文件依赖.

dependencies:
  cloudinary_flutter: ^1.0.0
  cloudinary_url_gen: ^1.0.0

配置云

创建基本小蝶应用主.dart拷贝并粘贴:

主.dart
Dart
// Import the Cloudinary packages.
import 'package:cloudinary_url_gen/cloudinary.dart';
import 'package:cloudinary_flutter/image/cld_image.dart';
import 'package:cloudinary_flutter/cloudinary_context.dart';
import 'package:flutter/material.dart';

// Create a Cloudinary instance and set your cloud name.
void main() {
  CloudinaryContext.cloudinary =
      Cloudinary.fromCloudName(cloudName: 'demo');
  runApp(App());
}

二叉上传图像

下步需要使用云化产品环境图像所有新账号都带样本图像, 所以我们用样本图像公共标识焊接样本目的快速启动

如果要尝试通过云控制台上传图像,请扩展下段指令

注解
方便使用,以上步骤显示如何使用媒体库用户界面上传文件,但作为一个开发者,你可能有兴趣编程上传文件可添加a 上传部件直接调用 上传方法 上传a中解释 滑动SDK图像和视频上传或可使用 CLI系统.

3级变换并交付图像

使用Cldimage部件显示全图像URL基于指定的变换参数

复制并粘贴以下代码

.dart主控
Dart
// Add a Flutter StatelessWidget.
class App extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 200,
            height: 140,
            // Add a Cloudinary CldImageWidget that wraps Flutter's authenticated Image widget.
            child: CldImageWidget(
              publicId: 'cld-sample',
              transformation: Transformation()
                // Resize to 250 x 250 pixels using the 'fill' crop mode.
                ..resize(Resize.fill()
                  ..width(250)
                  ..height(250))
                // Add the 'sepia' effect.
                ..effect(Effect.sepia())
              )
            ),
          ),
        ),
    );
  }
}

注解
如果您跟踪步骤上传 多克/模范资产,你可能想使用公共ID替代 焊接样本.使用公共身份证 焊接样本上传图像公开标识

4级运行代码

运行代码查看变换图像

变换图像

视图完成代码

完全例子如下:

代码上可用GitHub.

准备学习更多

反馈发送