How can I make my bottom sheet look like this?
276
Check this code,let me know this work for you
for more details check this link cupertino Widgets also refer cupertino-ios-style-actionsheet
import 'package:flutter/cupertino.dart';
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: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("CupertinoActionSheet"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
final action = CupertinoActionSheet(
title: Text(
"Flutter dev",
style: TextStyle(fontSize: 30),
),
message: Text(
"Select any action ",
style: TextStyle(fontSize: 15.0),
),
actions: <Widget>[
CupertinoActionSheetAction(
child: Text("Action 1"),
isDefaultAction: true,
onPressed: () {
print("Action 1 is been clicked");
},
),
CupertinoActionSheetAction(
child: Text("Action 2"),
isDestructiveAction: true,
onPressed: () {
print("Action 2 is been clicked");
},
)
],
cancelButton: CupertinoActionSheetAction(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
),
);
showCupertinoModalPopup(
context: context, builder: (context) => action);
},
child: Text("Click me "),
),
),
);
}
}
Author by
Ben Ajax
Updated on December 31, 2022Comments
-
Ben Ajax over 1 year
I would like make my bottom sheet like this- no background and the height and width determined by the content.
showModalBottomSheet( context: context, elevation: 0, backgroundColor: Colors.transparent, builder: (context) => Container( height: 60, decoration: BoxDecoration( color: Colors.transparent, borderRadius: BorderRadius.only( topLeft: const Radius.circular(50.0), topRight: const Radius.circular(50.0), ), ), child: Container( color: AppColors.grey8, padding: EdgeInsets.all(12), child: Text("Call Doctor", style: TextStyle( fontSize: 14, fontWeight: FontWeight.w600, fontFamily: 'Euclid', color: AppColors.textColor, ),) ), ), );
-
Ben Ajax over 2 yearscan you review this question? stackoverflow.com/questions/68643778/…
-
Abhijith over 2 yearsI have answered the question check it @Ben Ajax