Article Directory
I. Introduction
The function of opening screen advertisement is very common in commercial applications. It can display advertisements to users when the application starts, increasing the commercial value of the application.
If you want to learn more about Flutter and master more tips and best practices, I have good news for you: we have a comprehensive Flutter column -> Flutter Developer 101 Getting Started Booklet waiting for you. There, you will get complete and systematic Flutter learning materials, including detailed code examples and in-depth concept analysis. What's more, our columns are constantly being updated and improved, and the price will gradually increase with the enrichment of content. So, join now and you will get all the content at the best price. Now, let's start learning today!
2. Realize the opening screen advertisement page
Before we start, we first need to create a new Flutter page that will be used as the splash page.
- Create a splash page
We create a new Dart file named splash_screen.dart. In this file, we define a new StatelessWidget that will represent our splash ad page.
import 'package:flutter/material.dart';
class SplashScreen extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('这是开屏广告'),
),
);
}
}
- Design the UI of the open screen advertisement page
In the above code, we simply added a text component in the center of the page to indicate that this is a splash ad. In actual development, you may want to design a richer and more attractive UI based on the content of the advertisement.
// 您可以根据实际情况，设计更丰富的 UI
- Set timed jump
Splash ads usually automatically jump to the main page of the app after a period of time. We can use Dart's Future.delayedmethod to achieve this function.
import 'package:flutter/material.dart';
class SplashScreen extends StatelessWidget {
Widget build(BuildContext context) {
// 延迟3秒后跳转到主页面
Future.delayed(Duration(seconds: 3), () {
Navigator.pushReplacementNamed(context, '/home');
});
return Scaffold(
body: Center(
child: Text('这是开屏广告'),
),
);
}
}
In the above code, we set a timer with a delay of 3 seconds. When the time is up, the page will jump to the route named '/home'.
3. Realize the loading of advertising data
In practical applications, the content of the splash advertisement usually comes from the server. Here, to simplify the example, we will simulate the loading process of an advertisement data.
- simulated advertising data
We can define a function to simulate the process of loading advertisement data from the server. This function returns a Future representing an asynchronous operation. In this example, we will delay for 1 second in the function, and then return a string representing the content of the ad.
```dart
Future<String> fetchAdData() {
// 在这里我们模拟一个从服务器加载广告数据的过程
// 实际开发中，你可能需要调用你的 API 服务
// 例如：http.get('https://api.yourserver.com/ads')
return Future.delayed(Duration(seconds: 1), () => '广告内容');
}
- load ad data
We can call the above fetchAdDatamethod , and then use FutureBuilder to process the result of the asynchronous operation.
import 'package:flutter/material.dart';
class SplashScreen extends StatelessWidget {
Future<String> fetchAdData() {
return Future.delayed(Duration(seconds: 1), () => '广告内容');
}
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: fetchAdData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Scaffold(
body: Center(
child: Text('加载中...'),
),
);
} else {
Future.delayed(Duration(seconds: 3), () {
Navigator.pushReplacementNamed(context, '/home');
});
return Scaffold(
body: Center(
child: Text(snapshot.data ?? '广告内容'),
),
);
}
},
);
}
}
In the above code, we use FutureBuilder to process the return result of fetchAdData. While the data is loading, we display the text "Loading...". When the data loading is complete, we display the content of the ad and set a timer to jump to the main page after a delay of 3 seconds.
4. The complete code of the opening screen advertisement
The following is the complete code of the splash ad we implemented:
import 'package:flutter/material.dart';
class SplashScreen extends StatelessWidget {
Future<String> fetchAdData() {
return Future.delayed(Duration(seconds: 1), () => '广告内容');
}
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: fetchAdData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Scaffold(
body: Center(
child: Text('加载中...'),
),
);
} else {
Future.delayed(Duration(seconds: 3), () {
Navigator.pushReplacementNamed(context, '/home');
});
return Scaffold(
body: Center(
child: Text(snapshot.data ?? '广告内容'),
),
);
}
},
);
}
}
V. Summary
So far, we have completed the function of implementing splash ads in Flutter. Although this is just a simple example, it shows how to handle asynchronous operations in Flutter, how to set timers, and how to jump between pages. In actual development, you may need to call real APIs to obtain advertising data, design richer UIs, and handle more edge cases. However, I believe that through this example, you have grasped the basic idea of implementing this function.
If you are interested in Flutter and want to learn more in-depth, then I would like to recommend you a great resource: our Flutter column -> Flutter Developer 101 Getting Started Booklet . There, you will get complete and systematic Flutter learning materials, including detailed code examples and in-depth concept analysis. For example, do you know how to build a complete app using Flutter? In our column you will find out. What's more, our columns are constantly being updated and improved, and the price will gradually increase with the enrichment of content. So, join now and you will get all the content at the best price. Let's continue exploring in the world of Flutter together! If you want to know more, you can first read our one-stop solution to your needs, Flutter Developer 101 Getting Started Booklet column guide .