我正在创建一个 flutter 登录页面,我面临的问题是我的页面内容不适合页面本身,并且当我单击文本字段时,页面不会自动向上滚动。下面是我设计的图片。
通过我的代码, 我得到下面的页面,页面中隐藏了“By Phandas Studio”。
这是我的代码如下:
class LoginPage extends StatelessWidget {
const LoginPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFE0E0E0),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 35.0),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const SizedBox(height: 137.0),
Container(
height: 141.0,
width: 129.0,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/MediaPlus-01.png',
),
fit: BoxFit.fill,
),
//shape: BoxShape.circle,
//backgroundBlendMode: ,
),
),
const SizedBox(height: 15.0),
const Text(
"WELCOME!",
style: TextStyle(
color: Color(0xFF4F4F4F),
fontSize: 36,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 15.0),
Form(
child: Column(
children: <Widget>[
myTextField(
helpText: 'Enter your email',
hintText: 'Enter your email',
prefixIcon: Icons.email,
),
const SizedBox(height: 26.0),
myTextField(
helpText: 'Enter your password',
hintText: 'Enter your password',
isPassword: true,
prefixIcon: Icons.lock),
const SizedBox(height: 13.0),
/*TextButton(
onPressed: () {},
child: const Text(
"ForgotPassword",
style: TextStyle(
color: Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
*/
RichText(
text: TextSpan(
text: "ForgotPassword",
style: TextStyle(
color: Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
recognizer: TapGestureRecognizer()
..onTap = () {
print(Navigator.pushReplacementNamed(
context, '/SignupPage'));
}),
),
const SizedBox(height: 12.0),
myButton("LOGIN", "SignupPage"),
//testButton(),
const SizedBox(height: 18.0),
RichText(
text: TextSpan(
text: "Don't have an account?",
style: TextStyle(
color: Color(0xFF4F4F4F),
fontSize: 16.0,
),
children: [
TextSpan(
text: " Sign Up.",
style: TextStyle(
color: Color(0xFFEB5757),
),
recognizer: TapGestureRecognizer()
..onTap = () {
print(Navigator.pushReplacementNamed(
context, '/SignupPage'));
}
//recognizer: TapGestureRecognizer()..onTap(){};
),
],
),
),
const SizedBox(height: 18.0),
TextButton(
onPressed: () {},
child: const Text(
"Terms of Use / Privacy Policy",
style: TextStyle(
color: Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(
height: 100.0,
),
RichText(
text: const TextSpan(
text: "By",
style: TextStyle(
color: Color(0xFF4F4F4F),
fontSize: 16.0,
),
children: [
TextSpan(
text: " Phanda Studio.",
style: TextStyle(color: Color(0xFFEB5757)),
),
],
),
),
const SizedBox(
height: 10.0,
),
],
),
),
],
),
),
),
);
}
}
还将整个应用程序包装在 ScreenUtilInit 中:
void main() => runApp(
ScreenUtilInit(
builder: () => MaterialApp(initialRoute: '/LoginPage', routes: {
'/': (context) => const HomePage(),
'/LoginPage': (context) => const LoginPage(),
'/SignupPage': (context) => const SignupPage(),
}),
//designSize: const Size(414, 896),
),
);