# Flutter Material ComponentsのStepperに進捗表示を追加する方法

## 目次

1. はじめに

2. Stepperとは

3. Stepperに進捗表示を追加する方法

   - 3-1. 基本的なStepperの構造

   - 3-2. カスタム進捗の作成

   - 3-3. 進捗表示を組み込む

4. コード例と視覚化

   - 4-1. 基本的なコード例

   - 4-2. 進捗表示のコード例

5. 結論

## 1. はじめに

Flutterは、クロスプラットフォームの開発を容易にするための強力なフレームワークです。その一部として提供されているMaterial Componentsの中で、Stepperはユーザーインターフェースの中でも特に複雑な情報を段階的に表示するためのウィジェットとして役立ちます。本記事では、FlutterのStepperに進捗表示を追加する方法について具体的に説明します。

## 2. Stepperとは

Stepperは、ユーザージャーニーを段階的にガイドするためのUIコンポーネントです。各ステップには、タイトル、コンテンツ、アイコンなどが含まれ、ユーザーがどこにいるのか、そして次にどのステップに進むのかを明確に示します。

## 3. Stepperに進捗表示を追加する方法

### 3-1. 基本的なStepperの構造

```

Stepper(

  steps: [

    Step(

      title: Text('ステップ1'),

      content: Text('ここにコンテンツを追加します'),

    ),

    Step(

      title: Text('ステップ2'),

      content: Text('ここにコンテンツを追加します'),

    ),

    Step(

      title: Text('ステップ3'),

      content: Text('ここにコンテンツを追加します'),

    ),

  ],

)

```

### 3-2. カスタム進捗の作成

進捗を視覚的に表現するために、LinearProgressIndicatorやCircularProgressIndicatorを使用することができます。それをStepperの上部または下部に配置して、ユーザーに進度を示します。

### 3-3. 進捗表示を組み込む

以下は進捗を示すWidgetをStepper内に追加する方法です。

```dart

class StepperWithProgress extends StatelessWidget {

  final int _currentStep = 0;

  @override

  Widget build(BuildContext context) {

    return Column(

      children: [

        LinearProgressIndicator(

          value: (_currentStep + 1) / 3, // 3は総ステップ数を示す

        ),

        Stepper(

          currentStep: _currentStep,

          steps: [

            Step(

              title: Text('ステップ1'),

              content: Text('詳細情報1'),

              isActive: _currentStep >= 0,

            ),

            Step(

              title: Text('ステップ2'),

              content: Text('詳細情報2'),

              isActive: _currentStep >= 1,

            ),

            Step(

              title: Text('ステップ3'),

              content: Text('詳細情報3'),

              isActive: _currentStep >= 2,

            ),

          ],

        ),

      ],

    );

  }

}

```

## 4. コード例と視覚化

### 4-1. 基本的なコード例

基本的なStepperのコード例を以下に示します。

```dart

Stepper(

  steps: [

    Step(

      title: Text('Step 1'),

      content: Text('This is step 1'),

    ),

    Step(

      title: Text('Step 2'),

      content: Text('This is step 2'),

    ),

    Step(

      title: Text('Step 3'),

      content: Text('This is step 3'),

    ),

  ],

  currentStep: 0, // 現在のステップを示す

)

```

### 4-2. 進捗表示のコード例

進捗を示すLinearProgressIndicatorを使った例です。

```dart

class StepProgressIndicatorExample extends StatefulWidget {

  @override

  _StepProgressIndicatorExampleState createState() => _StepProgressIndicatorExampleState();

}

class _StepProgressIndicatorExampleState extends State<StepProgressIndicatorExample> {

  int _currentStep = 0;

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Stepper with Progress'),

      ),

      body: Column(

        children: <Widget>[

          LinearProgressIndicator(

            value: (_currentStep + 1) / 3,  // 現在のステップをもとに進捗を計算

          ),

          Stepper(

            steps: [

              Step(

                title: Text('Step 1'),

                content: Text('Step 1 Content'),

              ),

              Step(

                title: Text('Step 2'),

                content: Text('Step 2 Content'),

              ),

              Step(

                title: Text('Step 3'),

                content: Text('Step 3 Content'),

              ),

            ],

            currentStep: _currentStep,

            onStepContinue: () {

              if (_currentStep < 2) {

                setState(() => _currentStep += 1);

              }

            },

            onStepCancel: () {

              if (_currentStep > 0) {

                setState(() => _currentStep -= 1);

              }

            },

          ),

        ],

      ),

    );

  }

}

```

## 5. 結論

StepperはFlutterにおいて非常に便利なUIコンポーネントであり、その上に進捗表示を追加することで、ユーザーエクスペリエンスを向上させることができます。進捗インジケータを使うことでユーザーが現在の進行状況を確認しやすくし、複数のステップを跨ぐプロセスを明確にします。このような小さな工夫が、アプリケーション全体の使いやすさを大きく向上させることができます。

Flutter Material ComponentsのStepperに進捗表示を追加する方法

目次

続きを読むには単価診断を受けてください（30秒）