Slide transition is very slow

Question

My senario is my image and buttons in the center of the screen but my image on the top of them so i'm using stack , then after 2 seconds my image move slightly to the top and my buttons to the bottom.

so i'm using slide transition to move an Image slightly to the top and other buttons to the bottom, and it works but it's very slow even on a real device after release.

is there any solution to fix it or a better approach ?

thanks in advance

my code

class StartView extends StatefulWidget {
  @override
  _StartViewState createState() => _StartViewState();
}

class _StartViewState extends State<StartView> with TickerProviderStateMixin {
  bool showOptions = false;
  AnimationController controller;
  Animation<Offset> offset;
  Animation<Offset> offset2;
  Animation<Offset> offset3;
  bool _isLoadingVisitor = false;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0, -.5))
        .animate(controller);
    offset2 = Tween<Offset>(begin: Offset.zero, end: Offset(0, .8))
        .animate(controller);
    offset3 = Tween<Offset>(begin: Offset.zero, end: Offset(0, 2))
        .animate(controller);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    controller.dispose();
  }


  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 376, height: 670, allowFontScaling: false);
    Future.microtask(()=>Future.delayed(Duration(seconds: 2), () {
      controller.forward();
    }));

    return SafeArea(
      child: Scaffold(
        body: Container(
          child: Stack(
            children: <Widget>[
              Align(
                  alignment: Alignment.center,
                  child: SlideTransition(
                    position: offset2,
                    child: RaisedButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(5)),
                      child: Text(
                        Localization.of(context).trans('login'),
                        style: TextStyle(
                            fontSize: ScreenUtil().setSp(20),
                            fontFamily: 'JFFlatregular'),
                      ),
                      elevation: 0,
                      onPressed: login,
                    ),
                  )),
              Align(
                alignment: Alignment.center,
                child: SlideTransition(
                  position: offset3,
                  child: _isLoadingVisitor
                      ? CircularProgressIndicator()
                      : FlatButton(
                          child: Text(
                            Localization.of(context).trans('login_as_visitor'),
                            style: TextStyle(
                                fontSize: ScreenUtil().setSp(20),
                                fontFamily: 'JFFlatregular'),
                          ),
                          onPressed: loginVisitor,
                        ),
                ),
              ),
              Align(
                alignment: Alignment.center,
                child: SlideTransition(
                  position: offset,
                  child: Image.asset(
                    'assets/images/splash.png',

                    width: ScreenUtil().setWidth(250),
                    height: ScreenUtil().setHeight(250),
                    fit: BoxFit.fill,
                    filterQuality: FilterQuality.high,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Image resolution was too high 2040*2040 when i resized it , it works just fine