这是CaiYouHui前端,一个关于flutter的安卓app,前端使用flutter实现

login_screen.dart 6.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  3. import '../../providers/auth_provider.dart';
  4. import '../../../core/constants/route_constants.dart';
  5. import '../../widgets/common/app_button.dart';
  6. import '../../widgets/common/app_text_field.dart';
  7. import '../../widgets/common/loading_indicator.dart';
  8. class LoginScreen extends StatefulWidget {
  9. final VoidCallback? onSuccess;
  10. const LoginScreen({super.key, this.onSuccess});
  11. @override
  12. State<LoginScreen> createState() => _LoginScreenState();
  13. }
  14. class _LoginScreenState extends State<LoginScreen> {
  15. final _formKey = GlobalKey<FormState>();
  16. final _emailController = TextEditingController(text: 'test@example.com');
  17. final _passwordController = TextEditingController(text: '123456');
  18. @override
  19. void dispose() {
  20. _emailController.dispose();
  21. _passwordController.dispose();
  22. super.dispose();
  23. }
  24. @override
  25. Widget build(BuildContext context) {
  26. final authProvider = Provider.of<AuthProvider>(context);
  27. return Scaffold(
  28. appBar: AppBar(
  29. title: const Text('登录'),
  30. ),
  31. body: SingleChildScrollView(
  32. child: Padding(
  33. padding: const EdgeInsets.all(24.0),
  34. child: Form(
  35. key: _formKey,
  36. child: Column(
  37. crossAxisAlignment: CrossAxisAlignment.start,
  38. children: [
  39. const SizedBox(height: 40),
  40. const Center(
  41. child: Text(
  42. '欢迎回来',
  43. style: TextStyle(
  44. fontSize: 28,
  45. fontWeight: FontWeight.bold,
  46. ),
  47. ),
  48. ),
  49. const SizedBox(height: 8),
  50. const Center(
  51. child: Text(
  52. '请输入您的账号信息',
  53. style: TextStyle(
  54. fontSize: 16,
  55. color: Colors.grey,
  56. ),
  57. ),
  58. ),
  59. const SizedBox(height: 40),
  60. AppTextField(
  61. controller: _emailController, // 改为username
  62. labelText: '用户名',
  63. hintText: '请输入用户名',
  64. prefixIcon: const Icon(Icons.person_outline),
  65. validator: (value) {
  66. if (value == null || value.isEmpty) {
  67. return '请输入用户名';
  68. }
  69. return null;
  70. },
  71. ),
  72. const SizedBox(height: 20),
  73. AppTextField(
  74. controller: _passwordController,
  75. labelText: '密码',
  76. hintText: '请输入密码',
  77. obscureText: true,
  78. prefixIcon: const Icon(Icons.lock_outline),
  79. validator: (value) {
  80. if (value == null || value.isEmpty) {
  81. return '请输入密码';
  82. }
  83. if (value.length < 6) {
  84. return '密码至少需要6位字符';
  85. }
  86. return null;
  87. },
  88. ),
  89. const SizedBox(height: 30),
  90. if (authProvider.error != null)
  91. Padding(
  92. padding: const EdgeInsets.only(bottom: 16),
  93. child: Text(
  94. authProvider.error!,
  95. style: const TextStyle(
  96. color: Colors.red,
  97. fontSize: 14,
  98. ),
  99. ),
  100. ),
  101. if (authProvider.isLoading)
  102. const LoadingIndicator()
  103. else
  104. AppButton(
  105. text: '登录',
  106. onPressed: () async {
  107. if (_formKey.currentState!.validate()) {
  108. await authProvider.login(
  109. _emailController.text.trim(),
  110. _passwordController.text,
  111. );
  112. if (authProvider.isAuthenticated) {
  113. widget.onSuccess?.call();
  114. Navigator.of(context).pushReplacementNamed(RouteConstants.home);
  115. }
  116. }
  117. },
  118. ),
  119. const SizedBox(height: 20),
  120. Center(
  121. child: TextButton(
  122. onPressed: () {
  123. Navigator.of(context).pushNamed(RouteConstants.register);
  124. },
  125. child: const Text(
  126. '还没有账号?立即注册',
  127. style: TextStyle(
  128. fontSize: 14,
  129. color: Colors.blue,
  130. ),
  131. ),
  132. ),
  133. ),
  134. const SizedBox(height: 30),
  135. const Row(
  136. children: [
  137. Expanded(child: Divider()),
  138. Padding(
  139. padding: EdgeInsets.symmetric(horizontal: 16),
  140. child: Text('或'),
  141. ),
  142. Expanded(child: Divider()),
  143. ],
  144. ),
  145. const SizedBox(height: 20),
  146. Row(
  147. mainAxisAlignment: MainAxisAlignment.center,
  148. children: [
  149. IconButton(
  150. onPressed: () {},
  151. icon: Container(
  152. padding: const EdgeInsets.all(10),
  153. decoration: BoxDecoration(
  154. color: Colors.grey[100],
  155. borderRadius: BorderRadius.circular(50),
  156. ),
  157. child: const Icon(Icons.wechat, color: Colors.green),
  158. ),
  159. ),
  160. IconButton(
  161. onPressed: () {},
  162. icon: Container(
  163. padding: const EdgeInsets.all(10),
  164. decoration: BoxDecoration(
  165. color: Colors.grey[100],
  166. borderRadius: BorderRadius.circular(50),
  167. ),
  168. child: const Icon(Icons.wechat, color: Colors.blue),
  169. ),
  170. ),
  171. ],
  172. ),
  173. ],
  174. ),
  175. ),
  176. ),
  177. ),
  178. );
  179. }
  180. }