Dev

lib/constant/_constant.dart

@@ -0,0 +1,9 @@
+///
+/// Created by NieBin on 2019/1/9
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+export "color_const.dart";
+export 'image_const.dart';
+export 'page_const.dart';
+export 'size_const.dart';

lib/constant/color_const.dart

@@ -8,3 +8,14 @@ import "package:flutter/material.dart";
 const BOTTOM_COLORS = Colors.grey;
 const COLOR_LIGHT_INDEX = 900;
 const COLOR_DARK_INDEX = 500;
+
+const BLUE_NORMAL = Color(0xff54c5f8);
+const GREEN_NORMAL = Color(0xff6bde54);
+const BLUE_DARK2 = Color(0xff01579b);
+const BLUE_DARK1 = Color(0xff29b6f6);
+const RED_DARK1 = Color(0xfff26388);
+const RED_DARK2 = Color(0xfff782a0);
+const RED_DARK3 = Color(0xfffb8ba8);
+const RED_DARK4 = Color(0xfffb89a6);
+const RED_DARK5 = Color(0xfffd86a5);
+const YELLOW_NORMAL = Color(0xfffcce89);

lib/constant/image_const.dart

@@ -6,4 +6,7 @@
 class ImagePath {
   static const _PATH = "assets/images";
   static const FLUTTER_OPEN = "$_PATH/flutteropen.png";
+  static const PAGE_ANIMATION_01 = "$_PATH/flutteropen.png";
+  static const PAGE_ANIMATION_02 = "$_PATH/solar_flare.png";
+  static const SOLAR_FLARE = "$_PATH/solar.flr";
 }

lib/constant/page_const.dart

@@ -0,0 +1,10 @@
+///
+/// Created by NieBin on 2019/1/9
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+class PageConst {
+  static const HOME_PAGE = "/Home page";
+  static const ANIMATION_01 = "Animation 01 page";
+  static const ANIMATION_02 = "Animation 02 page";
+}

lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
-import 'page/WelcomePage.dart';
+import 'package:flutter_animation/constant/_constant.dart';
+import 'package:flutter_animation/page/_page.dart';
 
 void main() => runApp(MyApp());
 
@@ -9,7 +10,11 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'Layout Animation',
       home: WelcomePage(),
-      routes: {},
+      routes: {
+        PageConst.HOME_PAGE: (context) => HomePage(),
+        PageConst.ANIMATION_01: (context) => AnimationOnePage(),
+        PageConst.ANIMATION_02: (context) => FlarePage(),
+      },
     );
   }
 }

lib/page/HomePage.dart

@@ -0,0 +1,81 @@
+///
+/// Created by NieBin on 2019/1/9
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+import "package:flutter/material.dart";
+import 'package:flutter_animation/constant/_constant.dart';
+
+class HomePage extends StatefulWidget {
+  @override
+  _HomeState createState() => _HomeState();
+}
+
+const PAGES = [
+  {
+    "title": PageConst.ANIMATION_01,
+    "img": ImagePath.PAGE_ANIMATION_01,
+    "click": PageConst.ANIMATION_01
+  },
+  {
+    "title": PageConst.ANIMATION_02,
+    "img": ImagePath.PAGE_ANIMATION_02,
+    "click": PageConst.ANIMATION_02
+  },
+];
+const ITEM_COLORS = [
+  BLUE_DARK2,
+  RED_DARK5,
+  BLUE_NORMAL,
+  RED_DARK2,
+  YELLOW_NORMAL,
+  BLUE_DARK1,
+  GREEN_NORMAL,
+  RED_DARK3
+];
+
+class _HomeState extends State<HomePage> {
+  Widget _listItem(index) => InkWell(
+        child: Card(
+          elevation: 10.0,
+          child: Container(
+            color: ITEM_COLORS[index % ITEM_COLORS.length].withOpacity(0.9),
+            child: Stack(
+              children: <Widget>[
+                Container(
+                  child: Center(
+                    child: Image.asset(
+                      PAGES[index % PAGES.length]["img"],
+                      fit: BoxFit.fitWidth,
+                    ),
+                  ),
+                )
+              ],
+            ),
+          ),
+        ),
+        onTap: () {
+          Navigator.of(context).pushNamed(PAGES[index % PAGES.length]["click"]);
+        },
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Flutter Open"),
+      ),
+      body: GridView.builder(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 1,
+            childAspectRatio: 1,
+            crossAxisSpacing: 10,
+            mainAxisSpacing: 10),
+        itemBuilder: (context, index) {
+          return _listItem(index);
+        },
+        itemCount: PAGES.length,
+      ),
+    );
+  }
+}

lib/page/WelcomePage.dart

@@ -4,7 +4,7 @@
 /// Email: [email protected]
 ///
 import "package:flutter/material.dart";
-import 'package:flutter_animation/constant/image_const.dart';
+import 'package:flutter_animation/constant/_constant.dart';
 import 'dart:math';
 
 class WelcomePage extends StatefulWidget {
@@ -21,19 +21,17 @@ class _WelcomeState extends State<WelcomePage>
   void initState() {
     super.initState();
     _controller =
-        AnimationController(duration: const Duration(seconds: 2), vsync: this);
+        AnimationController(duration: const Duration(seconds: 3), vsync: this);
     _animation = Tween(begin: 0.0, end: 200.0).animate(_controller)
       ..addListener(() {
-        print("listener");
         setState(() {});
       })
       ..addStatusListener((state) {
         if (state == AnimationStatus.completed) {
           print("complete");
-          _controller.forward();
         }
       });
-    _controller.forward();
+    _controller.repeat();
   }
 
   @override
@@ -68,9 +66,10 @@ class _WelcomeState extends State<WelcomePage>
                 child: Center(
                   child: FloatingActionButton(
                     onPressed: () {
-                      _controller..repeat();
+                      Navigator.pushReplacementNamed(
+                          context, PageConst.HOME_PAGE);
                     },
-                    child: Icon(Icons.refresh),
+                    child: Icon(Icons.forward),
                   ),
                 ))
           ],

lib/page/_page.dart

@@ -0,0 +1,9 @@
+///
+/// Created by NieBin on 2019/1/9
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+export "HomePage.dart";
+export "WelcomePage.dart";
+export 'package:flutter_animation/page/animation01/AnimationOnePage.dart';
+export 'package:flutter_animation/page/animation02/FlarePage.dart';

lib/page/animation01/AnimationOnePage.dart

@@ -0,0 +1,86 @@
+///
+/// Created by NieBin on 2019/1/9
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+import "package:flutter/material.dart";
+import 'package:flutter_animation/constant/_constant.dart';
+import 'dart:math';
+
+///tutorial: https://medium.com/flutteropen/animation-01-how-to-use-the-animation-in-the-flutter-e3ef7043f940
+class AnimationOnePage extends StatefulWidget {
+  @override
+  _OneState createState() => _OneState();
+}
+
+class _OneState extends State<AnimationOnePage>
+    with SingleTickerProviderStateMixin {
+  AnimationController _controller;
+  Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller =
+        AnimationController(duration: const Duration(seconds: 3), vsync: this);
+    _animation = Tween(begin: 50.0, end: 200.0).animate(_controller)
+      ..addListener(() {
+        setState(() {});
+      })
+      ..addStatusListener((state) {
+        if (state == AnimationStatus.completed) {
+          print("complete");
+        }
+      });
+    _controller.repeat();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Animation Tutorial 01"),
+      ),
+      body: Container(
+        child: Column(
+          children: <Widget>[
+            Expanded(
+              flex: 6,
+              child: Container(
+                alignment: AlignmentDirectional.center,
+                child: Container(
+                  margin: EdgeInsets.only(top: 50.0),
+                  child: Transform.rotate(
+                    angle: -_animation.value * 2 * pi / 200,
+                    child: Image.asset(
+                      ImagePath.FLUTTER_OPEN,
+                      fit: BoxFit.fitHeight,
+                      width: _animation.value,
+                      height: _animation.value,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            Expanded(
+                flex: 1,
+                child: Center(
+                  child: FloatingActionButton(
+                    onPressed: () {
+                      _controller.repeat();
+                    },
+                    child: Icon(Icons.refresh),
+                  ),
+                ))
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}

lib/page/animation02/FlarePage.dart

@@ -0,0 +1,36 @@
+///
+/// Created by NieBin on 2019/1/9
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+import "package:flutter/material.dart";
+import 'package:flare_flutter/flare_actor.dart';
+import 'package:flutter_animation/constant/_constant.dart';
+
+class FlarePage extends StatefulWidget {
+  @override
+  _FlareState createState() => _FlareState();
+}
+
+class _FlareState extends State<FlarePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Flare Animation"),
+      ),
+      body: Container(
+        color: Color(0xff18222c),
+        child: Center(
+          child: Center(
+            child: FlareActor(
+//              ImagePath.SOLAR_FLARE,
+              "assets/images/solar.flr",
+              animation: "solar_run",
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}