145 lines
3.9 KiB
Dart
145 lines
3.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:lucide_icons/lucide_icons.dart';
|
|
|
|
/// Contextual help icon that shows a bottom sheet with help content
|
|
///
|
|
/// Usage:
|
|
/// ```dart
|
|
/// ContextualHelpIcon(
|
|
/// title: 'レベルと称号について',
|
|
/// content: 'レベルの上げ方の説明...',
|
|
/// )
|
|
/// ```
|
|
class ContextualHelpIcon extends StatelessWidget {
|
|
final String title;
|
|
final String? content;
|
|
final Widget? customContent; // For complex help (tables, images)
|
|
|
|
const ContextualHelpIcon({
|
|
super.key,
|
|
required this.title,
|
|
this.content,
|
|
this.customContent,
|
|
}) : assert(content != null || customContent != null, 'Either content or customContent must be provided');
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return IconButton(
|
|
icon: Icon(
|
|
LucideIcons.helpCircle,
|
|
size: 18,
|
|
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.6),
|
|
),
|
|
tooltip: 'ヘルプを表示',
|
|
onPressed: () => _showHelpSheet(context),
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints(
|
|
minWidth: 32,
|
|
minHeight: 32,
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showHelpSheet(BuildContext context) {
|
|
showModalBottomSheet(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
shape: const RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
|
|
),
|
|
builder: (context) => DraggableScrollableSheet(
|
|
initialChildSize: 0.6,
|
|
minChildSize: 0.4,
|
|
maxChildSize: 0.9,
|
|
expand: false,
|
|
builder: (context, scrollController) => _HelpSheetContent(
|
|
title: title,
|
|
content: content,
|
|
customContent: customContent,
|
|
scrollController: scrollController,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _HelpSheetContent extends StatelessWidget {
|
|
final String title;
|
|
final String? content;
|
|
final Widget? customContent;
|
|
final ScrollController scrollController;
|
|
|
|
const _HelpSheetContent({
|
|
required this.title,
|
|
this.content,
|
|
this.customContent,
|
|
required this.scrollController,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(24),
|
|
child: ListView(
|
|
controller: scrollController,
|
|
children: [
|
|
// Drag handle
|
|
Center(
|
|
child: Container(
|
|
width: 40,
|
|
height: 4,
|
|
margin: const EdgeInsets.only(bottom: 16),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.2),
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Title
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
LucideIcons.helpCircle,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(
|
|
title,
|
|
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 16),
|
|
const Divider(),
|
|
const SizedBox(height: 16),
|
|
|
|
// Content
|
|
if (customContent != null)
|
|
customContent!
|
|
else if (content != null)
|
|
Text(
|
|
content!,
|
|
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
|
height: 1.6,
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 24),
|
|
|
|
// Close button
|
|
FilledButton.tonal(
|
|
onPressed: () => Navigator.pop(context),
|
|
child: const Text('閉じる'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|