ステッパー (Stepper) は、進捗状況を視覚的に表示するためのUIコンポーネントです。本記事では、Flutterを使用してシンプルかつ柔軟にカスタマイズ可能なステッパーを作成する方法を紹介します。
以下のコードを題材に、実際にどのようにシンプルなステッパーを構築したかを解説していきます。
完成イメージ
このステッパーは以下のように動作します：
- 現在のステップ (
currentStep) に応じて丸数字や線の色が変わる。 - 丸数字は現在の進捗を表し、丸と丸の間にある線も進捗状況を示す。
- ステップの数 (
totalSteps) と線の幅 (lineWidth) を柔軟にカスタマイズ可能。
コードの全体像
以下が今回作成したシンプルなステッパーのコードです。
ステッパー本体のコード
import 'package:flutter/material.dart'; /// ステッパー class HorizontalStepper extends StatelessWidget { final int currentStep; final int totalSteps; final double lineWidth; const HorizontalStepper({ super.key, required this.currentStep, required this.totalSteps, required this.lineWidth, }); @override Widget build(BuildContext context) { // 丸数字の直径 const circleDiameter = 32; // 完了色 final Color completedColor = Colors.green; // 未完了色 final Color incompleteColor = Colors.grey.shade300; return Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( child: Container( height: 4, color: completedColor, ), ), Row( mainAxisSize: MainAxisSize.min, children: List.generate(totalSteps, (index) { final isCompletedCircle = index < currentStep; final isCompletedLine = index < currentStep - 1; return Row( children: [ // ステップの丸数字 CircleAvatar( radius: circleDiameter / 2, backgroundColor: isCompletedCircle ? completedColor : incompleteColor, child: Text( '${index + 1}', style: TextStyle( color: isCompletedCircle ? Colors.white : Colors.black, ), ), ), // 丸数字と丸数字の間の線 if (index < totalSteps - 1) Container( width: lineWidth, height: 4, color: isCompletedLine ? completedColor : incompleteColor, ), ], ); }), ), Expanded( child: Container( height: 4, color: incompleteColor, ), ), ], ); } }
ステッパーの使用例
次に、このステッパーを使用する簡単な例を示します。
import 'package:flutter/material.dart'; /// ステッパー class StepperExamplePage extends StatefulWidget { const StepperExamplePage({super.key}); @override StepperExamplePageState createState() => StepperExamplePageState(); } class StepperExamplePageState extends State<StepperExamplePage> { int currentStep = 1; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('ステッパー')), body: Column( children: [ Padding( padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8), child: HorizontalStepper( currentStep: currentStep, totalSteps: 5, lineWidth: 32, ), ), Expanded( child: Center( child: ElevatedButton( onPressed: () { setState(() { if (currentStep < 5) currentStep++; }); }, child: Text('次へ進む'), ), ), ), ], ), ); } }
コードの解説
1. 丸数字と線の描画
CircleAvatar(
radius: circleDiameter / 2,
backgroundColor: isCompletedCircle ? completedColor : incompleteColor,
child: Text(
'${index + 1}',
style: TextStyle(
color: isCompletedCircle ? Colors.white : Colors.black,
),
),
),
この部分で丸数字を描画しています。
- 完了したステップはcompletedColor（緑）で塗りつぶされ、文字色は白になります。
- 未完了のステップはincompleteColor（グレー）で塗りつぶされ、文字色は黒です。
丸数字と丸数字の間には、以下のコードで線を描画します：
if (index < totalSteps - 1)
Container(
width: lineWidth,
height: 4,
color: isCompletedLine ? completedColor : incompleteColor,
),
- 線の幅はプロパティ
lineWidthから渡されます。 - 線の色は
isCompletedLineの状態によって切り替わります。
2. 使用例でのcurrentStepの更新
ボタンを押すたびにcurrentStepがインクリメントされます。この値によって、ステッパーの進捗が動的に更新されます。
onPressed: () {
setState(() {
if (currentStep < 5) currentStep++;
});
},
このように、ステッパーは簡単に進捗を反映できるようになっています。
カスタマイズのポイント
色のカスタマイズ
completedColorやincompleteColorを変更することで、ステッパーの見た目を自由に調整できます。
線や丸数字のサイズ
- 丸数字の直径は
circleDiameterで簡単に変更できます。 - 線の幅はプロパティ
lineWidthで指定可能です。
- 丸数字の直径は
ステップ数
totalStepsを調整するだけで、ステップ数を自由に設定できます。
まとめ
今回は、Flutterを使ってシンプルなステッパーを作成しました。このコンポーネントは、アプリの進捗状況を視覚的に表示するのに非常に役立ちます。コードはカスタマイズしやすく、色やサイズ、ステップ数を柔軟に変更できるよう設計されています。
あなたのアプリにもぜひ取り入れてみてください！
