我正在用flutter开发一个应用程序,遇到了一个大问题-当我重新启动代码时,需要10-20秒才能显示主页面,这通常不会是一个问题,除了圆形进度指示器没有显示-实际上它正在显示,但只是在屏幕中心显示一个蓝色的方形点。然后当页面加载完成时,它开始旋转一毫秒,然后进入主页。我很困惑为什么会发生这种情况,真的需要帮助。谢谢!
TLDR:圆形按钮冻结,并在结束时开始旋转这是我的代码,如果它有帮助:
import 'package:flutter/material.dart';
import 'package:workout_app/Screens/Components/Sign_Up_Screens/screen1.dart';
import 'package:workout_app/Screens/Components/homepage.dart';
import 'package:workout_app/Screens/Components/login.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:io';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
FutureBuilder(
future: Firebase.initializeApp(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Main();
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
)
]),
);
}
}
class Main extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MainState();
}
class _MainState extends State<Main> {
final FirebaseAuth _auth = FirebaseAuth.instance;
bool _isLoading = false;
String? uid;
String? name;
String? userEmail;
String? imageUrl;
@override
void initState() {
Firebase.initializeApp();
start();
super.initState();
}
Future<bool> isLoggedIn() async {
User? user = _auth.currentUser;
return user != null;
}
void start() async {
setState(() {
_isLoading = true;
});
bool loggedIn = await isLoggedIn();
SharedPreferences prefs = await SharedPreferences.getInstance();
if (loggedIn) {
String uid = _auth.currentUser!.uid;
prefs.setString('id', uid);
Navigator.of(context).pushReplacement(
MaterialPageRoute(
fullscreenDialog: true, builder: (context) => home_page()),
);
} else {
setState(() {
_isLoading = false;
});
}
}
@override
Widget build(BuildContext context) {
//this isn't important for the code - it doesn't impact the circular spinner
}
}
Route _createRouteToLogin() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => login_page(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}
Route _createRouteToSignUp() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => screen1(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}
1条答案
按热度按时间8ehkhllq1#
解决这个问题的一种方法是实现块模式而不是使用有状态的小部件。当我们构建应用程序时,有状态的小部件不是很好。所以,我的建议是实现块模式,它应该可以解决这个问题。我希望它能有所帮助:)
这里有一个例子。所以,如果你去看看块文档。你可以看到块允许你把状态放在一个单独的文件中。本质上让你完全控制你的应用程序的状态。
在您的情况下,状态将是初始加载
这些状态将进入状态文件,然后是事件,因此事件将是“getData”。然后您可以编写块,并说如果状态未加载,则返回循环加载小部件。这应该可以解决问题。