visual-studio-code - Flutter Visual Studio Code 中的启动画面、登录和登录画面
问题描述
我有几个问题,因为我有点困惑,不知道从哪里开始。我创建了一个启动画面(并且它工作正常),但是在启动画面之后我期待下一个入职,但是当我运行应用程序时,它显示启动画面和登录是下一个。我需要在 main.dart 中为所有屏幕创建一个类吗?
main
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
import 'package:flutter_app/splash_screen.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/onboarding_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: SplashScreen());
}
}
class OnboardingScreen extends StatelessWidget {
const OnboardingScreen({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Travel On Boarding",
);
}
}
splash Screen
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:shimmer/shimmer.dart';
import 'package:flutter_app/onboarding_screen.dart';
import 'package:flutter_app/login_screen.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
_mockCheckForSession().then((status) {
if (status) {
_navigateToHome();
} else {
_navigateToLogin();
}
});
}
Future<bool> _mockCheckForSession() async {
await Future.delayed(Duration(milliseconds: 6000), () {});
return true;
}
void _navigateToHome() {
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (BuildContext context) => LoginScreen()));
}
void _navigateToLogin() {
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (BuildContext context) => LoginScreen()));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Container(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Opacity(
opacity: 0.5,
child: Image.asset('assets/img/bg.png'),
),
Shimmer.fromColors(
period: Duration(milliseconds: 2000),
baseColor: Color(0xffffffff),
highlightColor: Color(0xff000000),
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(30.0),
child: Text(
"ASE",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 90.0,
fontFamily: 'Pacifico',
),
),
),
)
],
),
),
);
}
}
onboarding
import 'package:flutter/material.dart';
class OnboardingScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Onboarding')),
body: Center(
child: Card(
color: Colors.grey[300],
elevation: 10.0,
child: Container(
height: 100.0,
width: 100.0,
alignment: Alignment.center,
child: Text(
'Welcome Home!',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
)),
),
));
}
}
Login
import 'package:flutter/material.dart';
class LoginScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Login')),
body: Center(
child: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(hintText: "Enter Username"),
),
),
Container(
margin: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(hintText: "Enter Password"),
),
),
MaterialButton(
onPressed: () {},
child: Text("Login", style: TextStyle(color: Colors.white)),
color: Colors.blueAccent,
)
],
)),
));
}
}
解决方案
只需以这种方式更改此功能
void _navigateToHome() {
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (BuildContext context) => OnboardingScreen()));
}
推荐阅读
- python - 如何检查字典值是否在 python 的字典列表中可用?
- android - 其他用户的声音正在低音录制
- mysql - Mysql将时间转换为秒然后插入到表中
- windows - 检测受控文件夹访问何时处于活动状态
- java - 创建 SQL 插入语句到 CSV 文件
- javascript - 如何避免在画布上绘制模糊图像
- php - PHP联系表单不向用户显示错误
- javascript - 何时将配置存储在 .js 文件中以及何时将其存储在 .json 文件中?
- java - 是在 Go 中编写 int32 原子操作吗?
- python - 使用 python pandas 对值的数量进行操作