How to have this extra width to button only to it's upper half only, I have tried both methods one with border and one with adding padding and then a container with white but I able to eliminate only the bottom width not the lower left and lower right width .
Widget _buildDepositButton(
CodDepositionProvider provider, BuildContext context) {
return Positioned(
left: 0,
right: 0,
top: 237 - 30,
child: Center(
child: GestureDetector(
onTap: () {
},
child: Stack(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: Padding(
padding: const EdgeInsets.only(left : 4.0, right : 4, top : 4),
child: Container(
width: 151,
decoration: BoxDecoration(
color: const Color(0xFF0066FF),
borderRadius: BorderRadius.circular(30),
),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CustomImageView(
imagePath: "assets/images/diagonal_arrow.svg",
),
SizedBox(width: 6),
Text(
'Deposit Now',
textAlign: TextAlign.right,
style: TextStyle(
color: Color(0xFFEDF2F4),
fontSize: 14,
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
letterSpacing: -0.28,
),
)
],
),
),
),
),
),
],
),
),
),
);
}
Also how can we make button left half as in the image, I can see there is overlay and layer blur added but I'm not getting the exact effect here.
How to have this extra width to button only to it's upper half only, I have tried both methods one with border and one with adding padding and then a container with white but I able to eliminate only the bottom width not the lower left and lower right width .
Widget _buildDepositButton(
CodDepositionProvider provider, BuildContext context) {
return Positioned(
left: 0,
right: 0,
top: 237 - 30,
child: Center(
child: GestureDetector(
onTap: () {
},
child: Stack(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: Padding(
padding: const EdgeInsets.only(left : 4.0, right : 4, top : 4),
child: Container(
width: 151,
decoration: BoxDecoration(
color: const Color(0xFF0066FF),
borderRadius: BorderRadius.circular(30),
),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CustomImageView(
imagePath: "assets/images/diagonal_arrow.svg",
),
SizedBox(width: 6),
Text(
'Deposit Now',
textAlign: TextAlign.right,
style: TextStyle(
color: Color(0xFFEDF2F4),
fontSize: 14,
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
letterSpacing: -0.28,
),
)
],
),
),
),
),
),
],
),
),
),
);
}
Also how can we make button left half as in the image, I can see there is overlay and layer blur added but I'm not getting the exact effect here.
Share Improve this question asked Mar 28 at 11:27 lakhera24lakhera24 335 bronze badges 1- I don't really understand what you want to achieve. Can you explain it more clearly? Or make some sketch for the desired effect? – Albert221 Commented Mar 28 at 13:22
1 Answer
Reset to default 1If you want to build the UI in the image:
- You can implement it simply with
Stackwidget. - And for the border you can handle it with Inner and outer Container.
- For the blur you can implement it with the
gradient - And control its position on the Button (
Container) with thestopsList
1. Custom Button Widget
class CustomButton extends StatelessWidget {
const CustomButton({
super.key,
required this.screenHeight,
required this.screenWidth,
required this.onTap,
});
final double screenHeight;
final double screenWidth;
final void Function() onTap;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: mainColor,
borderRadius: BorderRadius.circular(35),
),
child: Container(
height: screenHeight * .08,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: const LinearGradient(
colors: <Color>[
Color(0xFF40F8FF),
Color(0xFFC8FFE0),
Color(0xFF279EFF),
],
stops: <double>[
0.0,
0.1,
1.0,
],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
),
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(30),
onTap: onTap,
child: const Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.arrow_outward_rounded,
color: Colors.white,
),
SizedBox(width: 10),
Text(
"Deposit Now",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
),
),
),
],
);
}
}
As you can see:
1. Border Effect: Achieved by nesting two Container widgets - an outer one for the border and an inner one for the main button.
2. Gradient Blur Effect: Implemented using LinearGradient with precise color stops to control the transition points.
3. Positioning: The button can be positioned using Stack and Positioned widgets for precise overlay effects.
Ensure To:
- Not use the border of the inner Container (it will leave bad thin separation)
- The color of the background of the button be the same as the border
- Increase the border radius of the outer Container a little bit
2. Screen Implementation
const Color mainColor = Color(0xFFE7FBE6);
class MyScreen extends StatefulWidget {
const MyScreen({super.key});
@override
State<MyScreen> createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
double get screenHeight => MediaQuery.sizeOf(context).height;
double get screenWidth => MediaQuery.sizeOf(context).width;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: mainColor,
body: Stack(
children: <Widget>[
Positioned.fill(
bottom: null,
child: Container(
height: screenHeight * .2,
decoration: const BoxDecoration(
color: Color(0xFFA1D6B2),
),
),
),
Positioned(
top: (screenHeight * .2) - (screenHeight * .08 / 2),
right: 0.0,
left: 0.0,
child: CustomButton(
screenHeight: screenHeight,
screenWidth: screenWidth,
onTap: () {},
),
),
],
),
);
}
}
For Scrollable UI
And if you want to put this UI in Scrollable Layout you can use
SliverHeaderPersisitenceWidget with its delegateSliverHeaderpersistensDelegate
Hope this was helpful to you