【喵咪专场】还不来领取你的小可爱吗?😍

简介: 我为流浪猫做了这样一款软件,快来领取你的小可爱吧!纯Flutter编写的App,使用MVP架构哦,快来看看!!!
前言:在前几天的一个回家的晚上,我路过了一家专门领养流浪宠物的小家,我在那里待了2个多小时,我为这些动物感到难过,包括🐱和🐕,那一刻我就想到,许多动物需要一个新家,我就想编写一个app,用于帮助这些动物(虽然很困难哈哈😝)

话不多说,先上效果图:是不是很炫酷~

tt0.top-591909.gif

源码地址:https://github.com/taxze6/flutter_rehoming(希望给点点star⭐)

本文分析重点:

  • 基于GetX封装,MVP架构
  • 检测是否是第一次登录,是否展示引导页
  • 引导页的登录动画处理(封装处理)
  • 首页底部特效导航栏(暂无分析,原因有兴趣大家可以看文章的最后)
  • 其他的动画效果(暂无分析,原因有兴趣大家可以看文章的最后)

使用插件:

#状态管理 + 路由管理
get: 4.2.0
​
# 本地存储 + 图片缓存
shared_preferences: ^2.0.6
cached_network_image: ^3.0.0

1.实现基于Getx封装,MVP架构

mvp的全称为Model-View-Presenter,Model提供数据,View负责显示,Controller/Presenter负责逻辑的处理。

举个例子:

屏幕截图 2021-11-03 125837.jpg

使用Getx进行封装:

数据存放:

class SplashModel {
  late String Background;
  late String SplashText;
  late String SplashButtonText;
  BuildContext? context = Get.context;
​
    ///初始化数据
  SplashModel() {
    Background = "images/splash/Splash.png";
    SplashText = "Rehoming and adoption. You find each other.";
    SplashButtonText = "Let's Start";
  }
}

在controller中定义SplashModel,使用数据:

class SplashController extends GetxController {
  final SplashModel splashModelState = SplashModel();
 }

在view中使用控制器:

final controller = Get.put(SplashController());
final state = Get.find<SplashController>().splashModelState;
​
//使用:
Text(state.SplashText)

2.检测是否是第一次登录,是否展示引导页

这里就需要使用全局信息配置了,然后使用shared_preferences本地持久化

简单的定义用户信息:

UserLoginResponseModel userLoginResponseModelFromJson(String str) => UserLoginResponseModel.fromJson(json.decode(str));
​
String userLoginResponseModelToJson(UserLoginResponseModel data) => json.encode(data.toJson());
​
class UserLoginResponseModel {
  UserLoginResponseModel({
    this.token,
    this.name,
    this.id,
  });
​
  String? token;
  String? name;
  int? id;
​
  factory UserLoginResponseModel.fromJson(Map<String, dynamic> json) => UserLoginResponseModel(
    token: json["token"],
    name: json["name"],
    id: json["id"],
  );
​
  Map<String, dynamic> toJson() => {
    "token": token,
    "name": name,
    "id": id,
  };
}

全局配置怎么去做呢?

定义一个Global文件

class Global{}

在这个文件中我们可以进行app的全局配置

例如:

/// 用户配置
static UserLoginResponseModel? profile = UserLoginResponseModel(token: null);
​
///是否是第一次打开
static bool isFirstOpen = false;
​
///是否登录
static bool isOfflineLogin = false;

重点来啦!定义一个init方法用于初始化:

static Future init() async{
    // 运行初始
    WidgetsFlutterBinding.ensureInitialized();
    //本地存储初始化
    await LoacalStorage.init();
    // 读取离线用户信息
    var _profileJSON = LoacalStorage().getJSON(STORAGE_USER_PROFILE_KEY);
    if (_profileJSON != null) {
      profile = UserLoginResponseModel.fromJson(_profileJSON);
      isOfflineLogin = true;
    }
​
    // android 状态栏为透明的沉浸
    if (Platform.isAndroid) {
      SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    }
    isFirstOpen = !LoacalStorage().getBool(STORAGE_DEVICE_ALREADY_OPEN_KEY);
    if (isFirstOpen) {
      LoacalStorage().setBool(STORAGE_DEVICE_ALREADY_OPEN_KEY, true);
    }
}

之后我们就可以在main文件中初始化这配置文件

void main() => Global.init().then((value) => runApp(MyApp()));

然后我们就可以进行判断啦:

Obx(() => Scaffold(
  body: controller.isloadWelcomePage.isTrue
      ? SplashPage() //引导页
      : Global.isOfflineLogin
      ? HomePage() //首页
      : LoginPage(), //登录页
)

3.引导页的登录动画处理(封装处理)

在上方我们已经进行了SplashModel的数据定义

那么让我们来看看动画吧,因为时MVP架构,所以我们关于AnimationController的处理要放到controller中,我们使controller继承于SingleGetTickerProviderMixin。

class SplashController extends GetxController
    with SingleGetTickerProviderMixin {
   AnimationController? animationController;
}

然后再初始化动画(记得销毁哦):

@override
void onInit() {
  super.onInit();
  animationController = AnimationController(
      duration: const Duration(milliseconds: 1500), vsync: this);
  animationController!.forward();
}
​
@override
  void onClose() {
    // TODO: implement onClose
    super.onClose();
    animationController!.dispose();
 }

按钮动画(view):

Widget Splash_Button(BuildContext context) => ScaleTransition(
//动画处理
      scale: Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
        parent: controller.animationController!,
        curve: const Interval(0.3, 0.6, curve: Curves.fastOutSlowIn),
      )),
      child: GestureDetector(
        onTap: () {
          controller.getTo();
        },
        child: Container(
         //按钮
        ),
      ),
    );

就是这么的简单,如果觉得不够详细可以自己下拉源码查看~

关于引导页的背景,我们这里有个优化的点,提前缓存图片: 在controller中onInit中缓存:

@override
  void onInit() {
    super.onInit();
    _precacheImage(splashModelState.Background, splashModelState.context!);
  }
void _precacheImage(String imageUrl, BuildContext context) {
  precacheImage(AssetImage(imageUrl), context);
}
相关文章
|
9月前
|
安全 网络协议 物联网
在Python中控制智能家电
在Python中控制智能家电
206 1
|
9月前
|
Java 监控
用java代码实现三菱PLC与上位机的连接
"初学者入门Java编程,开始探索代码世界。学习基础语法、类、对象及异常处理,逐步构建程序思维。#Java学习之路"
401 1
|
Android开发 iOS开发 容器
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)(2)
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)
737 0
|
Web App开发 算法 安全
详细讲解https证书openssl公钥私钥以及ssh公钥私钥的生成以及使用
详细讲解https证书openssl公钥私钥以及ssh公钥私钥的生成以及使用
1710 0
详细讲解https证书openssl公钥私钥以及ssh公钥私钥的生成以及使用
|
9月前
|
iOS开发
Xcode 10.2.1 Error:Multiple commands produce问题及解决方案
Xcode 10.2.1 Error:Multiple commands produce问题及解决方案
838 0
|
9月前
|
存储 自然语言处理 JavaScript
vben框架是什么
vben框架是什么
1832 0
|
数据可视化 数据处理 Python
使用Python绘制多个股票的K线图
使用Python绘制多个股票的K线图
|
9月前
|
机器学习/深度学习 TensorFlow 算法框架/工具
|
9月前
WordPress插件:链接自动识别转为超链接
WordPress插件:链接自动识别转为超链接
101 3

热门文章

最新文章