当前位置: 首页 > 知识库问答 >
问题:

我想要一个圆形长方形的升高按钮-颤振

杨选
2023-03-14

嗨,我想用一个提升的按钮画一个长方形,这就是我想要实现的

this is what i get

我已经将代码从一个提升的按钮升级到了一个提升的按钮,并在下面使用了相同的代码,但它不起作用

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);
                          },
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
    );
  }
}

我试图搜索互联网上最好的堆栈溢出但似乎找不到任何解决我的问题

共有2个答案

有翰海
2023-03-14

将padding参数插入容器,将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>[],
              ),
能翔宇
2023-03-14

下面是一段代码片段。

 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),
                        ),
                      ),
                    ),
                  ),
                ),
 类似资料:
  • 问题内容: 我想制作一个非常小的圆形按钮,上面没有文字。这是我尝试过的方法。 但是,存在两个问题: 1.按钮的形状不是完美的圆形,而是更像椭圆形。 2. ;无效。正如我认为,它的 直径超过3 … 我如何才能让一个较小的圆按钮?帮助表示赞赏。 问题答案: 更新:在仔细查看结果按钮时,像在José答案中那样设置形状似乎在很小的按钮上比 -fx-background-radius在此答案中使用设置更好(

  • 那么,有人将如何实现android L中显示的圆形按钮呢?还有什么是循环按钮的技术名称,XML代码将被赞赏。

  • 如何创建类似于< code > floating action button 的东西?

  • 如何将转换为带有圆边的按钮?我使用获得了圆角边框形状,但不知怎么需要给边框着色。

  • 有没有一种方法可以让一个按钮从java调用一个方法,并在它执行后将其执行到浏览器中的一个新页面 目前,这个按钮在我的java应用程序中调用一个方法并执行它,但是当它执行时,它会转到一个空白页面。我希望它要么转到一个新页面,要么重定向到按钮所在的同一页面。