The Bottom Sheet Demo is a cross-platform application that features a floating menu at the bottom of the screen. This menu unfurls to reveal a menu above the rest of the app interface, making it easy and convenient for users to access the various features and options within the app. The Bottom Sheet Demo has been built using a single code base and single UI for Android, iOS, macOS, Windows, and Linux, making it compatible with a wide range of devices and operating systems. With its sleek and user-friendly design, the Bottom Sheet Demo is perfect for anyone who wants a simple and effective way to manage their apps.
Download the full cross-platform Bottom Sheet Demo source code on Github.
This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.
Table of Contents
What is a bottom sheet in software development?
A bottom sheet is a temporary piece of UI that appears on top of the main content when it is triggered by user input. It can be used to display additional information or actions related to the current screen. Bottom sheets are often used to provide contextual options or actions that can be performed on the content beneath them. Bottom sheets can be either modal or persistent, depending on how they are implemented. Modal bottom sheets are dismissed when the user clicks outside of the sheet, while persistent bottom sheets remain visible even when the user interacts with other parts of the UI. Bottom sheets are an effective way to provide supplemental information or actions without interrupting the user’s main task.
Bottom sheets are a versatile tool that can be used in a variety of scenarios. They can be used to display context-sensitive options or actions, provide supplemental information, or simply act as a placeholder for more detailed content. When used effectively, bottom sheets can greatly improve the overall user experience of an app.
Screenshot
What does the source code look like for this cross-platform 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants, FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation, FMX.ListView.Types, FMX.ListView.Appearances, FMX.ListView.Adapters.Base, FMX.ListView, FireDAC.Stan.Intf, FireDAC.Stan.Option, FireDAC.Stan.Param, FireDAC.Stan.Error, FireDAC.DatS, FireDAC.Phys.Intf, FireDAC.DApt.Intf, FireDAC.Stan.StorageBin, System.Rtti, System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt, Fmx.Bind.DBEngExt, FMX.Ani, Data.Bind.Components, Data.Bind.DBScope, System.ImageList, FMX.ImgList, Data.DB, FireDAC.Comp.DataSet, FireDAC.Comp.Client, FMX.Objects, FMX.Layouts; type TForm1 = class(TForm) MaterialOxfordBlueSB: TStyleBook; ToolBar1: TToolBar; ShadowEffect4: TShadowEffect; Label1: TLabel; ToolBar2: TToolBar; Button1: TButton; Label2: TLabel; <strong> ListView1: TListView; FDMemTable1: TFDMemTable; ImageList1: TImageList; BindSourceDB1: TBindSourceDB; BindingsList1: TBindingsList; LinkFillControlToField1: TLinkFillControlToField; FloatAnimation1: TFloatAnimation;</strong> Label3: TLabel; Layout1: TLayout; Layout2: TLayout; Rectangle1: TRectangle; <strong> procedure Button1Click(Sender: TObject); procedure FloatAnimation1Finish(Sender: TObject); procedure ListView1ItemClick(const Sender: TObject; const AItem: TListViewItem); procedure Rectangle1Click(Sender: TObject); procedure FormCreate(Sender: TObject);</strong> private { Private declarations } public { Public declarations } <strong> procedure HideBottomSheet;</strong> end; var Form1: TForm1; implementation {$R *.fmx} <strong>procedure TForm1.Button1Click(Sender: TObject); begin if ListView1.Height=0 then begin Layout1.Visible := True; FloatAnimation1.Enabled := True; end else begin HideBottomSheet; end; end; procedure TForm1.FloatAnimation1Finish(Sender: TObject); begin FloatAnimation1.Enabled := False; end; procedure TForm1.FormCreate(Sender: TObject); begin ListView1.Height := 0; end; procedure TForm1.ListView1ItemClick(const Sender: TObject; const AItem: TListViewItem); begin HideBottomSheet; Label3.Text := AItem.Text; end; procedure TForm1.Rectangle1Click(Sender: TObject); begin HideBottomSheet; end; procedure TForm1.HideBottomSheet; begin ListView1.Height := 0; Layout1.Visible := False; end;</strong> end. |
Ready to learn how to program cross-platform apps like this?
Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.
