flutter 打包后动画部分的组件屏幕适配问题

新手上路,请多包涵

在写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)
                          ]),
                    ),
                  )
                ],
              ),
            ))
      ],
    ),
  ),
);

}
}

下面是在调试时候的截图:
图片描述

图片描述

下面是打包安装到手机上的图片:
图片描述

阅读 1.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题