Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve BottomSheet popping up at the bottom of flutter". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Effect picture:

ModalBottomSheet

This ModalBottomSheet is similar to a Dialog, with a translucent background layer, and then displays your custom content. The use is very simple, Flutter provides a showModalBottomSheet method to pop up a BottomSheet.

Implementation code:

Class AddExpense extends StatefulWidget {@ override State createState () = > _ AddExpensePage ();} class _ AddExpensePage extends State {List typeList = List (); Search _ search; bool _ typeCheck = false; @ override void initState () {/ / TODO: implement initState super.initState (); _ loadType () } @ override Widget build (BuildContext context) {/ / TODO: implement build return Column (children: [Card (child: Row (children: [SizedBox (width: 16.0,), Text ('reimbursement Type:', style: TextStyle (fontSize: 16)) Expanded (child: ListTile (title: Text (_ search.code?? "reimbursement type", trailing: _ typeCheck? Icon (Icons.keyboard_arrow_up): Icon (Icons.keyboard_arrow_down), onTap: () {setState (() {_ typeCheck =! _ typeCheck;})) ShowModalBottomSheet (context: context, builder: (BuildContext context) {return ListView.separated (itemCount: typeList.length, separatorBuilder: (context, index) {return Divider () }, itemBuilder: (context, index) {return ListTile (title: Text (typeList [index] .code) Trailing: Offstage (offstage: typeList [index] .check? False: true, child: Icon (Icons.check), onTap: () {for (int I = 0; I < typeList.length) ITunes +) {I! = index? TypeList [I] .check = false: typeList [I] .check = true;} _ search = typeList [index]; Navigator.pop (context) },). Then ((val) {setState (() {_ typeCheck =! _ typeCheck) });});},),)],),],),) } void _ loadType () {String jsonData ='[{"code": "Travel reimbursement", "check": true}, {"code": "General expense reimbursement", "check": false}, {"code": "temporary overseas Expenditure Table", "check": false}, {"code": "Drug expense reimbursement", "check": false}, {"code": contract payment approval form "check": false}, {"code": "reimbursement form for payroll system", "check": false}]' List list = json.decode (jsonData); list.forEach ((element) {Search search = Search.fromJson (element); if (search.check) {setState (() {_ search = search;});} typeList.add (search);});}} "how BottomSheet pops up at the bottom of flutter" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.