Flutter Stepper Vertical - Display content at left side and stepper line should display at right side

Question

I am using flutter stepper. In the vertical view, Contents are showing at right side to the stepper line. But I want to display the contents at left side and the stepper line at right side.

Below is sample code.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStepper(),
    );
  }
}

class MyStepper extends StatefulWidget {
  @override
  _MyStepperState createState() => _MyStepperState();
}

class _MyStepperState extends State<MyStepper> {
  int _currentStep = 0;


  List<Step> steps = [
    Step(
      title: Text('Step 1'),
      content: Column(
        children: [
          TextField(
            controller:TextEditingController(),
            decoration: InputDecoration(labelText: 'Username'),
          ),
          TextField(
            controller: TextEditingController(),
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
          ),
        ],
      ),
      isActive: true,
    ),
    Step(
      title: Text('Step 2'),
      content: Text('This is the content of Step 2'),
      isActive: false,
    ),
    Step(
      title: Text('Step 3'),
      content: Text('This is the content of Step 3'),
      isActive: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Stepper Example'),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: () {
          setState(() {
            if (_currentStep < steps.length - 1) {
              _currentStep += 1;
            }
          });
        },
        onStepCancel: () {
          setState(() {
            if (_currentStep > 0) {
              _currentStep -= 1;
            }
          });
        },
        steps: steps,
      ),
    );
  }
}

Below are the current and expected output images.

Current Output

Expected Output

Provide a solution.

Answer 1

since I had problem with aligning the stepper to the right side, I fixed it by first wrapping the stepper inside a Directionality and then wrap them in an Expanded. Here is simple example just to show that it can be aligned to the right but in your case you can use the textdirection.ltr.

class TestStepper extends StatefulWidget {
  const TestStepper({super.key});

  @override
  State<TestStepper> createState() => _TestStepperState();
}

class _TestStepperState extends State<TestStepper> {
  int moving = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Expanded(
        child: Directionality(
          textDirection: TextDirection.rtl,
          child: Stepper(
            currentStep: moving,
            onStepContinue: () {
              setState(() {
                moving++;
              });
            },
            steps: const [
              Step(
                title: Text('Step 1 title'),
                content: Text('Step 1 content'),
              ),
              Step(title: Text('Step 2 title'), content: Text('Step 2 content'))
            ],
          ),
        ),
      ),
    );
  }
}