67 lines
1.8 KiB
Dart
67 lines
1.8 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../theme/app_theme.dart';
|
|
|
|
/// ドット・ステッパー型のステップインジケーター
|
|
///
|
|
/// Kintone の申込フローで実績のあるデザインパターンを採用
|
|
/// 数字表記なしで、ドットと線だけで進捗を直感的に表現
|
|
class StepIndicator extends StatelessWidget {
|
|
final int currentStep; // 1, 2, 3
|
|
final int totalSteps; // 通常は 3
|
|
|
|
const StepIndicator({
|
|
super.key,
|
|
required this.currentStep,
|
|
this.totalSteps = 3,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: List.generate(totalSteps * 2 - 1, (index) {
|
|
// 偶数インデックス: ドット
|
|
// 奇数インデックス: 連結線
|
|
if (index.isEven) {
|
|
final stepNumber = index ~/ 2 + 1;
|
|
final isActive = stepNumber <= currentStep;
|
|
return _buildDot(isActive);
|
|
} else {
|
|
return _buildLine();
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
|
|
/// ドット (円) を生成
|
|
///
|
|
/// - 完了済み: Posimai Blue で塗りつぶし
|
|
/// - 未完了: グレーの枠線のみ
|
|
Widget _buildDot(bool isActive) {
|
|
return Container(
|
|
width: 12,
|
|
height: 12,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: isActive ? AppTheme.posimaiBlue : Colors.transparent,
|
|
border: Border.all(
|
|
color: isActive ? AppTheme.posimaiBlue : Colors.grey[400]!,
|
|
width: 2,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 連結線を生成
|
|
///
|
|
/// ドット同士を繋ぐ細い線
|
|
Widget _buildLine() {
|
|
return Container(
|
|
width: 20,
|
|
height: 2,
|
|
color: Colors.grey[400],
|
|
margin: const EdgeInsets.symmetric(horizontal: 4),
|
|
);
|
|
}
|
|
}
|