flutter alertdialog with background image - flutter

Folloing is my alert dialog box code, i need to set an background image for the alert dialog instead of blue color, need to show a design
AlertDialog(
backgroundColor: Colors.blue,
titlePadding: EdgeInsets.all(0),
contentPadding: EdgeInsets.all(0),
title: Container(
decoration: BoxDecoration(
color: profile_edit_toolbar_color,
borderRadius: BorderRadius.all(Radius.circular(8))),
width: MediaQuery.of(context).size.width * 0.7,
height: MediaQuery.of(context).size.height * 0.5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(18),
child: Text(
'Select countries to show',
style: TextStyle(
color: Colors.yellow[300],
fontSize: 20,
fontFamily: fontFamily_3),
// style: CustomStyle.balooCustom(20, Colors.white)
),
),
IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.close,
size: 25,
color: Colors.white,
)),
],
),
Row(
children: [
Expanded(
child: Container(
height: 120,
child: DisplayCountriesForm(
countriesList: eventResponse.countriesList,
num: 0,
displayCountries: displayCountries,
onValueChanged: (updatedList) {
},
),
)),
Expanded(
child: Container(
height: 120,
child: DisplayCountriesForm(
countriesList: eventResponse.countriesList,
num: 1,
displayCountries: displayCountries,
onValueChanged: (updatedList) {
},
),
)),
Expanded(
child: Container(
height: 120,
child: DisplayCountriesForm(
countriesList: eventResponse.countriesList,
num: 2,
displayCountries: displayCountries,
onValueChanged: (updatedList) {
},
),
)),
],
),
],
),
),
);


Try below code I have add background image of the alert dialog hope your problem is solved , Use your widget also and change background image on your need
TextButton(
child: Text('Pressed Me'),
onPressed: () => showDialog(
context: context,
builder: (context) => AlertDialog(
content: Stack(
alignment: Alignment.center,
children: <Widget>[
Image.network(
'https://www.kindpng.com/picc/m/355-3557482_flutter-logo-png-transparent-png.png',
),
Text(
'Add Your Text Here',
style: TextStyle(
fontSize: 24,
),
),
],
),
),
),
),
Your Result Screen->

Related

title widget to be centered and icon widgets at the right side in one row

the question is exactly same as this post
but I did not find an answer from the post.
my goal is to set the title widget in the center
and other two buttons on the right side.
the solutions in the link all put the title widget slightly on the left side.
does anyone know how to do this without using Stack? I'm afraid of the title widget being over the button widgets when the title gets too long.
the code:
SizedBox(
height: 40,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
const SizedBox(width: 17),
Text(
'TITLE',
style: const TextStyle(
color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
),
Spacer(),
Row(
children: [
GestureDetector(
onTap: (){null;},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: (){Get.toNamed('/wallet_setting');},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]
)
]
),
)

Try this One
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Container(
child: Center(
child: Text(
'TITLE',
style: const TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
),
)
)
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: [
GestureDetector(
onTap: (){null;},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: (){Get.toNamed('/wallet_setting');},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]
)
)
],
)
OutPut:

i think you should wrap it with centre

Try this approach:
first make widget from your right widgets:
Widget _rightIcons() {
return Row(children: [
GestureDetector(
onTap: () {
null;
},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: () {
Get.toNamed('/wallet_setting');
},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]);
}
then build your header like this:
Row(
children: [
_rightIcons(),
Expanded(
child: Center(
child: Text(
'TITLE',
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w500),
),
),
),
Opacity(
opacity: 0,
child: _rightIcons(),
)
],
),

You can use centerTitle:true on Appbar
appBar: AppBar(
centerTitle: true,
title: Text("title"),
actions: [
Another way
Container(
color: Colors.purple,
height: 40 * 2,
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.navigate_before)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: SizedBox(),
),
Expanded(
flex: 4,
child: Text(
'TITLE',
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w500),
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
child: Icon(Icons.wallet_membership,
color: Colors.white),
),
const SizedBox(width: 17),
GestureDetector(
onTap: () {},
child: const SizedBox(
child:
Icon(Icons.settings, color: Colors.white),
),
),
]),
),
)
],
),
],
),
)
Preferable solution:
You can implements PreferredSizeWidget to create custom Appbar. Play with color and other decoration.
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
const MyAppBar({super.key});
#override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Text("title"),
),
Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
//you can use callback method to get onpressed
onPressed: () {},
icon: Icon(Icons.settings),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.settings),
),
],
),
)
],
);
}
#override
Size get preferredSize => const Size.fromHeight(kToolbarHeight * 2);
}
And use like appBar: MyAppBar(),

Slidable widget not wrapping around container

I am trying to make the slidable widget wrap around the child container like this:
but it comes like this:
The slidable widget comes from the edge of the screen rather than the child widget also there seems to be no animation, it just disappears ontap.
Slidable(
key: UniqueKey(),
actionPane: SlidableDrawerActionPane(),
actions: [
IconSlideAction(
color: Colors.redAccent,
icon: Icons.delete,
onTap: () {
todoController.todos.removeAt(index);
},
)
],
child: Container(
decoration: BoxDecoration(
color: Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding: const EdgeInsets.symmetric(
horizontal: 24.0, vertical: 15.0),
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
todoController.todos[index].title,
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8),
fontSize: 20.0),
),
],
),
Divider(
color: Color(0xFF707070),
),
Text(
todoController.todos[index].details,
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
],
),
),
),
),

u can use custom container in action widget like this:-
Widget slideBackground(BuildContext context, Function onTap, String text) {
return Container(
height: 80.h,
width: 120,
// color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: IconSlideAction(
caption: '',
color: Colors.red,
closeOnTap: true,
icon: Icons.delete,
// icon: Icons.delete,
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: Text(text),
actions: <Widget>[
CupertinoButton(
child: const Text(
"Cancel",
style: TextStyle(color: Colors.black),
),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoButton(
child: const Text(
"Delete",
style: TextStyle(color: Colors.red),
),
onPressed: () {
onTap();
Navigator.of(context).pop();
},
),
],
);
});
},
),
),
),
)
],
),
);
}```

Flutter- The submit button won't go down, How do I move the submit button to bottom center

Here is part of the code that I made and This is the result that I get.
Widget _buildPage() {
return SafeArea(
child: Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Form(
key: formkey,
child: Column(
children: <Widget>[
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Craft',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {
},
),
),
],
),
),
),
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Labor',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {
},
),
),
],
),
),
),
_label('Skill Level', '-'),
// Project Status
_label('Quantity', '0'),
// Location
_label('Regular Hours', '0'),
// Customer
_label('Required Date', 'DD/MM/YYYY'),
Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
],
),
),
),
);
}
}
}
The result that I expected was supposed to be the submit button at the bottom of the screen and still cannot figure out how to move it to bottom even after I used alignment bottom center. Any suggestion on what I should fix?

Align wont work here as it only takes the space column provides it. So add spacer before it. so that it pushes the button till the full height.
_label('Required Date', 'DD/MM/YYYY'),
Spacer(), //add here
Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),

you can simply pass button in bottomNavigationBar as shown below:
scaffold(
body: ///your current code
bottomNavigationBar: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
)

You can achieve it using Expanded().
Wrap you button with Expanded.
Example :
Expanded(
child: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {},
child: Text("Submit"),
),
)
],
),
),
)),

You can create a child of SafeArea as Scaffold and pass that submit button in bottomSheet or bottomNavigationBar-
Widget _buildPage() {
return SafeArea(
child: Scaffold(
bottomSheet: Container( height:60, width:100, child: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
),
body: Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Form(
key: formkey,
child: Column(
children: <Widget>[
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Craft',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {},
),
),
],
),
),
),
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Labor',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {},
),
),
],
),
),
),
_label('Skill Level', '-'),
// Project Status
_label('Quantity', '0'),
// Location
_label('Regular Hours', '0'),
// Customer
_label('Required Date', 'DD/MM/YYYY'),
],
),
),
),
),
);
}
}
}

Flutter Dart: Allign Row Widgets at bottom

I am new to Flutter, I am trying to show two buttons in a row at the bottom,
I have tried all possible solutions, including Align, Expanded etc but it didn't work..
Please if someone can help, as my buttons don't go at the bottom of screen
Here's my code:
return Scaffold(
body: SingleChildScrollView(
child: Column(children: [
Container(
//code
),
Container(
//code
),
Row(
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
],
),
]),
),
);

Here is a solution involving the bottomNavigationBar property of the Scaffold widget where you can put any Widget? (here, we're using your Row):
You can play around with the provided code on this dartpad.
Here's the result:
return Scaffold(
bottomNavigationBar: Padding(
padding: EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {},
),
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {},
),
),
],
),
),
body: SingleChildScrollView(
child: Column(children: [
Container(
//code
),
Container(
//code
),
]),
),
);

Here is your updated code, Please check
Scaffold(
body: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
SingleChildScrollView(
child: Column(
children: [
Container(
//code
),
Container(
//code
),
],
),
),
Row(
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
],
),
]),
),
OR
You can use bottomSheet method of scaffold
Scaffold(
bottomSheet: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
SizedBox(width: 50),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
],
),
),
body: SingleChildScrollView(
child: Column(children: [
Column(
children: [
Container(
//code
),
Container(
//code
),
],
),
]),
),
),

The row will match its childrens height so because all buttons have the same height your final row is 80 (px) in height and therefore it doesnt matter where to align buttons. You can wrap your row in a container with color to see it.
The corruct solution would be to give the row height by wrapping it in a diffrent widget (like column) and stretch it to available space. Then inside the row you just need CrossAxisAlignment.end. But this depends on your layout.
For example:
Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
row: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
/* Buttons here **/
]),
)
]
)
You can also refer to the flutter layout guide and CSS Flexbox as it almost translates 1-1 to flutter and

Alignment issues with Stack flutter

I have design that shows flash offers count but when i tried to design like the following image the alignment of widgets do not work properly. How do i approach this design? I have tried many codes but i am not getting the desired results.
The design i am trying to create
The design i did so far
Code
Widget FlashOffers(){
return GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width:350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))
),
),
Center(child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Flash Offers",style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
)),
Row(
// crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
],),
],
),
),
);
}

Try this: Remove your row widget and add alignment: Alignment.center to stack that is in the row. Wrap you Stack with Align Widget and add alignment: Alignment.centerRight
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width: 350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)),
Align(
alignment: Alignment.centerRight,
child: Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
),
],
),
),
);
}

You should consider adding the label and counter icon inside the container widget.
Your code should look something like this:
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 50,
width: 350,
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3"),
],
)
],
),
),
),
);
}

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: Center(
child: flashOffers(),
),
),
),
);
}
Widget flashOffers() {
return GestureDetector(
onTap: () {
print('new route push');
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 350,
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFc1202e),
Color(0xFFea2127),
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.all(
Radius.circular(30),
),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(-10, 10),
color: Colors.black26,
),
]),
child: Row(
children: [
Expanded(
child: Text(
"Flash Offers".toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Stack(
alignment: Alignment.center,
children: [
Icon(
Icons.folder,
size: 30,
color: Colors.yellowAccent,
),
Text(
'3',
style: TextStyle(color: Colors.red),
),
],
),
SizedBox(width: 10),
],
),
),
),
);
}
}

Here is the example without using Stack. Hope you will get the idea and it will help :-)
return MaterialButton(elevation: 8,
color: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0)
),
child: Row(children: [
Expanded(child: Text('FLASH OFFER', textAlign: TextAlign.center)),
CircleAvatar(
backgroundColor: Colors.yellow, radius: 12, child: Text("2"))
]),
onPressed: () {
print('button pressed');
});
Edit: To show the shadow, use the elevation property of button. You can also change the shadow color

You can use positioned,it is so useful in stack widget.
Look at this:
https://medium.com/codespace69/flutter-widget-positioning-eca4fea1528b#:~:text=A%20Stack%20allows%20you%20to,the%20children%20of%20a%20stack.

Try this
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
),
child: FlatButton(
splashColor: iconButton,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadiusDirectional.circular(20)),
color: primaryColor,
onPressed: () {
sendMail();
},
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Text(
"Send",
style: styleText(
size: 20,
weight: FontWeight.bold,
color: white),
),
Container(
child: Center(
child: SvgPicture.asset(
ic_profileWhite,
height: 20,
width: 20,
),
),
),
],
),
),
),
),