How to realize the effect of bottom drawer in flutter
Editor to share with you how to achieve the bottom drawer effect of flutter, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!
The details are as follows
Android: showModalBottomSheet
IOS:showCupertinoModalPopup
Effect picture
Complete code
Author: Q.L package:flutter/cupertino.dart';import package:flutter/material.dart';///@ author: Q.L const ActionSheetPage const ActionSheetPage @ creation date: 2021-09-09 10 bank 55 const ActionSheetPage @ description: {bottom drawer} const ActionSheetPage ({Key? Key}): super (key: key); @ override _ ActionSheetPageState createState () = > _ ActionSheetPageState () } class _ ActionSheetPageState extends State {@ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('bottom drawer pops'),), body: Center (child: Column (mainAxisAlignment: MainAxisAlignment.center, children: [ElevatedButton (onPressed: () {_ showModalBottomSheet () }, child: Text ('Android pop'), ElevatedButton (onPressed: () {_ showCupertinoModalPopup ();}, child: Text ('IOS pop')),],),)) } _ showModalBottomSheet () async {var _ result = await showModalBottomSheet (context: context, backgroundColor: Colors.greenAccent, / / background color / / elevation: 500, / / Shadow shape: RoundedRectangleBorder (/ / borderRadius: BorderRadius.all (Radius.circular (10)), / / all fillet borders borderRadius: BorderRadius.only (topLeft: Radius.circular (10)) TopRight: Radius.circular (10)), isScrollControlled: false, / / whether it is full screen or half screen True full screen. Default false half screen isDismissible: true, / / whether the outside can be clicked, false can not be clicked, true can click Click and disappear builder: (BuildContext context) {return Column (mainAxisSize: MainAxisSize.min, / / set the smallest pop-up children: [ListTile (leading: Icon (Icons.photo_camera), title: Text ("photo")) OnTap: () {Navigator.of (context) .pop ('photo') },), ListTile (leading: Icon (Icons.photo_library), title: Text ("album"), onTap: () {Navigator.of (context) .pop ("album") },),],);}); print ('Android = = > > ${_ result?? 'clicked on the screen to cancel'}';} _ showCupertinoModalPopup () async {var result = await showCupertinoModalPopup (context: context, builder: (context) {return CupertinoActionSheet (title: Text ('prompt'), message: Text ('do you want to edit the current item?') , actions: [CupertinoActionSheetAction (child: Text ('edit'), onPressed: () {Navigator.of (context) .pop ('edit') }, isDefaultAction: true,), CupertinoActionSheetAction (child: Text ('delete'), onPressed: () {Navigator.of (context) .pop ('delete') }, isDestructiveAction: true,], cancelButton: CupertinoActionSheetAction (child: Text ('cancel'), onPressed: () {Navigator.of (context) .pop ('cancel');},)) ); print ('selected IOS== > > ${result?? Click on the screen to cancel'}');}} above is all the content of the article "how to achieve the bottom drawer effect in flutter". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
