In this example, I will share how to show bottomSheet beneath bottomNavigationBar in flutter. You can combine your popup with the bottom navigation bar using Column and simulate bottom sheet behavior using Expandable:
Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | import 'package:flutter/material.dart'; import 'package:expandable/expandable.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatefulWidget { @override _SampleAppState createState() => new _SampleAppState(); } class _SampleAppState extends State<SampleApp> { @override Widget build(BuildContext context) { buildBottomSheet() { return Container( color: Colors.grey[200], child: Column(mainAxisSize: MainAxisSize.min, children: [ RadioListTile(dense: true, title: Text('Test'), groupValue: 'test', onChanged: (value) {}, value: true), RadioListTile(dense: true, title: Text('Test'), groupValue: 'test', onChanged: (value) {}, value: true), ])); } return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Sample App'), ), body: Container( color: Colors.green, ), bottomNavigationBar: ExpandableNotifier( child: Column( mainAxisSize: MainAxisSize.min, children: [ ExpandableButton( child: SizedBox(height: 50, child: Center( child: Icon(Icons.edit), ), ), ), Expandable( expanded: buildBottomSheet(), ), ], ), ), ), ); } } |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
