Flutter Onboarding Screen Only Once With Splash Screen

Question

我在Flutter制作应用程序，我只想让用户看到一次入职屏幕。我看了几段视频，展示了如何做到这一点，但问题是我的主屏幕永远是飞溅屏幕。我不知道如何使用共享首选项来显示一次入职屏幕，但每次都显示启动屏幕。我真的需要一些帮助：(。

我的main.dart代码：

int? isViewed;
Future <void> main() async {
WidgetsFlutterBinding.ensureInitialized();
final prefs = await SharedPreferences.getInstance();
final showLogin = prefs.getBool('showLogin') ?? false;
Paint.enableDithering = true;
await Firebase.initializeApp();
// This is for our onboarding screen
isViewed = prefs.getInt('onboard');
runApp(MyApp(showLogin: showLogin));
}
class MyApp extends StatelessWidget {
final bool showLogin;

const MyApp({Key? key,
required this.showLogin}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Strength',
debugShowCheckedModeBanner: false,
theme: ThemeData(
appBarTheme: const AppBarTheme(color: Colors.white,
elevation: 0,
brightness: Brightness.light,
iconTheme: IconThemeData(color: Colors.black),
textTheme: TextTheme(headline6: TextStyle(color: Color(0xff888888), fontSize: 18),
)
),),
home: const SplashScreen(),
);
}
}

我的入职屏幕的代码块：

class OnboardingScreen extends StatefulWidget {
const OnboardingScreen({Key? key}) : super(key: key);
@override
_OnboardingScreenState createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
final controller = PageController();
bool isLastPage = false;
@override
void dispose() {
controller.dispose();
super.dispose();
}
_storeOnboardingInfo() async {
int isViewed = 0;
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setInt('onBoard', isViewed);
}

@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
.
.
.
TextButton(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
primary: Colors.white,
backgroundColor: const Color(0xff31708c),
minimumSize: const Size.fromHeight(60)
),
child: Text(
'Get Started',
style: GoogleFonts.montserrat(
fontSize: 24,
fontWeight: FontWeight.w600),
),
onPressed: () async {
final prefs = await SharedPreferences.getInstance();
prefs.setBool('showLogin', true);
await _storeOnboardingInfo();
Navigator.of(context).pushReplacement(
PageTransition(
type: PageTransitionType.fade,
duration: const Duration(milliseconds: 500),
child: LandingScreen()
)
);
}
)

我的启动屏幕代码：

class SplashScreen extends StatefulWidget {
const SplashScreen ({Key? key}) : super(key: key);
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> with TickerProviderStateMixin{
late AnimationController _screenController;
@override
void initState() {
super.initState();
_screenController = AnimationController(vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
child: Lottie.asset('assets/lottie/splashScreen.lottie.json',
fit: BoxFit.fill,
controller: _screenController,
onLoaded: (composition) {
_screenController
..duration = composition.duration
..forward().whenComplete(() => 
Navigator.of(context).pushReplacement(
PageTransition(
type: PageTransitionType.fade,
duration: const Duration(milliseconds: 1800),
child: const OnboardingScreen()
)
));
}
)
)
);
}
}

Answer 1

您可以在启动屏幕中检查共享的首选项值，并将用户重定向到OnBoardingScreen或LandingScreen。

import 'package:custom_form_field/src/form_screen.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:shared_preferences/shared_preferences.dart';
class SplashScreen extends StatefulWidget {
const SplashScreen({Key? key}) : super(key: key);
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen>
with TickerProviderStateMixin {
late AnimationController _screenController;
@override
void initState() {
super.initState();
_screenController = AnimationController(vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
child: Lottie.asset('assets/lottie/splashScreen.lottie.json',
fit: BoxFit.fill,
controller: _screenController, onLoaded: (composition) {
_screenController
..duration = composition.duration
..forward().whenComplete(() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
// check shared preference and show particular screen

});
})));
}
}

您可以在initState中检查共享的首选项值，并在动画完成后执行逻辑操作。此外，您还可以在此处从共享首选项检查登录状态，并在需要时显示登录页面。

Answer 2

生成一个全局变量：

Global.dart

library my_prj.globals;
bool newUser = true;

main.dart

globals.newUser == true ? LandingPage() : LoginPage()

signup.dart

这里我正在传递变量

globals.newUser = false;

以及用户名或密码字段。

此后，您的值将被永久设置为false，直到您对其进行更改为止。