有人知道如何在这个登录页面之前添加一个flutter启动屏幕吗？我已经使用这个github文件编写了代码。和youtube链接。认为我错过了一些codes.it没有显示的部分。对于登录屏幕，我看了一个不同的视频，它成功实现了。但是现在我想在这个登录屏幕出现之前添加启动屏幕。
main. dart
import 'package:flutter/material.dart';
import 'loginScreen.dart';
import 'dart:async';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Login UI',
debugShowCheckedModeBanner: false,
home:LoginScreen(),
);
}
}
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
// TODO: implement initState
super.initState();
Timer(Duration(seconds: 3), () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (_) => LoginScreen()));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green[700],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// logo here
Image.asset(
'assets/images/logo.png',
height: 120,
),
SizedBox(
height: 20,
),
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
)
],
),
),
);
}
}
loginScreen. dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
bool isRememberMe =false;
Widget buildEmail() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Email',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight:
FontWeight.bold
),
),
SizedBox(height: 10),
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 6,
offset: Offset(0, 2)
)
]
),
height: 60,
child: TextField(
keyboardType: TextInputType.emailAddress,
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14),
prefixIcon: Icon(
Icons.email,
color: Color(0xff53bf87),
),
hintText: 'Email',
hintStyle: TextStyle(color: Colors.black38)),
)
)
],
);
}
Widget buildPassword() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Password',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight:
FontWeight.bold
),
),
SizedBox(height: 10),
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 6,
offset: Offset(0, 2)
)
]
),
height: 60,
child: TextField(
obscureText: true,
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14),
prefixIcon: Icon(
Icons.lock,
color: Color(0xff5ac18e),
),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.black38)),
)
)
],
);
}
Widget buildForgotPassBtn(){
return Container(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () => print("Forget Password pressed"),
// padding: EdgeInsets.only(right:0),
child: Text(
'Forgot Passsword?',
style: TextStyle(
color: Colors.white,
fontWeight : FontWeight.bold
),
),
),
);
}
Widget buildRememberCb(){
return Container(
height: 20,
child: Row(
children: <Widget>[
Theme(
data: ThemeData(unselectedWidgetColor :Colors.white),
child:Checkbox(
value: isRememberMe, onChanged: (value) {
setState(() {
isRememberMe =value!;
});
},
checkColor: Colors.green,
activeColor: Colors.white,
),
),
Text(
'Remember me',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
)
],
),
);
}
Widget buildLoginBtn(){
return Container(
padding: EdgeInsets.symmetric(vertical:25),
width: double.infinity,
child: RaisedButton(
elevation:5,
onPressed: ()=> print ('login pressed'),
padding:EdgeInsets.all(15),
shape: RoundedRectangleBorder (
borderRadius: BorderRadius.circular(15)
),
color: Colors.white,
child: Text(
'LOGIN',
style:TextStyle(
color: Color(0xff5ac18e),
fontSize: 18,
fontWeight: FontWeight.bold
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: GestureDetector(
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0x665ac18e),
Color(0x995ac18e),
Color(0xcc5ac18e),
Color(0xff5ac18e),
]
)
),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: 25,
vertical: 120,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold),
),
SizedBox(height: 50),
buildEmail(),
SizedBox(height: 20),
buildPassword(),
buildForgotPassBtn(),
buildRememberCb(),
buildLoginBtn(),
],
),
),
),
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'loginScreen.dart';
import 'dart:async';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Login UI',
debugShowCheckedModeBanner: false,
home: SplashScreen(),
);
}
}
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
// TODO: implement initState
super.initState();
Timer(Duration(seconds: 3), () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (_) => LoginScreen()));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green[700],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// logo here
Image.asset(
'assets/images/logo.png',
height: 120,
),
SizedBox(
height: 20,
),
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
)
],
),
),
);
}
}
尝试以下软件包：https://pub.dev/packages/flutter_native_splash
然后要创建启动屏幕，请将类似的内容添加到您的yaml文件中
然后您只需在终端中运行以下命令：
flutter pub run flutter_native_splash:create
那应该就是了
除了另一个答案，需要注意的是，在Flutter框架加载的同时，会出现空白白屏。我维护了一个包flutter_native_splash，可以用来将默认白屏替换为闪屏。你可能会发现，这比手动实现闪屏更容易。
