feat(apps): establish shared mobile design system
This commit is contained in:
@@ -17,6 +17,7 @@ class _LoginPageState extends State<LoginPage> {
|
||||
final _password = TextEditingController();
|
||||
bool _submitting = false;
|
||||
String? _error;
|
||||
bool _obscurePassword = true;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
@@ -44,28 +45,43 @@ class _LoginPageState extends State<LoginPage> {
|
||||
body: SafeArea(
|
||||
child: Center(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
padding: const EdgeInsets.fromLTRB(24, 32, 24, 24),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 420),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.health_and_safety_rounded,
|
||||
size: 68,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
Align(
|
||||
child: Container(
|
||||
width: 72,
|
||||
height: 72,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primaryContainer,
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.health_and_safety_rounded,
|
||||
size: 38,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
semanticLabel: '瓶安芯安全标识',
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
const SizedBox(height: 24),
|
||||
Text(
|
||||
'瓶安芯',
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.w900),
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text('安全服务与生活采购', textAlign: TextAlign.center),
|
||||
const SizedBox(height: 36),
|
||||
Text(
|
||||
'安全服务与生活采购',
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 40),
|
||||
TextField(
|
||||
controller: _phone,
|
||||
keyboardType: TextInputType.phone,
|
||||
@@ -78,19 +94,50 @@ class _LoginPageState extends State<LoginPage> {
|
||||
const SizedBox(height: 14),
|
||||
TextField(
|
||||
controller: _password,
|
||||
obscureText: true,
|
||||
obscureText: _obscurePassword,
|
||||
autofillHints: const [AutofillHints.password],
|
||||
decoration: const InputDecoration(
|
||||
onSubmitted: (_) => _submitting ? null : _login(),
|
||||
decoration: InputDecoration(
|
||||
labelText: '密码',
|
||||
prefixIcon: Icon(Icons.lock_outline),
|
||||
prefixIcon: const Icon(Icons.lock_outline),
|
||||
suffixIcon: IconButton(
|
||||
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
|
||||
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
|
||||
icon: Icon(
|
||||
_obscurePassword
|
||||
? Icons.visibility_outlined
|
||||
: Icons.visibility_off_outlined,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (_error != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(_error!, style: TextStyle(color: Theme.of(context).colorScheme.error)),
|
||||
Semantics(
|
||||
liveRegion: true,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 20,
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
_error!,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 20),
|
||||
ElevatedButton(
|
||||
const SizedBox(height: 24),
|
||||
FilledButton(
|
||||
onPressed: _submitting ? null : _login,
|
||||
child: _submitting
|
||||
? const SizedBox.square(
|
||||
@@ -103,11 +150,13 @@ class _LoginPageState extends State<LoginPage> {
|
||||
onPressed: () => context.push('/register'),
|
||||
child: const Text('首次使用?注册账号'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
const Text(
|
||||
'登录即表示同意用户协议和隐私政策',
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'登录即表示你已阅读并同意《用户协议》和《隐私政策》',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(fontSize: 12),
|
||||
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -21,6 +21,7 @@ class _RegisterPageState extends State<RegisterPage> {
|
||||
String _requestIdentity = '';
|
||||
bool _busy = false;
|
||||
String? _message;
|
||||
bool _obscurePassword = true;
|
||||
|
||||
Future<void> _sendCode() async {
|
||||
try {
|
||||
@@ -70,53 +71,103 @@ class _RegisterPageState extends State<RegisterPage> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
appBar: AppBar(title: const Text('注册用户')),
|
||||
body: ListView(
|
||||
padding: const EdgeInsets.all(20),
|
||||
children: [
|
||||
TextField(
|
||||
controller: _phone,
|
||||
keyboardType: TextInputType.phone,
|
||||
decoration: const InputDecoration(labelText: '手机号'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextField(
|
||||
controller: _name,
|
||||
decoration: const InputDecoration(labelText: '姓名'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextField(
|
||||
controller: _address,
|
||||
decoration: const InputDecoration(labelText: '服务地址'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextField(
|
||||
controller: _password,
|
||||
obscureText: true,
|
||||
decoration: const InputDecoration(labelText: '登录密码'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _code,
|
||||
keyboardType: TextInputType.number,
|
||||
decoration: const InputDecoration(labelText: '验证码'),
|
||||
appBar: AppBar(title: const Text('创建账号')),
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
child: ListView(
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
|
||||
children: [
|
||||
Text('开始使用瓶安芯', style: Theme.of(context).textTheme.headlineSmall),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'填写真实服务信息,便于校验所属服务区域。',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
TextField(
|
||||
controller: _phone,
|
||||
keyboardType: TextInputType.phone,
|
||||
autofillHints: const [AutofillHints.telephoneNumber],
|
||||
decoration: const InputDecoration(
|
||||
labelText: '手机号',
|
||||
prefixIcon: Icon(Icons.phone_outlined),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextField(
|
||||
controller: _name,
|
||||
autofillHints: const [AutofillHints.name],
|
||||
decoration: const InputDecoration(
|
||||
labelText: '姓名',
|
||||
prefixIcon: Icon(Icons.person_outline),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextField(
|
||||
controller: _address,
|
||||
autofillHints: const [AutofillHints.fullStreetAddress],
|
||||
decoration: const InputDecoration(
|
||||
labelText: '服务地址',
|
||||
helperText: '用于匹配气站与配送服务范围',
|
||||
prefixIcon: Icon(Icons.location_on_outlined),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextField(
|
||||
controller: _password,
|
||||
obscureText: _obscurePassword,
|
||||
autofillHints: const [AutofillHints.newPassword],
|
||||
decoration: InputDecoration(
|
||||
labelText: '登录密码',
|
||||
prefixIcon: const Icon(Icons.lock_outline),
|
||||
suffixIcon: IconButton(
|
||||
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
|
||||
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
|
||||
icon: Icon(
|
||||
_obscurePassword ? Icons.visibility_outlined : Icons.visibility_off_outlined,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
OutlinedButton(onPressed: _sendCode, child: const Text('获取验证码')),
|
||||
],
|
||||
),
|
||||
if (_message != null)
|
||||
Padding(padding: const EdgeInsets.only(top: 12), child: Text(_message!)),
|
||||
const SizedBox(height: 24),
|
||||
ElevatedButton(
|
||||
onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
|
||||
child: const Text('创建账号'),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _code,
|
||||
keyboardType: TextInputType.number,
|
||||
decoration: const InputDecoration(labelText: '验证码'),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: OutlinedButton(
|
||||
onPressed: _busy ? null : _sendCode,
|
||||
child: const Text('获取验证码'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (_message != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 12),
|
||||
child: Semantics(liveRegion: true, child: Text(_message!)),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
FilledButton(
|
||||
onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
|
||||
child: _busy
|
||||
? const SizedBox.square(
|
||||
dimension: 22,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: const Text('创建账号'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user