Flutter Stepper标题Row的spaceBetween属性不生效问题排查

Hey there! Let's break down why your MainAxisAlignment.spaceBetween works for a regular Row but not for the one inside your Stepper's title, plus how to fix it.

Why This Happens #

The core issue is the default layout behavior of the Stepper component:

• A Stepper has a built-in layout with the circular step indicator on the left, and a dedicated container for the title on the right.
• This title container doesn’t automatically allow its child widget to fill the full available horizontal width. So your Row inside the title only shrinks to fit its own content—there’s no extra space to let spaceBetween push elements to opposite ends.
• Your standalone Row works because its parent (the Column) lets it expand to fill the full screen width, giving spaceBetween room to do its job.

The Fix #

All you need to do is force the Row in the Stepper’s title to take up the entire available width. Wrap the Row in a Container with width: double.infinity (this tells the Container to stretch as wide as its parent allows):

Step(
  title: GestureDetector(
    onTap: () {
      setState(() {});
    },
    // Wrap your Row in this Container to enforce full width
    child: Container(
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
              child: Text(
                  "Testing Title",
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.normal))),
          SizedBox(width: 10),
          ClipRRect(
            borderRadius: BorderRadius.circular(50),
            child: Material(
              child: InkWell(
                child: Padding(
                  padding: const EdgeInsets.all(5),
                  child: Icon(
                    Icons.edit, size: 20,
                  ),
                ),
                onTap: () {
                  setState(() {});
                },
              ),
            ),
          )
        ],
      ),
    ),
  ),
  content: Text("This is our first example."),
),

Quick Alternative #

If you prefer, you can use SizedBox.expand instead of the Container—it achieves the same full-width effect. The Container is just more flexible if you want to add padding, background color, or other styling later.

After making this change, your Row will stretch to fill the entire title area, and MainAxisAlignment.spaceBetween will correctly push the text left and the edit icon right, just like your standalone Row does.

内容的提问来源于stack exchange，提问作者Sunisha Guptan