showCupertinoModalPopup(
context: context,
builder: (context) {
return CupertinoActionSheet(
actions: [],
title: Text("Sampark Tag"),
message: CupertinoSearchTextField(),
cancelButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: CupertinoActionSheetAction(
onPressed: () {}, child: Text("Cancel")),
),
CupertinoActionSheetAction(
onPressed: () {}, child: Text("Cancel"))
],
),
);
},
);
result needed https://i.stack.imgur.com/aHRBa.png my screen https://i.stack.imgur.com/cK90U.png
if you want to build the same design you can do it with the following code
showModalBottomSheet<void>(
backgroundColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return Container(
height: 310,
margin: EdgeInsets.all(30),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: 250,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Sampark"),
CupertinoSearchTextField(),
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
),
],
),
),
SizedBox(
height: 10,
),
Container(
child: Row(
children: [
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
),
child: TextButton(
onPressed: () {},
child: Text("Cancel"),
),
),
),
SizedBox(
width: 10,
),
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
),
child: TextButton(
onPressed: () {},
child: Text("Cancel"),
),
),
),
],
),
),
],
),
);
});
Check out the following image. with little adjustment you can achieve the design you want.
Use below code
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) =>
CupertinoActionSheet(
title:
const Text('Select Option'),
message:
const Text('Which option?'),
actions: <Widget>[
CupertinoActionSheetAction(
child: const Text('1'),
onPressed: () {
print('pressed');
},
)
],
cancelButton: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
14),
color: Colors.black
.withOpacity(0.2),
),
child: Row(
children: [
Expanded(
flex: 5,
child: Container(
decoration:
BoxDecoration(
borderRadius:
BorderRadius
.circular(
14),
color: Colors.white
.withOpacity(
0.8),
),
child:
CupertinoActionSheetAction(
onPressed: () =>
Navigator.pop(
context),
isDestructiveAction:
true,
child: const Text(
'Cancel'),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 5,
child: Container(
decoration:
BoxDecoration(
borderRadius:
BorderRadius
.circular(
14),
color: Colors.white
.withOpacity(
0.8),
),
child:
CupertinoActionSheetAction(
onPressed: () =>
Navigator.pop(
context),
child: const Text(
'Cancel'),
),
),
),
],
),
),
),
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.