I am trying to create a button similar to this one, I don't have exact colors so using yellow and black.
Want this
My Code Output
here is my code:
class CustomButton extends StatelessWidget {
final String? text;
double width;
final Function()? onPressed;
CustomButton({this.width = 0.8, this.text, this.onPressed});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
child: Center(
child: CustomTextWidget(
text: text!,
textColor: AppColors.BLACK_COLOR,
fontWeight: FontWeight.bold,
fontSize: 1.1,
)),
height: ScreenSize.heightSize * 0.08,
width: width.sw,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.yellow, Colors.black],
begin: Alignment.topRight,
end: Alignment.topRight,
stops: [0.7, 0.8],
tileMode: TileMode.repeated,
),
borderRadius: BorderRadius.circular(4)),
),
);
}
}
Kindly help how to do this.
Try below code hope its help to you and used FractionalOffset
GestureDetector(
onTap: () {},
child: Container(
alignment: Alignment.center,
height: 44.0,
width: 100,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.yellow,
Colors.black,
],
begin: FractionalOffset.bottomCenter,
end: FractionalOffset.topCenter,
),
),
child: const Text('SIGN UP'),
),
),
Result->
You can modify your Linear Gradient like this:
LinearGradient(
colors: [
Color.fromARGB(100, 137, 90, 11),
Color.fromARGB(255, 252, 208, 72)
],
begin: Alignment.topCenter,
end: Alignment.center,
stops: [0.0, 0.3],
),
Output:
IMO, It looks better.
P.S. You can change colors & stops property as per your need.
Use this code for Gradient color in Elevated Button
Container(
height: 44.0,
decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.orange, Colors.green])),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(primary: Colors.transparent, shadowColor: Colors.transparent),
child: Text('Elevated Button'),
),
)
Related
I trying to understand how can I design curves in a container like the below
can anyone help me to design this kind of container? much appreciate it if anyone provides code for this kind of design.
Thank you in advance.
use Stack and boxDecoration, play with margins and size to get best result.
SizedBox(
width: double.infinity,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.grey,
boxShadow: const [
BoxShadow(color: Colors.grey, spreadRadius: 3),
],
),
height: 50,
),
Container(
width: 200,
child: const Center(
child: Text('\$1400'),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: const Color(0xff232fac),
boxShadow: const [
BoxShadow(color: Color(0xff232fac), spreadRadius: 3),
],
),
height: 50,
),
Container(
width: 200,
margin: const EdgeInsets.only(left: 150),
child: const Center(
child: Text('\$1400'),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: const Color(0xff483395),
boxShadow: const [
BoxShadow(color: Colors.white, spreadRadius: 3),
],
),
height: 50,
),
],
),
),
read about Stack
read about boxDecoration
You cab usethe decoration property of the container to add border radius to a container
Container(
height: 25,
width: 100,
decoration: BoxDecoration (
borderRadius : BorderRadius circular(15),
color: Colors.purple
)
)
Use Stack and gradient to implement this
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.grey,
],
stops: [0.5, 0],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("\$1400"),
Text("\$700"),
],
),
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
color: Colors.green,
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Text("\$700"),
),
),
],
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.grey,
],
stops: [0.5, 0],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("\$1400"),
Text("\$700"),
],
),
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
color: Colors.green,
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Text("\$700"),
),
),
],
You can try something like this:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
final double center = 300;
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: [
Positioned(
left: 0,
child: Container(
width: center,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.indigo, Colors.blue]),
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'\$ 1400',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
)),
Positioned(
right: 0,
child: Container(
width: MediaQuery.of(context).size.width - center,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'\$ 900',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
)),
Positioned(
left: center,
child: FractionalTranslation(
translation: const Offset(-0.5, 0),
child: Container(
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.indigo, Colors.purple]),
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 8, 20, 8),
child: Text(
'\$ 700',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
),
)),
]),
);
}
}
output:
use decoration property see simple use.
Container(
height: 50,
width: 500,
decoration: BoxDecoration (
borderRadius : BorderRadius circular(40),
color: Colors.red)
child: const Center(
child: Text('\$ 1400'),),
)
How can I create this shadow blur in the top and bottom of the Widget that appears to be on top of the list?
try to wrap your child with Stack and a mask:
Stack(
children: [
//_yourWidget(),
Opacity(
opacity: 0.5,
child: Container(
width: 50.0,
height: 50.0,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black,
Colors.transparent,
Colors.transparent,
Colors.black,
],
stops: [
0,
0.2,
0.8,
1,
],
),
),
),
),
],
)
How to add gradient color in the background of a card ? Should I reproduce this card with a container and a box decoration or is there another simple way ?
Try below code hope it help to you in below answer change Color your need.
Card(
child: Container(
height: 50,
width: 150,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.yellow,
Colors.orangeAccent,
Colors.yellow.shade300,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Container(), //declare your widget here
),
),
Your Card look like->
If you are gradient background to card or gradient border to card try below code
Container(
height: 50,
width: 150,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.yellow,
Colors.orangeAccent,
Colors.yellow.shade300,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child:Card(
color:Colors.white,
child: Container(), //declare your widget here
),
),
Your Screen like ->
I know it's a bit late, but you can try this to achieve a card gradient with border radius
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black38,
blurRadius: 3.0,
spreadRadius: 0.0,
offset: Offset(1.0, 1.0),
)
],
gradient: LinearGradient(
colors: [startColor, endColor],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
),
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 6),
TextWidget(
title,
typographyToken: TypographyToken.text14SemiBold,
color: Colors.white,
),
const SizedBox(height: 8),
TextWidget(
"$pendingCount Pending Request",
typographyToken: TypographyToken.text10,
color: Colors.white,
),
const SizedBox(height: 6),
],
),
),
);
Result :
result
This is a sample that I tried just now. Works fine for me.
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.white],
begin: Alignment.topLeft,
end: Alignment.bottomRight)),
)
Another way and probably the best in my opinion:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.center,
colors: [Colors.deepOrangeAccent, Colors.orange],
),
),
width: 300,
height: 300,
child: Card(
color: Colors.transparent,
),
),
Output:
Click here to view
Card(
shadowColor: tabColorAmber,
elevation: 10,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(colors: [
Colors.orangeAccent,
Colors.orangeAccent,
Colors.yellow.shade100,
])),
width: double.infinity,
height: 140,
),
),
Example
I am trying to create an Elevated button with gradient background, But it provides some parameters that do not fit it well, and May you know that after Flutter 2.0 version most of the Button classes have been deprecated such as Raised Button, Flat Button, ... etc
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
onSurface: Colors.grey,
),
onPressed: () {
print('Pressed');
},
)
Is there anyway to create ElevatedButton with gradient background?
Screenshot (Null safe)
Create this class (customizable)
class MyElevatedButton extends StatelessWidget {
final BorderRadiusGeometry? borderRadius;
final double? width;
final double height;
final Gradient gradient;
final VoidCallback? onPressed;
final Widget child;
const MyElevatedButton({
Key? key,
required this.onPressed,
required this.child,
this.borderRadius,
this.width,
this.height = 44.0,
this.gradient = const LinearGradient(colors: [Colors.cyan, Colors.indigo]),
}) : super(key: key);
#override
Widget build(BuildContext context) {
final borderRadius = this.borderRadius ?? BorderRadius.circular(0);
return Container(
width: width,
height: height,
decoration: BoxDecoration(
gradient: gradient,
borderRadius: borderRadius,
),
child: ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
shape: RoundedRectangleBorder(borderRadius: borderRadius),
),
child: child,
),
);
}
}
Usage:
Use it like a regular ElevatedButton:
MyElevatedButton(
width: double.infinity,
onPressed: () {},
borderRadius: BorderRadius.circular(20),
child: Text('SIGN IN'),
)
import 'package:flutter/material.dart';
class RoundedButtonWidget extends StatelessWidget {
final String buttonText;
final double width;
final Function onpressed;
RoundedButtonWidget({
required this.buttonText,
required this.width,
required this.onpressed,
});
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26, offset: Offset(0, 4), blurRadius: 5.0)
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.0, 1.0],
colors: [
Colors.deepPurple.shade400,
Colors.deepPurple.shade200,
],
),
color: Colors.deepPurple.shade300,
borderRadius: BorderRadius.circular(20),
),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
minimumSize: MaterialStateProperty.all(Size(width, 50)),
backgroundColor:
MaterialStateProperty.all(Colors.transparent),
// elevation: MaterialStateProperty.all(3),
shadowColor:
MaterialStateProperty.all(Colors.transparent),
),
onPressed: () {
onpressed();
},
child: Padding(
padding: const EdgeInsets.only(
top: 10,
bottom: 10,
),
child: Text(
buttonText,
style: TextStyle(
fontSize: 18,
// fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
),
),
);
}
}
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.0),
gradient: LinearGradient(
begin: Alignment(-0.95, 0.0),
end: Alignment(1.0, 0.0),
colors: [const Color(0xff667eea), const Color(0xff64b6ff)],
stops: [0.0, 1.0],
),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.transparent,
onSurface: Colors.transparent,
shadowColor: Colors.transparent,),
onPressed: (){},
child: Center(
child: Text(
'Log in',
style: TextStyle(
fontFamily: textFontFamilySegoeUI,
fontSize: 16,
color: const Color(0xffffffff),
letterSpacing: -0.3858822937011719,
),
textAlign: TextAlign.center,
),
),
),
),
Container(
width: 1120.w,
height: 180.h,
margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF0379C6), Color(0xFF1298EF)]),
borderRadius: BorderRadius.circular(25.r),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(16, 142, 233, 0.57),
blurRadius: 13)
]),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.transparent),
),
onPressed: () => setState(() {
// _launched = _makePhoneCall('tel:$_phone');
}),
child: Text(
'Submit',
style:
TextStyle(color: Colors.white, fontSize: 64.sp),
),
),
)
botao
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Priscila Dev'),
),
body: Center(
child: Container(
width: 300,
height: 100,
decoration: const ShapeDecoration(
shape: StadiumBorder(),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.blue, Colors.orange, Colors.green],
),
),
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: const StadiumBorder(),
child: const Text(
'ENCERRAR[enter image description here][1]',
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () {
print('Hello!');
},
),
)),
);
}
Try this
Container(
padding: EdgeInsets.fromLTRB(10.0, 6.0, 10.0, 6.0),
decoration: BoxDecoration(
gradient:
LinearGradient(colors: [Color(0xff3b8594), Color(0xff59a6b6)]),
borderRadius: BorderRadius.circular(25.0)),
child: Text(
'View more',
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
)
Result
I have an IconButton with a gradient overlay, like this
Container(
foregroundDecoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orange.shade100, Colors.orange.shade900],
begin: Alignment(0, 0),
end: Alignment(0, 1)
),
backgroundBlendMode: BlendMode.screen
),
child: IconButton(
icon: Icon(Icons.add_box),
iconSize: 36,
color: Colors.black,
onPressed: (){},
),
);
It looks great until I tap it, then suddenly the gradient covers the entire Container (and the IconButton) and stays there.
Is there a way to prevent it from breaking when tapping it?
It may be an option for you to wrap your Icon in the Container, instead of wrapping the whole IconButton.
IconButton(
icon: Container(
foregroundDecoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orange.shade100, Colors.orange.shade900],
begin: Alignment(0, 0),
end: Alignment(0, 1),
),
backgroundBlendMode: BlendMode.screen),
child: Icon(Icons.add_box),
),
iconSize: 36,
color: Colors.black,
onPressed: () {},
),