[英]How to show flutter native splash screen when authentication loading?
I would like to check the authentication login state as below我想检查身份验证登录状态如下
Currently, I am using GetX state management I wish, on authentication loading state then show flutter_native_splash_screen rather than my customize splash screen due to rendering, it shows a black screen before my customized splash finished render.目前,我正在使用我希望的 GetX 状态管理,然后在身份验证加载状态上显示 flutter_native_splash_screen 而不是由于渲染而自定义的启动画面,它在我的自定义启动完成渲染之前显示黑屏。
Here is my code这是我的代码
void main() async {
var widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
internalInitialized();
runApp(const MyApp());
FlutterNativeSplash.remove();
}
void internalInitialized() {
Get.lazyPut(() => AuthController(Get.put(AuthService())));
}
class MyApp extends GetWidget<AuthController> {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
home: Obx(() {
if (controller.state is Authenticated) {
return HomeScreen((controller.state as Authenticated).user!);
} else if (controller.state is UnAuthenticated) {
return SignInScreen();
} else {
return const SplashScreen();
}
}),
theme: lightTheme(),
darkTheme: darkTheme(),
getPages: AppPages.list,
);
}
}
Splash Screen启动画面
class SplashScreen extends StatelessWidget {
const SplashScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
SizeConfig.init(context);
return Container(
color: AppTheme.primaryColor,
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: getHeight(150),
height: getHeight(150),
child: Image.asset("assets/images/logo.png"),
),
const CircularProgressIndicator(color: Colors.white)
],
));
}
}
The customize splash screen just show Logo and processing bar.自定义启动画面仅显示徽标和处理栏。 Auth Controller
认证控制器
class AuthController extends ConnectivityController {
final AuthService authService;
final authStateStream = const AuthenticationState().obs;
AuthController(this.authService);
AuthenticationState get state => authStateStream.value;
@override
void onInit() {
getAuthenticatedUser();
super.onInit();
}
Future<void> signIn(String username, String password) async {
authStateStream.value = AuthenticationLoading();
final customer = await authService.sign(username, password);
if (customer == null) {
authStateStream.value = UnAuthenticated();
} else {
authStateStream.value = Authenticated(customer: customer);
}
}
void signOut() async {
await authService.signOut("");
authStateStream.value = UnAuthenticated();
}
void getAuthenticatedUser() async {
authStateStream.value = AuthenticationLoading();
Future.delayed(const Duration(seconds: 10));
final customer = await authService.reSignIn();
if (customer == null) {
authStateStream.value = UnAuthenticated();
} else {
authStateStream.value = Authenticated(customer: customer);
}
}
}
Please guide me, on how can I solve this issue.请指导我,我该如何解决这个问题。 Thank you!
谢谢!
The splash screen is meant to be displayed whilst the bundled Flutter engine initialises.初始屏幕旨在在捆绑的 Flutter 引擎初始化时显示。 Once that is done and your app is in control, you can manually create a page that looks like the splash screen.
一旦完成并且您的应用程序处于控制之中,您就可以手动创建一个看起来像启动屏幕的页面。 So the child of the material app can be a splash screen look alike.
所以material app的child可以是一个splash screen的样子。 Maybe you could even make it identical to your splash screen asset.
也许你甚至可以让它与你的闪屏资产相同。
Try this,尝试这个,
first initialize
your state and use conditional
operator if it is authenticated than go to splashScreen
else authenticate
.首先
initialize
您的状态并使用conditional
运算符(如果已通过身份验证),而不是转到splashScreen
else authenticate
。
void initState() {
super.initState();
var _isAuth = user != null && user.isVerified;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => _isAuth ? SplashScreen() : Authenticate()),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.