Flutter开发之功能篇（七）——在启动页实现更多功能

2023-10-15 08:34:27

在Flutter开发中，启动页是用户在打开应用时看到的第一个界面，它通常用于显示应用程序的名称、图标和一些基本信息。在某些情况下，我们可能需要在启动页中实现更多功能，例如加载广告图或设置延时跳转。

如何在启动页加载广告图？

要在启动页加载广告图，我们需要创建一个自定义的SplashWidgit类，并将其作为应用程序的启动页。在SplashWidgit类中，我们可以使用Flutter的Image.network()方法加载广告图，并使用FadeInImage()小部件设置淡入动画效果。

class SplashWidgit extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FadeInImage(
      image: NetworkImage("https://example.com/ad.png"),
      placeholder: AssetImage("assets/images/placeholder.png"),
    );
  }
}

在main()方法中，我们可以将SplashWidgit作为应用程序的启动页，并设置延时跳转到真正的主页面。

void main() {
  runApp(MaterialApp(
    home: SplashWidgit(),
    routes: {
      '/home': (context) => HomePage(),
    },
  ));
}

如何在启动页设置延时跳转？

要在启动页设置延时跳转，我们可以使用Flutter的Future.delayed()方法。在SplashWidgit类中，我们可以使用Future.delayed()方法创建一个延时任务，并在任务完成后跳转到真正的主页面。

class SplashWidgit extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future.delayed(Duration(seconds: 5), () {
      Navigator.pushReplacementNamed(context, '/home');
    });
    return FadeInImage(
      image: NetworkImage("https://example.com/ad.png"),
      placeholder: AssetImage("assets/images/placeholder.png"),
    );
  }
}