Question

我有2个屏幕，我想通过自定义转换（使用名为flutter_spinkit的库）在它们之间导航。如何从Page1转到Page2显示2-3秒的自定义加载屏幕？这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

main() {
  runApp(MaterialApp(
    home: Page1(),
  ));
}

class Page1 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text('Go!'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    // transitionDuration: Duration(seconds: 1),
    transitionsBuilder: (context, animation, animationTime, child) {
      child = Scaffold(
        backgroundColor: Colors.purple[700],
        body: Center(
          child: SpinKitFadingCube(
            color: Colors.white,
            size: 100.0,
          ),
        ),
      );

      return ScaleTransition(
        scale: animation,
        child: child,
        alignment: Alignment.center,
      );
    },
    pageBuilder: (context, animation, animationTime) => Page2(),
  );
}

class Page2 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

Answer 1

我终于明白了。也许您只需要更改transitionsBuilder即可检查动画是否完整。我还更改了SpinKitFadingCube的名称，因为它不应替换原始的子Widget。

  transitionsBuilder: (context, animation, animationTime, child) {
    final loading= Scaffold(
      backgroundColor: Colors.purple[700],
      body: Center(
        child: SpinKitFadingCube(
          color: Colors.white,
          size: 100.0,
        ),
      ),
    );

    if(animation.isCompleted){
      return child;
    }else{
      return loading;
    }
  },

Answer 2

从一个屏幕转到另一个屏幕时制作动画

您的onPressed或onTap方法：

InkWell(
 onTap: () {
   Navigator.of(context).push(_createRoute());
 },
)

然后在您的_createRoute方法中

Route _createRoute() {
  return PageRouteBuilder(
    transitionDuration: Duration(seconds: 2), //You can change the time here
    pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.easeInCirc;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

使用Duration(seconds: 2)，您可以从microsecond，seconds，minutes，hours

还有Curves.easeInCirc之类的许多其他Curves动画，可以在Here中找到

OR

如果您想使用Flutter_Spinkit来显示一种类型的“动画加载指示符”，那么它就是这样做的！

添加依赖项：

dependencies:
  flutter_spinkit: "^4.1.2"

然后将其导入屏幕：

import 'package:flutter_spinkit/flutter_spinkit.dart';

，然后您可以在需要的地方使用Flutter Spinkit Loader，例如：

final spinkit = SpinKitFadingCircle(
  itemBuilder: (BuildContext context, int index) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: index.isEven ? Colors.red : Colors.green,
      ),
    );
  },
);

在Dart中切换时在屏幕之间导航

2 个答案:

OR