how to show loader until token is not checked in flutter? - node.js

Question

Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MultiProvider(providers: [
ChangeNotifierProvider(
create: (context) => UserProvider(),
)
], child: const MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final AuthService authService = AuthService();
#override
void initState() {
super.initState();
authService.getUserData(context);
setState(() {});
}
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'verdent',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Provider.of<UserProvider>(context).user.token.isNotEmpty
? Provider.of<UserProvider>(context).user.type == 'user'
? BottomNavScreen()
: const AdminScreen()
: const login_a(),
);
}
}
Loader
import 'package:flutter/material.dart';
class Loader extends StatelessWidget {
const Loader({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const Center(
child: CircularProgressIndicator(),
);
}
}
authservice.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:verdent/Dashboard/Home/Screens/Bottom_Nav_bar.dart';
import 'package:verdent/Registraion/Screens/Login_a.dart';
import 'package:verdent/admin_screen.dart';
import 'package:verdent/global_constants.dart';
import 'package:verdent/models/user.dart';
import 'package:verdent/user_provider.dart';
class AuthService {
// sign up user
void signUpUser({
required BuildContext context,
required String email,
required double phone,
required String password,
required String name,
}) async {
try {
User user = User(
id: '',
name: name,
password: password,
email: email,
phone: phone,
type: '',
token: '',
);
http.Response res = await http.post(
Uri.parse('$uri/api/signup'),
body: user.toJson(),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
);
httpErrorHandling(
response: res,
context: context,
onSuccess: () {
showSnackBar(
context,
'Account created! Login with the same credentials!',
);
},
);
} catch (e) {
showSnackBar(context, e.toString());
}
}
// sign in user
void signInUser({
required BuildContext context,
required double phone,
required String password,
}) async {
try {
http.Response res = await http.post(
Uri.parse('$uri/api/signin'),
body: jsonEncode({
'phone': phone,
'password': password,
}),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
);
httpErrorHandling(
response: res,
context: context,
onSuccess: () async {
SharedPreferences prefs = await SharedPreferences.getInstance();
// ignore: use_build_context_synchronously
Provider.of<UserProvider>(context, listen: false).setUser(res.body);
await prefs.setString(
'x-auth-token', jsonDecode(res.body)['token']);
// ignore: use_build_context_synchronously
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Provider.of<UserProvider>(context, listen: false)
.user
.type ==
'user'
? BottomNavScreen()
: const AdminScreen()));
});
} catch (e) {
showSnackBar(context, e.toString());
}
}
// get user data
void getUserData(
BuildContext context,
) async {
try {
var userProvider = Provider.of<UserProvider>(context, listen: false);
SharedPreferences prefs = await SharedPreferences.getInstance();
String? token = prefs.getString('x-auth-token');
if (token == null) {
prefs.setString('x-auth-token', '');
}
var tokenRes = await http.post(
Uri.parse('$uri/tokenIsValid'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'x-auth-token': token!
},
);
var response = jsonDecode(tokenRes.body);
if (response == true) {
http.Response userRes = await http.get(
Uri.parse('$uri/'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'x-auth-token': token
},
);
userProvider.setUser(userRes.body);
}
} catch (e) {
showSnackBar(context, e.toString());
}
}
void logOut(BuildContext context) async {
try {
SharedPreferences sharedPreferences =
await SharedPreferences.getInstance();
await sharedPreferences.setString('x-auth-token', '');
// ignore: use_build_context_synchronously
Navigator.push(
context, MaterialPageRoute(builder: (context) => const login_a()));
} catch (e) {
showSnackBar(context, e.toString());
}
}
}
when logged in user tries to enter app or restart app they first goes to login page then redirected to homepage how to show loader until token is checked if user is not logged in then stays at login page otherwise goes back to homepage. please help me to solve this issue due to this user-expirence of my app is downgraded.

Answer 1

create bool variable for checking loading status. For example, isLoading and default value is true.
in your main initState function, add change isLoading to false after call any functions that you want to setup before show a screen to user.
setState(() {
authService.getUserData(context);
isLoading = false;
});
in build function, add turnary operator to check is state loading or not. If still loading, show Loader. If not, show your desired page.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'verdent',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: isLoading ? Loader() : Provider.of<UserProvider>(context).user.token.isNotEmpty
? Provider.of<UserProvider>(context).user.type == 'user'
? BottomNavScreen()
: const AdminScreen()
: const login_a(),
);
}