138 lines
4.1 KiB
Dart
138 lines
4.1 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'story_detail_page.dart';
|
|
|
|
class StoryLoadingPage extends StatefulWidget {
|
|
const StoryLoadingPage({super.key});
|
|
|
|
@override
|
|
State<StoryLoadingPage> createState() => _StoryLoadingPageState();
|
|
}
|
|
|
|
class _StoryLoadingPageState extends State<StoryLoadingPage>
|
|
with SingleTickerProviderStateMixin {
|
|
double _progress = 0.0;
|
|
String _loadingText = "构思故事中...";
|
|
final List<Map<String, dynamic>> _milestones = [
|
|
{'pct': 0.2, 'text': "正在收集灵感碎片..."},
|
|
{'pct': 0.5, 'text': "正在往故事里撒魔法粉..."},
|
|
{'pct': 0.8, 'text': "正在编制最后的魔法..."},
|
|
{'pct': 0.98, 'text': "大功告成！"},
|
|
];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_startLoading();
|
|
}
|
|
|
|
void _startLoading() {
|
|
// Total duration approx 3.5s (match Web 35ms * 100 steps)
|
|
Timer.periodic(const Duration(milliseconds: 35), (timer) {
|
|
if (!mounted) {
|
|
timer.cancel();
|
|
return;
|
|
}
|
|
|
|
setState(() {
|
|
_progress += 0.01;
|
|
// Check text updates
|
|
for (var m in _milestones) {
|
|
if ((_progress - m['pct'] as double).abs() < 0.01) {
|
|
_loadingText = m['text'] as String;
|
|
}
|
|
}
|
|
});
|
|
|
|
if (_progress >= 1.0) {
|
|
timer.cancel();
|
|
_navigateToDetail();
|
|
}
|
|
});
|
|
}
|
|
|
|
void _navigateToDetail() async {
|
|
// Use push instead of pushReplacement to properly return the result
|
|
final result = await Navigator.of(context).push<String>(
|
|
MaterialPageRoute(
|
|
builder: (context) => const StoryDetailPage(
|
|
mode: StoryMode.generated,
|
|
story: {
|
|
'title': '新生成的冒险',
|
|
'content': '在遥远的未来，勇敢的宇航员发现了一个神秘的星球...\n(这是生成的示例故事内容)',
|
|
},
|
|
),
|
|
),
|
|
);
|
|
|
|
// Pass the result back to DeviceControlPage
|
|
if (mounted) {
|
|
Navigator.of(context).pop(result);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFFFDF9F3),
|
|
body: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Image
|
|
Image.asset(
|
|
'assets/www/kapi_writing.png',
|
|
width: 200,
|
|
height: 200, // Approximate
|
|
errorBuilder: (c, e, s) => const Icon(
|
|
Icons.edit_note,
|
|
size: 100,
|
|
color: Color(0xFFD1D5DB),
|
|
),
|
|
),
|
|
const SizedBox(height: 32),
|
|
|
|
// Text - HTML: font-size 18px, color #4B2404 (dark brown)
|
|
Text(
|
|
_loadingText,
|
|
style: const TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 18, // HTML: 18px
|
|
color: Color(0xFF4B2404), // HTML: dark chocolate brown
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// Progress Bar - HTML: height 12px, max-width 280px
|
|
// Track: rgba(201,150,114,0.2), Fill: gradient #ECCFA8 to #C99672
|
|
Container(
|
|
width: 280, // HTML: max-width 280px
|
|
height: 12, // HTML: height 12px
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFC99672).withOpacity(0.2), // Warm sand
|
|
borderRadius: BorderRadius.circular(6), // HTML: 6px
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(6),
|
|
child: FractionallySizedBox(
|
|
alignment: Alignment.centerLeft,
|
|
widthFactor: _progress.clamp(0.0, 1.0),
|
|
child: Container(
|
|
decoration: const BoxDecoration(
|
|
// HTML: gradient #ECCFA8 to #C99672
|
|
gradient: LinearGradient(
|
|
colors: [Color(0xFFECCFA8), Color(0xFFC99672)],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|