liuxm/FlutterUnit
1
0
Fork 0
forked from lxm_flutter/FlutterUnit
Code Issues Pull Requests Projects Releases Wiki Activity

优化闪屏页优化

Browse Source
This commit is contained in:
toly
2021-03-19 16:20:41 +08:00
parent 906189c51d
commit 14dfa05fd8
7 changed files with 112 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/app/res/str_unit.dart
View File

@@ -6,6 +6,7 @@ class StrUnit {
// 小文字大小
static const String version = 'V1.5.0';
static const String appName = 'Flutter Unit';
static const String galleryInfo = """
[

10
lib/app/res/style/gap_unit.dart Normal file
View File

@@ -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);
}

10
lib/app/res/style/unit_text_style.dart
View File

@@ -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,

7
lib/views/pages/app/flutter_unit.dart
View File

@@ -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<GlobalBloc, GlobalState>(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(

50
lib/views/pages/splash/splash_bottom.dart Normal file
View File

@@ -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<SplashBottom> {
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<Null> 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),
],
),
],
));
}
}

32
lib/views/pages/splash/unit_paint.dart
View File

@@ -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<double> _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);

62
lib/views/pages/splash/unit_splash.dart
View File

@@ -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<UnitSplash> 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<UnitSplash> 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<UnitSplash> with TickerProviderStateMixin {
body: Stack(
alignment: Alignment.center,
children: <Widget>[
_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<UnitSplash> 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<Offset>(
begin: const Offset(0, 0),
@@ -142,22 +140,4 @@ class _UnitSplashState extends State<UnitSplash> 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))),
);
}