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.sstatic.net/aHRBa.png my screen https://i.sstatic.net/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.