在写flutter的代码的时候为了让组件大小适配屏幕使用了flutter_screenUtil插件。在调试的时候是正常的,可以适配屏幕。但是打包之后就会失去效果。有没有遇到类似情况的朋友,希望可以给点建议,谢谢。下面是我的代码。
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter/animation.dart';
import 'package:omni/common/menuPage.dart';
import 'dart:async';
class Login extends StatefulWidget {
_LoginState createState() => new _LoginState();
}
class _LoginState extends State<Login> with TickerProviderStateMixin {
Animation<RelativeRect> animationLogo;
Animation<RelativeRect> animationAddress;
AnimationController controllerAddress;
AnimationController controllerLogo;
AnimationController controllerName;
double tabHeight = ScreenUtil().setHeight(300);
double formHeight = ScreenUtil().setHeight(0);
double submitHeight = ScreenUtil().setHeight(0);
double loadingHeight = ScreenUtil().setHeight(0);
double walletHeight = ScreenUtil().setHeight(0);
double addressHeight = ScreenUtil().setHeight(0);
double marketHeight = ScreenUtil().setHeight(0);
double addressBottom = ScreenUtil().setHeight(0);
bool isShowBalance = false;
bool isShowAddressDetail = false;
@override
void initState() {
// TODO: implement initState
super.initState();
controllerLogo = new AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
controllerName = new AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
controllerAddress = new AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
animationLogo = RelativeRectTween(
begin: RelativeRect.fromLTRB(
ScreenUtil().setWidth(250),
ScreenUtil().setHeight(548),
ScreenUtil().setWidth(250),
ScreenUtil().setHeight(546)),
end: RelativeRect.fromLTRB(
ScreenUtil().setWidth(40),
ScreenUtil().setHeight(50),
ScreenUtil().setWidth(650),
ScreenUtil().setHeight(1234)),
).animate(controllerLogo)
..addListener(() {
if (animationLogo.isCompleted) {
controllerName.forward();
}
});
animationAddress = RelativeRectTween(
begin: RelativeRect.fromLTRB(
ScreenUtil().setWidth(0),
ScreenUtil().setHeight(100),
ScreenUtil().setWidth(0),
ScreenUtil().setHeight(0)),
end: RelativeRect.fromLTRB(
ScreenUtil().setWidth(0),
ScreenUtil().setHeight(100),
ScreenUtil().setWidth(0),
ScreenUtil().setHeight(600)),
).animate(controllerAddress)
..addListener(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
endDrawer: new Menu(),
body: new Container(
child: Stack(
children: <Widget>[
PositionedTransition(
rect: animationLogo,
child: GestureDetector(
onTap: () {},
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
),
),
new Positioned(
bottom: ScreenUtil().setHeight(1224),
left: ScreenUtil().setWidth(120),
child: SizeTransition(
axis: Axis.vertical,
sizeFactor:
new Tween(begin: 0.0, end: 1.0).animate(controllerName),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: new Text('OMNI'),
),
new Container(
child: new Text('WALLET'),
)
],
),
),
),
),
new Positioned(
bottom: 0,
child: new AnimatedContainer(
duration: Duration(milliseconds: 1000),
width: ScreenUtil().setWidth(750),
height: tabHeight,
padding: EdgeInsets.only(
top: ScreenUtil().setHeight(40),
bottom: ScreenUtil().setHeight(60),
left: ScreenUtil().setWidth(60),
right: ScreenUtil().setWidth(60),
),
child: new Container(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new GestureDetector(
onTap: () {
tabHeight = ScreenUtil().setHeight(1100);
formHeight = ScreenUtil().setHeight(950);
submitHeight = ScreenUtil().setHeight(300);
controllerLogo.forward();
setState(() {});
},
child: new Container(
width: ScreenUtil().setWidth(314),
padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
width: 1,
color:
Color.fromRGBO(136, 152, 167, 1)))),
child: new Text(
'LOGIN',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: ScreenUtil().setSp(40),
letterSpacing: ScreenUtil().setSp(10),
color: Color.fromRGBO(82, 126, 185, 1)),
),
),
),
new GestureDetector(
child: new Container(
width: ScreenUtil().setWidth(315),
padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
child: new Text(
'CREATE',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: ScreenUtil().setSp(40),
letterSpacing: ScreenUtil().setSp(10),
color: Color.fromRGBO(82, 126, 185, 1)),
),
),
),
],
),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(ScreenUtil().setSp(80)),
topRight: Radius.circular(ScreenUtil().setSp(80))),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(28, 58, 176, .1),
offset: Offset(-0.0, -10.0),
blurRadius: 10.0,
spreadRadius: 0.0)
]),
),
),
new Positioned(
bottom: ScreenUtil().setHeight(40),
left: ScreenUtil().setWidth(175),
child: new Offstage(
offstage: isShowBalance,
child: FlatButton(
onPressed: () {
print('BALANCE CHECK');
},
padding: EdgeInsets.all(0),
child: new Container(
height: ScreenUtil().setHeight(60),
width: ScreenUtil().setWidth(400),
decoration: BoxDecoration(
// color: Colors.blue,
gradient: const LinearGradient(colors: [
Color.fromRGBO(164, 185, 216, 1),
Color.fromRGBO(80, 119, 181, 1)
]),
borderRadius: BorderRadius.circular(40)),
child: new Text(
'BALANCE CHECK',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(30),
height: 1.4),
),
),
),
),
),
new Positioned(
bottom: 0,
child: new AnimatedContainer(
duration: Duration(milliseconds: 1000),
width: ScreenUtil().setWidth(750),
height: formHeight,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(ScreenUtil().setSp(80)),
topRight: Radius.circular(ScreenUtil().setSp(80))),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(28, 58, 176, .1),
offset: Offset(-0.0, -10.0),
blurRadius: 10.0,
spreadRadius: 0.0)
]),
),
),
new Positioned(
bottom: 0,
child: new AnimatedContainer(
duration: Duration(milliseconds: 1000),
width: ScreenUtil().setWidth(750),
height: submitHeight,
child: new GestureDetector(
onTap: () {
tabHeight = ScreenUtil().setHeight(0);
formHeight = ScreenUtil().setHeight(0);
submitHeight = ScreenUtil().setHeight(0);
loadingHeight = ScreenUtil().setHeight(1100);
Timer timer = new Timer(new Duration(seconds: 2), () {
loadingHeight = ScreenUtil().setHeight(0);
walletHeight = ScreenUtil().setHeight(1100);
addressHeight = ScreenUtil().setHeight(800);
marketHeight = ScreenUtil().setHeight(400);
setState(() {});
});
isShowBalance = true;
setState(() {});
},
child: new Container(
child: Center(
child: new Text('SUBMIT'),
)),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(ScreenUtil().setSp(80)),
topRight: Radius.circular(ScreenUtil().setSp(80))),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(28, 58, 176, .1),
offset: Offset(-0.0, -10.0),
blurRadius: 10.0,
spreadRadius: 0.0)
]),
),
),
new Positioned(
bottom: 0,
child: new AnimatedContainer(
duration: Duration(milliseconds: 1000),
width: ScreenUtil().setWidth(750),
height: loadingHeight,
padding: EdgeInsets.only(
top: ScreenUtil().setHeight(40),
bottom: ScreenUtil().setHeight(60),
left: ScreenUtil().setWidth(60),
right: ScreenUtil().setWidth(60),
),
child: new Container(child: new Text('Loading...')),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(ScreenUtil().setSp(80)),
topRight: Radius.circular(ScreenUtil().setSp(80))),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(28, 58, 176, .1),
offset: Offset(-0.0, -10.0),
blurRadius: 10.0,
spreadRadius: 0.0)
]),
),
),
new Positioned(
bottom: 0,
child: new Container(
child: new Stack(
children: <Widget>[
new Positioned(
child: AnimatedContainer(
duration: Duration(milliseconds: 1000),
width: ScreenUtil().setWidth(750),
height: walletHeight,
padding: EdgeInsets.only(
top: ScreenUtil().setHeight(40),
bottom: ScreenUtil().setHeight(60),
left: ScreenUtil().setWidth(60),
right: ScreenUtil().setWidth(60),
),
child: new GestureDetector(
child: new Container(
child: new Text('WALLET'),
)),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft:
Radius.circular(ScreenUtil().setSp(80)),
topRight:
Radius.circular(ScreenUtil().setSp(80))),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(28, 58, 176, .1),
offset: Offset(-0.0, -10.0),
blurRadius: 10.0,
spreadRadius: 0.0)
]),
),
),
new PositionedTransition(
rect: animationAddress,
child: AnimatedContainer(
duration: Duration(milliseconds: 1000),
width: ScreenUtil().setWidth(750),
height: addressHeight,
padding: EdgeInsets.only(
top: ScreenUtil().setHeight(40),
bottom: ScreenUtil().setHeight(60),
left: ScreenUtil().setWidth(60),
right: ScreenUtil().setWidth(60),
),
child: new Container(
child: Column(
children: <Widget>[
new GestureDetector(
onTap: () {
print(321);
marketHeight = 0;
controllerAddress.reverse();
isShowAddressDetail = false;
setState(() {});
},
child: new Container(
child: new Text('ADDRESS'),
)),
new Container(
child: new GestureDetector(
onTap: (){
print(123);
// addressHeight = ScreenUtil().setHeight(350);
isShowAddressDetail = true;
controllerAddress.forward();
setState(() {
});
},
child: new Container(
child: Text('Show Detail'),
),
),
)
],
),
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius:isShowAddressDetail? BorderRadius.only(
topLeft:
Radius.circular(ScreenUtil().setSp(80)),
topRight:
Radius.circular(ScreenUtil().setSp(80)),
bottomLeft:
Radius.circular(ScreenUtil().setSp(80)),
bottomRight:
Radius.circular(ScreenUtil().setSp(80))
): BorderRadius.only(
topLeft:
Radius.circular(ScreenUtil().setSp(80)),
topRight:
Radius.circular(ScreenUtil().setSp(80))),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(28, 58, 176, .3),
offset: Offset(-0.0, -0.0),
blurRadius: 10.0,
spreadRadius: 10.0)
]),
),
),
new Positioned(
bottom: 0,
child: AnimatedContainer(
duration: Duration(milliseconds: 1000),
width: ScreenUtil().setWidth(750),
height: marketHeight,
padding: EdgeInsets.only(
top: ScreenUtil().setHeight(40),
bottom: ScreenUtil().setHeight(60),
left: ScreenUtil().setWidth(60),
right: ScreenUtil().setWidth(60),
),
child: new GestureDetector(
child: new Container(
child: new Text('MARKET'),
)),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft:
Radius.circular(ScreenUtil().setSp(80)),
topRight:
Radius.circular(ScreenUtil().setSp(80))),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(28, 58, 176, .1),
offset: Offset(-0.0, -10.0),
blurRadius: 10.0,
spreadRadius: 0.0)
]),
),
)
],
),
))
],
),
),
);
}
}
下面是在调试时候的截图:
下面是打包安装到手机上的图片: