启动画面后移至下一页

Question

亲爱的，起初我对编程和颤动还很陌生。我购买了一个应用程序代码并进行了重新换肤，但遇到启动画面问题

代码是这样的：

import 'package:cirilla/constants/assets.dart';
import 'package:cirilla/constants/constants.dart';
import 'package:flutter/material.dart';
import 'package:ui/painter/zoom_painter.dart';

import 'widgets/zoom_animation.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key, this.color, this.loading}) : super(key: key);

  final Color? color;
  final bool? loading;

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
  Size size = Size.zero;
  late AnimationController _controller;
  late ZoomAnimation _animation;
  AnimationStatus _status = AnimationStatus.forward;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 2500),
      vsync: this,
    )
      ..addStatusListener((AnimationStatus status) {
        setState(() {
          _status = status;
        });
      })
      ..addListener(() {
        setState(() {});
      });
    _animation = ZoomAnimation(_controller);
  }

  @override
  void didChangeDependencies() {
    setState(() {
      size = MediaQuery.of(context).size;
    });
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(covariant SplashScreen oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (!widget.loading! && _controller.status != AnimationStatus.forward) {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_status == AnimationStatus.completed) return Container();

    return Stack(children: [
      SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: CustomPaint(
          painter: ZoomPainter(color: widget.color!, zoomSize: _animation.zoomSize.value * size.width),
    ),
  ),
  Padding(
    padding: const EdgeInsets.only(bottom: itemPaddingExtraLarge),
    child: Align(
      alignment: Alignment.center,
      child: Opacity(
        opacity: _animation.textOpacity.value,
        child: Image.asset(Assets.logo, width: 200, height: 200, fit: BoxFit.fitWidth),
      ),
    ),
  )
]);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

'''

很好，我把它变成了这个

 import 'package:flutter/material.dart';
 import 'package:rive/rive.dart';
 
 class SimpleAnimation extends StatelessWidget {
   const SimpleAnimation({Key? key, this.loading}) : super(key: key);
   final bool? loading;

   @override
   Widget build(BuildContext context) {
     return const Scaffold(
       body: Center(
         child: RiveAnimation.asset('assets/splash/splash.riv',
           fit: BoxFit.cover)
       ),
     );
   }

 }

我所需要的只是让它在 5 秒后进入下一个屏幕，我尝试了很多东西但什么也没有有时我在用 RIVE 创建的启动画面后出现黑屏，大多数时候它只是卡在之后正在播放。

注意一下，下面的代码在home.dart

     return Stack(
  children: [
    widget.store!.data == null ? const Empty() : buildOnBoarding(context),
    SplashScreen(loading: widget.store!.loading, color: Colors.white),
  ],
);
}

Answer 1

创建类似 this.Here 的方法 future. delayed 解决了我们将动画显示为启动画面 5 秒的问题

setdata(BuildContext context) async {
  await Future.delayed(const Duration(seconds: 5), () {
    SchedulerBinding.instance!.addPostFrameCallback((_) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => WelcomeScreen()),
      );
    });

  });
}

启动画面可能会像这样

class SimpleAnimation extends StatelessWidget {
  const SimpleAnimation({Key? key, this.loading}) : super(key: key);
  final bool? loading;

  @override
  Widget build(BuildContext context) {
    setdata(context);
    return Scaffold(
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          child: RiveAnimation.network(
            'https://cdn.rive.app/animations/vehicles.riv',
          ),
        ),
      ),
    );
  }
}

初始页面之后 welcome.dart（你必须用 Scaffold widget.other 包装小部件，你会得到黑屏

class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          child: Text(
            "HOME PAGE",
            style: TextStyle(fontSize: 50),
          ),
        ),
      ),
    );
  }
}

示例代码：

    import 'package:flutter/material.dart';
    import 'package:rive/rive.dart';
    
    void main() {
      WidgetsFlutterBinding.ensureInitialized();
    
      runApp(MaterialApp(home: SimpleAnimation()));
    }
    
    setdata(BuildContext context) async {
  await Future.delayed(const Duration(seconds: 5), () {
    SchedulerBinding.instance!.addPostFrameCallback((_) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => WelcomeScreen()),
      );
    });

  });
}
    
    class SimpleAnimation extends StatelessWidget {
      const SimpleAnimation({Key? key, this.loading}) : super(key: key);
      final bool? loading;
    
      @override
      Widget build(BuildContext context) {
        setdata(context);
        return Scaffold(
          body: Center(
            child: Container(
              height: 200,
              width: 200,
              child: RiveAnimation.network(
                'https://cdn.rive.app/animations/vehicles.riv',
              ),
            ),
          ),
        );
      }
    }
    
    class WelcomeScreen extends StatelessWidget {
      const WelcomeScreen({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Center(
            child: Container(
              child: Text(
                "HOME PAGE",
                style: TextStyle(fontSize: 50),
              ),
            ),
          ),
        );
      }
    }

启动画面后移至下一页

Moving to the next page after splash screen

splash-screen

flutter