feat: app 端 ui 设计完成
This commit is contained in:
liqupan
231
wei_ai_app/lib/screens/interaction/interaction_screen.dart
Normal file
231
wei_ai_app/lib/screens/interaction/interaction_screen.dart
Normal file
@@ -0,0 +1,231 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons/lucide_icons.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import '../../models/character.dart';
|
||||
import '../../models/message.dart';
|
||||
import '../../data/mock_data.dart';
|
||||
import 'voice_mode_overlay.dart';
|
||||
|
||||
class InteractionScreen extends StatefulWidget {
|
||||
final String characterId;
|
||||
|
||||
const InteractionScreen({super.key, required this.characterId});
|
||||
|
||||
@override
|
||||
State<InteractionScreen> createState() => _InteractionScreenState();
|
||||
}
|
||||
|
||||
class _InteractionScreenState extends State<InteractionScreen> {
|
||||
late Character _character;
|
||||
final List<Message> _messages = List.from(mockMessages);
|
||||
final TextEditingController _controller = TextEditingController();
|
||||
bool _isVoiceMode = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_character = mockCharacters.firstWhere(
|
||||
(c) => c.id == widget.characterId,
|
||||
orElse: () => mockCharacters.first,
|
||||
);
|
||||
}
|
||||
|
||||
void _sendMessage() {
|
||||
if (_controller.text.trim().isEmpty) return;
|
||||
|
||||
final newUserMsg = Message(
|
||||
id: DateTime.now().toString(),
|
||||
text: _controller.text,
|
||||
sender: MessageSender.user,
|
||||
type: MessageType.text,
|
||||
timestamp: DateTime.now()
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_messages.add(newUserMsg);
|
||||
_controller.clear();
|
||||
});
|
||||
|
||||
// Mock AI Reply
|
||||
Future.delayed(const Duration(seconds: 2), () {
|
||||
if (!mounted) return;
|
||||
final newAiMsg = Message(
|
||||
id: DateTime.now().toString(),
|
||||
text: '我收到了你的信号: "${newUserMsg.text}"。这让我感觉很好...',
|
||||
sender: MessageSender.ai,
|
||||
type: MessageType.text,
|
||||
timestamp: DateTime.now()
|
||||
);
|
||||
setState(() {
|
||||
_messages.add(newAiMsg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
Scaffold(
|
||||
extendBodyBehindAppBar: true,
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
flexibleSpace: ClipRRect(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
|
||||
child: Container(color: Colors.black.withOpacity(0.5)),
|
||||
),
|
||||
),
|
||||
leading: IconButton(
|
||||
icon: const Icon(LucideIcons.arrowLeft, color: Colors.white),
|
||||
onPressed: () => context.pop(),
|
||||
),
|
||||
title: Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
backgroundImage: NetworkImage(_character.avatar),
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(_character.name, style: const TextStyle(fontSize: 16, color: Colors.white)),
|
||||
Row(
|
||||
children: [
|
||||
Container(width: 6, height: 6, decoration: const BoxDecoration(color: Color(0xFF10B981), shape: BoxShape.circle)),
|
||||
const SizedBox(width: 4),
|
||||
Text('Online', style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.7))),
|
||||
],
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
IconButton(icon: const Icon(LucideIcons.moreVertical, color: Colors.white), onPressed: () {}),
|
||||
],
|
||||
),
|
||||
body: Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFF2E1065),
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFF2E1065), Color(0xFF0F172A)],
|
||||
)
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ListView.separated(
|
||||
padding: const EdgeInsets.only(top: 120, bottom: 20, left: 16, right: 16),
|
||||
itemCount: _messages.length,
|
||||
separatorBuilder: (_, __) => const SizedBox(height: 16),
|
||||
itemBuilder: (context, index) {
|
||||
final msg = _messages[index];
|
||||
final isMe = msg.sender == MessageSender.user;
|
||||
return Align(
|
||||
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: Container(
|
||||
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: isMe ? const Color(0xFFA855F7) : Colors.white.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: const Radius.circular(16),
|
||||
topRight: const Radius.circular(16),
|
||||
bottomLeft: isMe ? const Radius.circular(16) : const Radius.circular(2),
|
||||
bottomRight: isMe ? const Radius.circular(2) : const Radius.circular(16),
|
||||
),
|
||||
border: Border.all(color: Colors.white.withOpacity(0.1)),
|
||||
),
|
||||
child: Text(
|
||||
msg.text,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 14, height: 1.4),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
// Input Area
|
||||
ClipRRect(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(
|
||||
bottom: MediaQuery.of(context).padding.bottom + 10,
|
||||
top: 10,
|
||||
left: 16,
|
||||
right: 16
|
||||
),
|
||||
color: Colors.black.withOpacity(0.4),
|
||||
child: Row(
|
||||
children: [
|
||||
GestureDetector(
|
||||
onTap: () => setState(() => _isVoiceMode = true),
|
||||
child: Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.white.withOpacity(0.1),
|
||||
border: Border.all(color: Colors.white.withOpacity(0.1))
|
||||
),
|
||||
child: const Icon(LucideIcons.phone, color: Colors.white, size: 20),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _controller,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
decoration: InputDecoration(
|
||||
filled: true,
|
||||
fillColor: Colors.white.withOpacity(0.05),
|
||||
hintText: 'Type a message...',
|
||||
hintStyle: TextStyle(color: Colors.white.withOpacity(0.3)),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
GestureDetector(
|
||||
onTap: _sendMessage,
|
||||
child: Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: LinearGradient(colors: [Color(0xFFA855F7), Color(0xFFEC4899)])
|
||||
),
|
||||
child: const Icon(LucideIcons.send, color: Colors.white, size: 20),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
), // Column
|
||||
), // Container
|
||||
), // Scaffold
|
||||
|
||||
if (_isVoiceMode)
|
||||
VoiceModeOverlay(
|
||||
character: _character,
|
||||
onClose: () => setState(() => _isVoiceMode = false),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
263
wei_ai_app/lib/screens/interaction/voice_mode_overlay.dart
Normal file
263
wei_ai_app/lib/screens/interaction/voice_mode_overlay.dart
Normal file
@@ -0,0 +1,263 @@
|
||||
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons/lucide_icons.dart';
|
||||
import '../../models/character.dart';
|
||||
|
||||
class VoiceModeOverlay extends StatefulWidget {
|
||||
final Character character;
|
||||
final VoidCallback onClose;
|
||||
|
||||
const VoiceModeOverlay({
|
||||
super.key,
|
||||
required this.character,
|
||||
required this.onClose,
|
||||
});
|
||||
|
||||
@override
|
||||
State<VoiceModeOverlay> createState() => _VoiceModeOverlayState();
|
||||
}
|
||||
|
||||
class _VoiceModeOverlayState extends State<VoiceModeOverlay> with SingleTickerProviderStateMixin {
|
||||
bool _isMicMuted = false;
|
||||
bool _isSpeakerOn = true;
|
||||
late AnimationController _controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
vsync: this, duration: const Duration(seconds: 2))
|
||||
..repeat(reverse: true);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Positioned.fill(
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: Container(
|
||||
color: const Color(0xFF2E1065),
|
||||
child: Stack(
|
||||
children: [
|
||||
// Background Image with Blur
|
||||
Positioned.fill(
|
||||
child: Image.network(
|
||||
widget.character.avatar,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Container(color: const Color(0xFF2E1065));
|
||||
},
|
||||
),
|
||||
),
|
||||
Positioned.fill(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||
child: Container(
|
||||
color: const Color(0xFF2E1065).withOpacity(0.8),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Main Content
|
||||
SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Header
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: widget.onClose,
|
||||
icon: const Icon(LucideIcons.chevronLeft, color: Colors.white70),
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: Colors.white.withOpacity(0.1),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const Spacer(),
|
||||
|
||||
// Character Info & Status
|
||||
Column(
|
||||
children: [
|
||||
Text(
|
||||
widget.character.name,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
_isMicMuted ? 'Mic Muted' : 'Listening...',
|
||||
style: TextStyle(
|
||||
color: Colors.white.withOpacity(0.6),
|
||||
fontSize: 12,
|
||||
letterSpacing: 2,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 48),
|
||||
|
||||
// Avatar pulsing animation
|
||||
SizedBox(
|
||||
width: 200,
|
||||
height: 200,
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
if (!_isMicMuted)
|
||||
AnimatedBuilder(
|
||||
animation: _controller,
|
||||
builder: (context, child) {
|
||||
return Container(
|
||||
width: 200 * (0.8 + 0.2 * _controller.value),
|
||||
height: 200 * (0.8 + 0.2 * _controller.value),
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: Colors.white.withOpacity(0.2 * (1 - _controller.value)),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
Container(
|
||||
width: 160,
|
||||
height: 160,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: Colors.white.withOpacity(0.3), width: 2),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFFC084FC).withOpacity(0.5),
|
||||
blurRadius: 30,
|
||||
spreadRadius: 0
|
||||
)
|
||||
],
|
||||
image: DecorationImage(
|
||||
image: NetworkImage(widget.character.avatar),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const Spacer(),
|
||||
|
||||
// Waveform (Simulated)
|
||||
SizedBox(
|
||||
height: 32,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: List.generate(5, (index) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 2.0),
|
||||
child: AnimatedBuilder(
|
||||
animation: _controller,
|
||||
builder: (context, child) {
|
||||
return Container(
|
||||
width: 4,
|
||||
height: _isMicMuted
|
||||
? 4
|
||||
: 10 + (20 * (index % 2 == 0 ? _controller.value : 1 - _controller.value)),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withOpacity(_isMicMuted ? 0.2 : 0.8),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
);
|
||||
}
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 48),
|
||||
|
||||
// Bottom Controls
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 48.0, vertical: 32.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Mic Toggle
|
||||
IconButton(
|
||||
onPressed: () => setState(() => _isMicMuted = !_isMicMuted),
|
||||
icon: Icon(_isMicMuted ? LucideIcons.micOff : LucideIcons.mic),
|
||||
iconSize: 24,
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: _isMicMuted
|
||||
? Colors.white
|
||||
: Colors.white.withOpacity(0.1),
|
||||
foregroundColor: _isMicMuted
|
||||
? const Color(0xFF2E1065)
|
||||
: Colors.white,
|
||||
padding: const EdgeInsets.all(16),
|
||||
minimumSize: const Size(64, 64),
|
||||
),
|
||||
),
|
||||
|
||||
// End Call
|
||||
IconButton(
|
||||
onPressed: widget.onClose,
|
||||
icon: const Icon(LucideIcons.phoneOff),
|
||||
iconSize: 32,
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: Colors.red,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.all(20),
|
||||
minimumSize: const Size(80, 80),
|
||||
),
|
||||
),
|
||||
|
||||
// Speaker Toggle
|
||||
IconButton(
|
||||
onPressed: () => setState(() => _isSpeakerOn = !_isSpeakerOn),
|
||||
icon: Icon(
|
||||
_isSpeakerOn ? LucideIcons.volume2 : LucideIcons.volumeX
|
||||
),
|
||||
iconSize: 24,
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: _isSpeakerOn
|
||||
? Colors.white.withOpacity(0.1)
|
||||
: Colors.white.withOpacity(0.05),
|
||||
foregroundColor: _isSpeakerOn
|
||||
? Colors.white
|
||||
: Colors.white.withOpacity(0.5),
|
||||
padding: const EdgeInsets.all(16),
|
||||
minimumSize: const Size(64, 64),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user