0

I'm having trouble identifying an issue with a transition animation on iOS with Flutter. My general structure is this:

Expanded(
  flex: 1,
  child: Container(
    padding: EdgeInsets.only(top: 35, right: 27, left: 27),
    margin: EdgeInsets.only(left: 10, right: 10),
    decoration: new BoxDecoration(
      color: Colors.white,
      boxShadow: [],
      borderRadius: new BorderRadius.only(
        topLeft: const Radius.circular(20.0),
        topRight: const Radius.circular(20.0),
      ),
    ),
    child: 
      Navigator(
        initialRoute: '/step1',
        onGenerateRoute: (RouteSettings settings) {
          WidgetBuilder builder;
          switch (settings.name) {
            case '/step1':
              builder = (BuildContext _) => Step1();
              break;
            case '/step2':
              builder = (BuildContext _) => Step1();
              break;
          }
        }
      )
  )
)

And the steps are basic columns:

class Step1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        ...
      ]
    );
  }
}

class Step2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        ...
      ]
    );
  }
}

The navigator flickers with a grey transparent background between transitions. This seems to only happen inside a container with a white background. I'm using the animations ^1.1.2 and defining transitions in ThemeeData:

ThemeData(
  pageTransitionsTheme: const PageTransitionsTheme(
    builders: <TargetPlatform, PageTransitionsBuilder>{
      TargetPlatform.android: SharedAxisPageTransitionsBuilder(
        transitionType: SharedAxisTransitionType.horizontal,
        // fillColor: Colors.transparent,
      ),
      TargetPlatform.iOS: ZoomPageTransitionsBuilder(),
    },
  )
);

enter image description here

ddibiase
  • 1,412
  • 1
  • 20
  • 44

2 Answers2

0

You don't have a scaffold in order to render it properly ... When you create a new widget you return a build method in which you render some widgets .... Until it loads your widget if you don't pass a scaffold you will see a black background

So instead of returning column you should use something like this:

class Step1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          ...
        ],
      ),
    );
  }
}

Hope this will resolve your problem. :)

George Zoiade
  • 73
  • 1
  • 3
  • 11
  • Ok, interesting. Is scaffold the only option here? I'm not using the either options/abilities of scaffold because it doesn't fit my layout model. I suppose it doesn't hurt to use it but seems redundant? Does scaffold emit a special property or why is it treated differently? – ddibiase Feb 26 '21 at 23:30
  • Sorry for saying that earlier ... I haven't payed attention to the whole question ... I see that you're using animations package ... Strangely I've discovered yesterday, but in my research that I've made I think it expands material theme which is not a good option for iOS platform ... So instead of my previous answer use CupertinoPageTransitionsBuilder() in ThemeData, instead of ZoomPageTransitionBuilder() and see if it works :) – George Zoiade Feb 26 '21 at 23:47
  • Thanks! I ended up taking your advice and going in a different direction. Appreciate your input! – ddibiase Feb 27 '21 at 15:42
0

As per George's comment in the question, CupertinoPageTransitionsBuilder is part of the solution but required restructuring parts of my layout to account for it.

ddibiase
  • 1,412
  • 1
  • 20
  • 44