我想要一个在圆角矩形中的凸起按钮 -Flutter。

14 浏览
0 Comments

我想要一个在圆角矩形中的凸起按钮 -Flutter。

你好,我试图使用抬起的按钮来画一个矩形形状。这就是我想做到的:

\"enter

\"enter

this is what i get

我已经将代码从Raised button升级为elevated button,并在下面使用了相同的代码,但它不起作用。

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: [
              Container(
                height: 400,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/images/loginHeader.png'),
                        fit: BoxFit.fill)),
                child: Stack(
                  children: [],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(30.0),
                  child: Column(
                    children: [
                          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: [
                                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().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);
                          },
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
    );
  }
}

我试图在互联网上搜索,首选是堆栈溢出,但似乎找不到任何解决我的问题的解决方案。

admin 更改状态以发布 2023年5月22日
0
0 Comments

将填充参数插入到容器中,将颜色参数插入到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: [],
              ),

0
0 Comments

这里是一段代码片段。

 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),
                        ),
                      ),
                    ),
                  ),
                ),

0