Flutter之开屏广告缓存本地方案（无插件版），兼容 IOS、安卓

最新推荐文章于 2024-05-28 09:49:34 发布

华洛

最新推荐文章于 2024-05-28 09:49:34 发布

阅读量1.5k

点赞数

分类专栏： Flutter 文章标签： flutter开屏广告

本文链接：https://blog.csdn.net/sdta25196/article/details/108358118

版权

Flutter 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

问题：

开屏广告图使用网络加载的话，会出现一个加载时的白屏。为了处理这个白屏实现开屏到广告的顺利过渡；

解决方案的整体思路如下：

网络请求图片文件
将图片文件转换成Uint8List
将Uint8List保存成String,存在全局数据管理中
开屏广告将图片数据从全局数据管理中取出，再转成Uint8List
使用Image.memory() 进行图片加载

核心思路是：

使用Image.memory() 来省去图片加载的时间。所以只需要将网络图片转成Uint8List保存起来，直接使用Uint8List即可

main.dart的核心代码如下（请求网络图片，转成Uint8List，保存起来）：

var response = await Dio().get("https://img4.eol.cn/e_images/gk/2019/banner2044.jpeg", options: Options(responseType: ResponseType.bytes));


var imgBytes = Uint8List.fromList(response.data);
//这里使用shared_preferences.dart进行数据管理，我这个是封装了的。替换成自己的就行
SpUtil.preferences.setString("imgBytes", imgBytes.toString());
 
runApp()

开屏广告的dart文件如下（将保存的图片取出，转成Uint8List，使用Image.memory()来显示）：

import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:zsgk/tools/sp_util.dart';

/*
* 开屏广告的dart文件
*/

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => new _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  Timer _timer;
  Uint8List imgBytes;

  @override
  void initState() {
    super.initState();
    startTime();
    //核心思路为此处将图片数据取出，再转成Uint8List。
    var img = SpUtil.preferences.getString("imgBytes");
    imgBytes = Uint8List.fromList(List<int>.from(json.decode(img)));
  }

  // 开屏广告倒计时
  startTime() {
    _timer = Timer(Duration(milliseconds: 4500), (){
      _timer.cancel();
      Navigator.of(context).pushReplacementNamed('/home');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ConstrainedBox(
        constraints: BoxConstraints.expand(),
        child: Image.memory(
          imgBytes,
          fit: BoxFit.fill
        ),
      ),
    );
  }
}