Flutter中如何自定义按钮的位置？

Hey George! Great question—placing a button exactly where you want in Flutter is totally doable, and you've got a couple of go-to methods depending on your needs. Let's walk through them using your button code as a starting point (I also fixed a tiny typo: Colors.Brown should be Colors.brown since Flutter uses camelCase for color names!).

This is the most flexible option if you need to place the button at exact coordinates relative to its parent. Wrap your button in a Positioned widget inside a Stack, and define its position with top, left, right, or bottom properties:

Stack(
  children: [
    // Add your other page widgets here (they'll sit behind the button by default)
    Positioned(
      left: 30.0, // Distance from the left edge
      top: 150.0, // Distance from the top edge
      child: RaisedButton(
        splashColor: Colors.pinkAccent,
        color: Colors.brown[200],
        onPressed: () {},
        child: const Text(
          "Login",
          style: TextStyle(fontSize: 20.0, color: Colors.white),
        ),
      ),
    ),
  ],
)

You can mix and match properties too—for example, right: 20.0 and bottom: 50.0 would pin the button to the bottom-right corner with margin.

If you don't need pixel-perfect control and just want to place the button in a common relative spot (like top-right, bottom-center, etc.), use the Align widget. It lets you position the button relative to its parent's boundaries:

Align(
  alignment: Alignment.topRight, // Options: Alignment.center, Alignment.bottomLeft, etc.
  child: RaisedButton(
    splashColor: Colors.pinkAccent,
    color: Colors.brown[200],
    onPressed: () {},
    child: const Text(
      "Login",
      style: TextStyle(fontSize: 20.0, color: Colors.white),
    ),
  ),
)

For custom relative positions, use Alignment(x, y) where x ranges from -1 (left) to 1 (right), and y ranges from -1 (top) to 1 (bottom). For example, Alignment(0.3, -0.7) would place the button slightly right of center and near the top.

If your button is the only child in a container, you can set the alignment property directly on the Container for a quick solution:

Container(
  width: double.infinity, // Takes full width of parent
  height: double.infinity, // Takes full height of parent
  alignment: Alignment.bottomCenter, // Pin to bottom-center
  child: RaisedButton(
    splashColor: Colors.pinkAccent,
    color: Colors.brown[200],
    onPressed: () {},
    child: const Text(
      "Login",
      style: TextStyle(fontSize: 20.0, color: Colors.white),
    ),
  ),
)

Quick Note: Deprecation of RaisedButton #

Just a heads-up—RaisedButton is marked as deprecated in Flutter 2.0 and above. The recommended replacement is ElevatedButton, which works almost the same way but uses a more modern style API:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.brown[200],
    foregroundColor: Colors.pinkAccent, // Equivalent to splashColor
  ),
  onPressed: () {},
  child: const Text(
    "Login",
    style: TextStyle(fontSize: 20.0, color: Colors.white),
  ),
)

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