From 14dfa05fd87e48354d8e291cdac14cae778416d4 Mon Sep 17 00:00:00 2001 From: toly <1981462002@qq.com> Date: Fri, 19 Mar 2021 16:20:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=97=AA=E5=B1=8F=E9=A1=B5?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/app/res/str_unit.dart | 1 + lib/app/res/style/gap_unit.dart | 10 ++++ lib/app/res/style/unit_text_style.dart | 10 ++++ lib/views/pages/app/flutter_unit.dart | 7 +-- lib/views/pages/splash/splash_bottom.dart | 50 ++++++++++++++++++ lib/views/pages/splash/unit_paint.dart | 32 +++++++----- lib/views/pages/splash/unit_splash.dart | 62 ++++++++--------------- 7 files changed, 112 insertions(+), 60 deletions(-) create mode 100644 lib/app/res/style/gap_unit.dart create mode 100644 lib/views/pages/splash/splash_bottom.dart diff --git a/lib/app/res/str_unit.dart b/lib/app/res/str_unit.dart index fd8b01f..b03b11a 100644 --- a/lib/app/res/str_unit.dart +++ b/lib/app/res/str_unit.dart @@ -6,6 +6,7 @@ class StrUnit { // 小文字大小 static const String version = 'V1.5.0'; + static const String appName = 'Flutter Unit'; static const String galleryInfo = """ [ diff --git a/lib/app/res/style/gap_unit.dart b/lib/app/res/style/gap_unit.dart new file mode 100644 index 0000000..c8848c3 --- /dev/null +++ b/lib/app/res/style/gap_unit.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class GapUnit{ + static const Widget H5 = SizedBox(width: 5); + static const Widget H10 = SizedBox(height: 10); + + static const Widget W5 = SizedBox(width: 5); + static const Widget W10 = SizedBox(width: 10); + +} \ No newline at end of file diff --git a/lib/app/res/style/unit_text_style.dart b/lib/app/res/style/unit_text_style.dart index b6e5a26..76af312 100644 --- a/lib/app/res/style/unit_text_style.dart +++ b/lib/app/res/style/unit_text_style.dart @@ -16,6 +16,16 @@ class TStyleUnit { fontSize: minTextSize, ); + static const splashShadows = TextStyle( + color: Colors.grey, + shadows: [ + Shadow( + color: Colors.black, + blurRadius: 1, + offset: Offset(0.1, 0.1)) + ], + fontSize: 12); + static const smallTextWhite = TextStyle( color: UnitColor.textColorWhite, fontSize: smallTextSize, diff --git a/lib/views/pages/app/flutter_unit.dart b/lib/views/pages/app/flutter_unit.dart index a9de537..6d6b494 100644 --- a/lib/views/pages/app/flutter_unit.dart +++ b/lib/views/pages/app/flutter_unit.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_unit/app/res/str_unit.dart'; import 'package:flutter_unit/app/router/unit_router.dart'; import 'package:flutter_unit/blocs/bloc_exp.dart'; import 'package:flutter_unit/views/pages/splash/unit_splash.dart'; @@ -14,12 +15,8 @@ class FlutterUnit extends StatelessWidget { Widget build(BuildContext context) { return BlocBuilder(builder: (_, state) { return MaterialApp( -// debugShowMaterialGrid: true, showPerformanceOverlay: state.showPerformanceOverlay, -// showSemanticsDebugger: true, -// checkerboardOffscreenLayers:true, -// checkerboardRasterCacheImages:true, - title: 'Flutter Unit', + title: StrUnit.appName, debugShowCheckedModeBanner: false, onGenerateRoute: UnitRouter.generateRoute, theme: ThemeData( diff --git a/lib/views/pages/splash/splash_bottom.dart b/lib/views/pages/splash/splash_bottom.dart new file mode 100644 index 0000000..3313866 --- /dev/null +++ b/lib/views/pages/splash/splash_bottom.dart @@ -0,0 +1,50 @@ +import 'dart:async'; +import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/res/style/gap_unit.dart'; +import 'package:flutter_unit/app/res/style/unit_text_style.dart'; + +class SplashBottom extends StatefulWidget { + @override + _SplashBottomState createState() => _SplashBottomState(); +} + +class _SplashBottomState extends State { + bool _animStart = false; + + final Duration delayTime = const Duration(milliseconds: 600); + final Duration animTime = const Duration(milliseconds: 800); + final String logoPath = 'assets/images/icon_head.webp'; + + @override + void initState() { + super.initState(); + // 延迟 600 ms 后开启动画 + Future.delayed(delayTime).then(startAnim); + } + + FutureOr startAnim(value){ + setState(() { + _animStart = true; + }); + } + + @override + Widget build(BuildContext context) { + return AnimatedOpacity( + duration: animTime, + opacity: _animStart ? 1.0 : 0.0, + child: Row( + children: [ + Image.asset(logoPath, height: 20, width: 20), + GapUnit.W5, + Wrap( + direction: Axis.vertical, + children: [ + const Text("张风捷特烈技术支持", style: TStyleUnit.splashShadows), + const Text("@编程之王 2021", style: TStyleUnit.splashShadows), + ], + ), + ], + )); + } +} diff --git a/lib/views/pages/splash/unit_paint.dart b/lib/views/pages/splash/unit_paint.dart index d9d8ee7..103e57d 100644 --- a/lib/views/pages/splash/unit_paint.dart +++ b/lib/views/pages/splash/unit_paint.dart @@ -6,17 +6,18 @@ import 'package:flutter/material.dart'; class UnitPainter extends CustomPainter { Paint _paint; - double width; - Animation repaint; - Color color; + final double width; + Animation _curveAnim; + final Color color; - Path _path1 = Path(); - Path _path2 = Path(); - Path _path3 = Path(); - Path _path4 = Path(); + final Path _path1 = Path(); + final Path _path2 = Path(); + final Path _path3 = Path(); + final Path _path4 = Path(); - UnitPainter({this.width = 200.0, this.repaint, this.color = Colors.blue}):super(repaint: repaint) { + UnitPainter({this.width = 200.0, this.color = Colors.blue,Animation repaint}):super(repaint: repaint) { _paint = Paint(); + _curveAnim= CurvedAnimation(parent: repaint, curve: Curves.fastOutSlowIn); } @override @@ -25,7 +26,7 @@ class UnitPainter extends CustomPainter { _path2.reset(); _path3.reset(); _path4.reset(); - var factor = repaint.value; + var factor = _curveAnim.value; canvas.translate( size.width / 2 - width * 0.5, size.height / 2 - width * 0.5); @@ -56,11 +57,14 @@ class UnitPainter extends CustomPainter { @override bool shouldRepaint(UnitPainter oldDelegate) { - return oldDelegate.repaint!=repaint; + return + oldDelegate.color!=color|| + oldDelegate.width!=width|| + oldDelegate._curveAnim!=_curveAnim; } void drawColor1(Canvas canvas) { - var factor = repaint.value; + double factor = _curveAnim.value; _path1.moveTo(0, 0); _path1.lineTo(width * 0.618 * factor - 1, 0); _path1.lineTo(width * 0.5 - 1, width * 0.5 - 1); @@ -70,7 +74,7 @@ class UnitPainter extends CustomPainter { } void drawColor2(Canvas canvas) { - var factor = repaint.value; + double factor = _curveAnim.value; _path2.moveTo(width * 0.618 * factor, 0); _path2.lineTo(width, 0); _path2.lineTo(width, width * 0.618 * factor); @@ -80,7 +84,7 @@ class UnitPainter extends CustomPainter { } void drawColor3(Canvas canvas) { - var factor = repaint.value; + double factor = _curveAnim.value; _path3.moveTo(width * 0.5 + 1, width * 0.5 + 1); _path3.lineTo(width, width * 0.618 * factor + 1); _path3.lineTo(width, width); @@ -89,7 +93,7 @@ class UnitPainter extends CustomPainter { } void drawColor4(Canvas canvas) { - var factor = repaint.value; + double factor = _curveAnim.value; _path4.moveTo(0, width * (1 - 0.618) * factor); _path4.lineTo(width * 0.5, width * 0.5); _path4.lineTo(width * (1 - 0.618) * factor, width); diff --git a/lib/views/pages/splash/unit_splash.dart b/lib/views/pages/splash/unit_splash.dart index b15f3b7..b217139 100644 --- a/lib/views/pages/splash/unit_splash.dart +++ b/lib/views/pages/splash/unit_splash.dart @@ -1,7 +1,11 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:flutter_unit/app/res/str_unit.dart'; +import 'package:flutter_unit/app/res/style/gap_unit.dart'; +import 'package:flutter_unit/app/res/style/unit_text_style.dart'; import 'package:flutter_unit/app/router/unit_router.dart'; +import 'package:flutter_unit/views/pages/splash/splash_bottom.dart'; import 'unit_paint.dart'; /// create by 张风捷特烈 on 2020-03-07 @@ -9,35 +13,29 @@ import 'unit_paint.dart'; /// 说明: app 闪屏页 class UnitSplash extends StatefulWidget { - final double size; - - UnitSplash({this.size = 200}); - @override _UnitSplashState createState() => _UnitSplashState(); } class _UnitSplashState extends State with TickerProviderStateMixin { AnimationController _controller; - Animation _curveAnim; - bool _animEnd = false; + final Duration animTime = const Duration(milliseconds: 1000); + final Duration delayTime = const Duration(milliseconds: 500); + final Duration fadeInTime = const Duration(milliseconds: 600); + @override void initState() { super.initState(); SystemUiOverlayStyle systemUiOverlayStyle = - SystemUiOverlayStyle(statusBarColor: Colors.transparent); + const SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); - _controller = AnimationController( - duration: const Duration(milliseconds: 1000), vsync: this) + _controller = AnimationController(duration: animTime, vsync: this) ..addStatusListener(_listenStatus) ..forward(); - - _curveAnim = - CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn); } @override @@ -50,7 +48,7 @@ class _UnitSplashState extends State with TickerProviderStateMixin { if (status == AnimationStatus.completed) { setState(() { _animEnd = true; - Future.delayed(const Duration(milliseconds: 500)).then((e) { + Future.delayed(delayTime).then((e) { Navigator.of(context).pushReplacementNamed(UnitRouter.nav); }); }); @@ -66,23 +64,25 @@ class _UnitSplashState extends State with TickerProviderStateMixin { body: Stack( alignment: Alignment.center, children: [ - _buildLogo(Colors.blue), + _buildFlutterLogo(), Container( width: winW, height: winH, child: CustomPaint( - painter: UnitPainter(repaint: _curveAnim), + painter: UnitPainter(repaint: _controller), ), ), - _buildText(winH, winW), + _buildFlutterUnitText(winH, winW), _buildHead(), - _buildPower(), + Positioned( + bottom: 20, + child: SplashBottom()) ], ), ); } - Widget _buildText(double winH, double winW) { + Widget _buildFlutterUnitText(double winH, double winW) { final shadowStyle = TextStyle( fontSize: 45, color: Theme.of(context).primaryColor, @@ -99,18 +99,16 @@ class _UnitSplashState extends State with TickerProviderStateMixin { return Positioned( top: winH / 1.4, child: AnimatedOpacity( - duration: const Duration(milliseconds: 600), + duration: fadeInTime, opacity: _animEnd ? 1.0 : 0.0, child: Text( - 'Flutter Unit', + StrUnit.appName, style: shadowStyle, )), ); } - final colors = [Colors.red, Colors.yellow, Colors.blue]; - - Widget _buildLogo(Color primaryColor) { + Widget _buildFlutterLogo() { return SlideTransition( position: Tween( begin: const Offset(0, 0), @@ -142,22 +140,4 @@ class _UnitSplashState extends State with TickerProviderStateMixin { width: 45, child: Image.asset('assets/images/icon_head.webp'), )); - - Widget _buildPower() => Positioned( - bottom: 30, - right: 30, - child: AnimatedOpacity( - duration: const Duration(milliseconds: 300), - opacity: _animEnd ? 1.0 : 0.0, - child: const Text("Power By 张风捷特烈", - style: TextStyle( - color: Colors.grey, - shadows: [ - Shadow( - color: Colors.black, - blurRadius: 1, - offset: Offset(0.3, 0.3)) - ], - fontSize: 16))), - ); }