我想要一个在圆角矩形中的凸起按钮 -Flutter。
我想要一个在圆角矩形中的凸起按钮 -Flutter。
你好,我试图使用抬起的按钮来画一个矩形形状。这就是我想做到的:
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日
将填充参数插入到容器中,将颜色参数插入到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:[], ),
这里是一段代码片段。
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), ), ), ), ), ),