Flutter注册页面按钮对齐布局问题技术求助

Hey there! Let's tackle those button alignment and layout tweaks for your Flutter signup page. Looking at your current code, here are a few practical ways to adjust the buttons to match your design:

If your design calls for buttons that stretch across most of the screen (with equal left/right padding), this approach will work perfectly. We'll simplify the layout structure and ensure buttons fill the available width while keeping clean spacing.

Modified Full Code: #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Travel Budget App",
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: FirstView(),
    );
  }
}

class FirstView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        // Push all content to the bottom of the screen
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          // First button with side margins
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
            child: SizedBox(
              width: double.infinity, // Force button to fill parent width
              child: RaisedButton(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: Text("Create Account", style: TextStyle(fontSize: 16)), // Added button text
                ),
                onPressed: () {},
              ),
            ),
          ),
          // Second button with matching spacing
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
            child: SizedBox(
              width: double.infinity,
              child: RaisedButton(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: Text("Log In", style: TextStyle(fontSize: 16)), // Added button text
                ),
                onPressed: () {},
              ),
            ),
          ),
          // Bottom spacing to keep buttons off the screen edge
          SizedBox(height: 100),
        ],
      ),
    );
  }
}

Key Changes Explained: #

• Replaced the nested Align + Padding structure with a simpler Column using mainAxisAlignment: MainAxisAlignment.end to push buttons to the bottom.
• Used SizedBox(width: double.infinity) to make each button fill the available width (constrained by the outer Padding for side margins).
• Added button text (your original code had empty button children) and cleaned up padding for consistent vertical spacing.

If your design wants the two buttons side-by-side (e.g., "Sign Up" and "Log In" next to each other), use a Row with Expanded widgets to split the available width evenly:

Horizontal Layout Code Snippet (replace the Column children with this): #

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 20, bottom: 100),
  child: Row(
    children: [
      // First button takes half the width (minus spacing)
      Expanded(
        child: Padding(
          padding: const EdgeInsets.only(right: 8),
          child: RaisedButton(
            color: Colors.white,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 12),
              child: Text("Sign Up"),
            ),
            onPressed: () {},
          ),
        ),
      ),
      // Second button takes the other half
      Expanded(
        child: Padding(
          padding: const EdgeInsets.only(left: 8),
          child: RaisedButton(
            color: Colors.white,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 12),
              child: Text("Log In"),
            ),
            onPressed: () {},
          ),
        ),
      ),
    ],
  ),
)

In newer Flutter versions, RaisedButton is deprecated in favor of ElevatedButton—the usage is nearly identical, so you can swap RaisedButton with ElevatedButton if you want to follow best practices.

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