我想要一个圆角矩形中的 ElevatedButton - Flutter

Question

我正在尝试使用ElevatedButton绘制矩形。

这就是我想要实现的目标：

这就是我得到的

我已将代码从 RaisingButton 升级为ElevatedButton ，并在下面使用了相同的代码，但它不起作用：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:provider/provider.dart';
import '../BackEnd/AuthenticationService.dart';
import 'ForgotPassword.dart';

class Login extends StatelessWidget {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: <Widget>[
              Container(
                height: 400,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/images/loginHeader.png'),
                        fit: BoxFit.fill)),
                child: Stack(
                  children: <Widget>[],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(30.0),
                  child: Column(
                    children: <Widget>[
                          Container(
                            padding: EdgeInsets.all(5),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(10),
                                boxShadow: [
                                  BoxShadow(
                                      color: Color.fromRGBO(143, 148, 251, .2),
                                      blurRadius: 20.0,
                                      offset: Offset(0, 10))
                                ]),
                            child: Column(
                              children: <Widget>[
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  decoration: BoxDecoration(
                                      border: Border(
                                          bottom: BorderSide(
                                              color: Colors.grey[100]))),
                                  child: TextField(
                                    controller: emailController,
                                  decoration: InputDecoration(
                                      labelText: "Email",
                                      border: InputBorder.none,
                                      hintText: "Email or Phone number",
                                      hintStyle:
                                          TextStyle(color: Colors.grey[400])),
                                ),
                                ),
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  child: TextField(
                                    controller: passwordController,
                                  obscureText: true,
                                  decoration: InputDecoration(
                                      labelText: "Password",
                                      border: InputBorder.none,
                                      hintText: "Password",
                                      hintStyle:
                                          TextStyle(color: Colors.grey[400])),
                                ),
                                )
                              ],
                            ),
                          ),
                      SizedBox(
                        height: 30,
                      ),
                      ElevatedButton(onPressed: () {
                        context.read<AuthenticationService>().signIn(
                          email: emailController.text.trim(),
                          password: passwordController.text.trim(),
                        );
                      },
                          style: ElevatedButton.styleFrom(elevation: 10,
                              shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0),
                            side: BorderSide(color: Colors.red),
                          ),
                            primary: Color.fromRGBO(214, 0, 27, 1)
                          ),
                          child: Text(' Login'.toUpperCase())
        ),
                     
                      Padding(
                        padding: EdgeInsets.only(top: 15),
                      ),
                      ClipOval(
                        child:ElevatedButton(
                          child: Text("Forgot Password"),
                          onPressed: () {
                            gotoForgotPassword(BuildContext context) {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => ForgotPassword()),
                              );
                            }
                            gotoForgotPassword(context);
                          },
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
    );
  }
}

我尝试在互联网上搜索（最好是堆栈溢出），但似乎找不到任何解决我的问题的方法。

Answer 1

这是一个代码片段。

 Container(
                    width: MediaQuery.of(context).size.width * 0.6,
                    child: ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                        primary: Colors.pinkAccent,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25),
                        ),
                        elevation: 15.0,
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: Text(
                          'Proceed to Pay',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ),
                  ),
                ),

Answer 2

将 padding 参数插入 Container，将 color 参数插入 BoxDecoration 以匹配图像的红色。

Container(
            height: 400,
            padding: const EdgeInsets.symmetric(horizontal: 40.0),
            decoration: BoxDecoration(
                color: Color(0x#FF0000) //insert your hex color code 
                image: DecorationImage(
                    image: AssetImage('assets/images/loginHeader.png'),
                    fit: BoxFit.fill)),
            child: Stack(
              children: <Widget>[],
              ),