RouteTransition doesn't work if second page has a Introslider - 2

[pascalf22]

Hello again @duytq94

I'm sorry about it, but transition doesn't work... if my second page has a IntroSlider

I will give you more info :

Page 1 (splash screen)

import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
import 'dart:async';
import 'secondepage.dart';

void main() => runApp(MaterialApp(
      theme://Color(0x0098d4), accentColor: Color(0x006a94)
          ThemeData(primaryColor: Color(0xFF0098d4), accentColor: Color(0xFF006a94)),
      debugShowCheckedModeBanner: false,
      home: splash(),
    ));

class splash extends StatefulWidget {
  @override
  _splashState createState() => _splashState();
}

class _splashState extends State<splash> {

  @override
  void initState() {
    // TODO: implement initState
    Timer(Duration(seconds: 3),(){
     Navigator.push(context, PageTransition(child: SecondePage(), type: PageTransitionType.leftToRight));
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Theme.of(context).accentColor),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset(
                          'assets/img/logo/logo1_transparent.png',
                          width: 285.0,
                          alignment: Alignment.center,
                        )
                      ],
                    ),
                  ),
                ),

              ],
            ),
          )
        ],
      ),
    );
  }
}

Page #2 Intro-Slider:

import 'package:flutter/material.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';

class SecondePage extends StatefulWidget {
  @override
  _SecondePageState createState() => _SecondePageState();
}

class _SecondePageState extends State<SecondePage> {

  List<Slide> slides = new List();

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

    slides.add(
      new Slide(
        title: "ERASER",
        description: "Allow miles wound place the leave had. To sitting subject no improve studied limited",
        backgroundColor: Color(0xfff5a623),
      ),
    );
    slides.add(
      new Slide(
        title: "PENCIL",
        description: "Ye indulgence unreserved connection alteration appearance",
       backgroundColor: Color(0xff203152),
      ),
    );
    slides.add(
      new Slide(
        title: "RULER",
        description:
        "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",
        backgroundColor: Color(0xff9932CC),
      ),
    );
  }

  void onDonePress() {
    // Do what you want
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
         child: new IntroSlider(
          slides: this.slides,
          onDonePress: this.onDonePress,

        ),
      ),
    );
  }
}

So as i explained, is i remove the 'new IntroSlider(.....) the transition works.

I use for transition this package : https://pub.dev/packages/page_transition

I also remove the Container and Scaffold and only try the IntroSlider() in the Return (build)... still the same !!

Do you have any idea of why it's not working ofr me ?

Also, can you provide your code of page one and page 2... it will be nice !

Thank a lot !

Pascal

[duytq94]

Hi @pascalf22

• I got what you mean, actually, the animations on flutter will lag at the first time the app runs at debug (dev) mode, so you don't see any the transition at this time (both your code and my code have encountered).

• The navigation with transition is an animation, so it stuck this issue.

• It happens when the second page has a lot of UI need to render, it does not depend on has IntroSlider or not, just depend on how many views need to render (and IntroSlider in this case, actually has many views) so it causes the lag issue.

How to solve

• Set timeDilation at second page with value larger than 1 (1.01 still fine).

• Or build release to apk and re-test, the transition will work (it still has a little laggy, but it works and you can see the transition)

Link reference https://stackoverflow.com/questions/53774745/flutter-animation-is-not-smooth-at-first-time-render https://github.com/flutter/flutter/issues/31059

[duytq94]

Anyway, feel free to keep discussing in this thread, and please don't create the new same issue because it makes others difficult to follow

[pascalf22]

Hello @duytq94 !

Ho thanks a lot ! i'm happy to read it !! I will test it soon in the next day!

Thanks a lot for your explanation and for your code !! I'll try it soon !

Have a great day !

Thanks again :)

Pascal

[pascalf22]

Hello @duytq94

Thanks for your solution, it work perfectly for timeDilation = 1.5

Thanks again !

Pascal