Bug: Formatting for the Footer

[phillipshaong]

Describe the bug
A clear and concise description of what the bug is.

The footer expands to the horizontal ends of the screen. There isn't a way to constrain the width.

To Reproduce
Steps to reproduce the behavior:

1. Create any generic IntroductionScreen widget.
2. Add to the following PageViewModel to the pages argument of IntroductionScreen:

PageViewModel(
          title: "This is a title", //"Welcome to KarmaKard",
          body:
              "This is a body", //"Where good deeds are rewarded with good deals.",
          image: _buildImage('community.png', 600),
          decoration: pageDecoration,
          footer: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 300),
            child: ElevatedButton(
              onPressed: () {
                introKey.currentState?.animateScroll(0);
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Theme.of(context).colorScheme.primary,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
              ),
              child: Text(
                'Continue',
                style:
                    TextStyle(color: Theme.of(context).colorScheme.onPrimary),
              ),
            ),
          ),
        ),

Expected behavior
The button should be constrained to the max width.

Screenshots

Additional context
This is on Chrome, for flutter web.

[chriscdn]

I believe this is caused by the crossAxisAlignment being set to CrossAxisAlignment.stretch.

introduction_screen/lib/src/ui/intro_page.dart

Line 85 in ed7fc56

crossAxisAlignment: CrossAxisAlignment.stretch,

Try wrapping your button in a Center, which will render the button at its intrinsic size. E.g.,

PageViewModel(
  title: "This is a title", //"Welcome to KarmaKard",
  body:
      "This is a body", //"Where good deeds are rewarded with good deals.",
  image: _buildImage('community.png', 600),
  decoration: pageDecoration,
  footer: Center(
    child: ElevatedButton(
      onPressed: () {
        introKey.currentState?.animateScroll(0);
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: Theme.of(context).colorScheme.primary,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
      child: Text(
        'Continue',
        style:
            TextStyle(color: Theme.of(context).colorScheme.onPrimary),
      ),
    ),
  ),
)