增加 lottie 动画

Author: [email protected]

lib/page/home/home_page.dart

@@ -11,6 +11,7 @@ import 'package:gsy_github_app_flutter/page/trend/trend_page.dart';
 import 'package:gsy_github_app_flutter/widget/gsy_tabbar_widget.dart';
 import 'package:gsy_github_app_flutter/widget/gsy_title_bar.dart';
 import 'package:gsy_github_app_flutter/page/home/widget/home_drawer.dart';
+import 'package:lottie/lottie.dart';
 
 /// 主页
 /// Created by guoshuyu
@@ -28,6 +29,7 @@ class _HomePageState extends State<HomePage> {
   final GlobalKey<DynamicPageState> dynamicKey = GlobalKey();
   final GlobalKey<TrendPageState> trendKey = GlobalKey();
   final GlobalKey<MyPageState> myKey = GlobalKey();
+  final GlobalKey rightKey = GlobalKey();
 
   /// 不退出
   _dialogExitApp(BuildContext context) async {
@@ -54,7 +56,8 @@ class _HomePageState extends State<HomePage> {
   @override
   Widget build(BuildContext context) {
     List<Widget> tabs = [
-      _renderTab(GSYICons.MAIN_DT, GSYLocalizations.i18n(context)!.home_dynamic),
+      _renderTab(
+          GSYICons.MAIN_DT, GSYLocalizations.i18n(context)!.home_dynamic),
       _renderTab(GSYICons.MAIN_QS, GSYLocalizations.i18n(context)!.home_trend),
       _renderTab(GSYICons.MAIN_MY, GSYLocalizations.i18n(context)!.home_my),
     ];
@@ -91,11 +94,28 @@ class _HomePageState extends State<HomePage> {
         indicatorColor: GSYColors.white,
         title: GSYTitleBar(
           GSYLocalizations.of(context)!.currentLocalized!.app_name,
-          iconData: GSYICons.MAIN_SEARCH,
-          needRightLocalIcon: true,
-          onRightIconPressed: (centerPosition) {
-            NavigatorUtils.goSearchPage(context, centerPosition);
-          },
+          rightWidget: InkWell(
+            onTap: () {
+              RenderBox renderBox2 =
+                  rightKey.currentContext?.findRenderObject() as RenderBox;
+              var position = renderBox2.localToGlobal(Offset.zero);
+              var size = renderBox2.size;
+              var centerPosition = Offset(
+                position.dx + size.width / 2,
+                position.dy + size.height / 2,
+              );
+              NavigatorUtils.goSearchPage(context, centerPosition);
+            },
+            child: Container(
+              key: rightKey,
+              alignment: Alignment.centerRight,
+              child: Lottie.asset('static/file/search.json',
+                  width: 70,
+                  height: 80,
+                  fit: BoxFit.cover,
+                  alignment: Alignment.centerRight),
+            ),
+          ),
         ),
       ),
     );

pubspec.lock

@@ -46,6 +46,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.0.11"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: cb6a278ef2dbb298455e1a713bda08524a175630ec643a242c399c932a0a1f7d
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "3.6.1"
   args:
     dependency: transitive
     description:
@@ -670,6 +678,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.2.0"
+  lottie:
+    dependency: "direct main"
+    description:
+      name: lottie
+      sha256: "1f0ce68112072d66ea271a9841994fa8d16442e23d8cf8996c9fa74174e58b4e"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "3.0.0"
   macros:
     dependency: transitive
     description:

pubspec.yaml

@@ -76,6 +76,7 @@ dependencies:
   simple_animations: 5.0.2
   supercharged: 2.1.1
   animations: 2.0.11
+  lottie: 3.0.0
   auto_size_text: 3.0.0
   flutter_localizations:
     sdk: flutter

static/file/search.json

@@ -0,0 +1 @@
+{"v":"5.5.8","fr":24,"ip":0,"op":35,"w":480,"h":480,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-45,"ix":10},"p":{"a":0,"k":[265,260,0],"ix":2},"a":{"a":0,"k":[0,19.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0,19.75],[0,66.19]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":2,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[25]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":27,"s":[25]},{"t":32,"s":[0]}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":2,"s":[18]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[9]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[9]},{"t":32,"s":[18]}],"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-45,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":2,"s":[229.645,224.645,0],"to":[-2.542,-2.458,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[214.395,209.895,0],"to":[0,0,0],"ti":[-2.542,-2.458,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":12,"s":[229.645,224.645,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":22,"s":[229.645,224.645,0],"to":[-2.542,-2.458,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":27,"s":[214.395,209.895,0],"to":[0,0,0],"ti":[-2.542,-2.458,0]},{"t":32,"s":[229.645,224.645,0]}],"ix":2},"a":{"a":0,"k":[-24.742,-25.176,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":2,"s":[{"i":[[-27.614,0],[0,-27.614],[27.614,0],[0,27.614]],"o":[[27.614,0],[0,27.614],[-27.614,0],[0,-27.614]],"v":[[0,-50],[50,0],[0,50],[-50,0]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":12,"s":[{"i":[[27.69,0],[0,-27.614],[-27.69,0],[0,27.614]],"o":[[-27.69,0],[0,27.614],[27.69,0],[0,-27.614]],"v":[[0.265,-50],[-49.872,0],[0.265,50],[50.402,0]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":22,"s":[{"i":[[27.69,0],[0,-27.614],[-27.69,0],[0,27.614]],"o":[[-27.69,0],[0,27.614],[27.69,0],[0,-27.614]],"v":[[0.265,-50],[-49.872,0],[0.265,50],[50.402,0]],"c":true}]},{"t":32,"s":[{"i":[[-27.614,0],[0,-27.614],[27.614,0],[0,27.614]],"o":[[27.614,0],[0,27.614],[-27.614,0],[0,-27.614]],"v":[[0,-50],[50,0],[0,50],[-50,0]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":2,"s":[18]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[9]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[9]},{"t":32,"s":[18]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-24.742,-25.176],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[99.958,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":240,"st":0,"bm":0}],"markers":[]}