Floating panel let's you create quick Floating menu for the screen.

Overview

Flutter Float Box

alt Become a patron

Float Box - v1.0

Overview

alt Floating Panel

Float box is a true floating panel for your app, which can be docked to either edges of the screen (horizontally).

Code - Basic:

This is what you needs to get the widget working. Import Widget -> Add 'FloatBoxPanel' at the bottom of your stack widget. Add icons inside the "buttons" list.

import 'package:widgets/float_box.dart'; // Import Float Box Widget

Stack(
    children: [
        ...

        // Add Float Box Panel at the bottom of the 'stack' widget.
        FloatBoxPanel(
            buttons: [
                // Add Icons to the buttons list.
                Icons.message,
                Icons.photo_camera,
                Icons.video_library
            ]
        );
    ]
);

alt Floating Panel

Code - All Properties:

These are all the properties you can customize of the floating panel.

    import 'package:widgets/float_box.dart'; // Import Float Box Widget
    
    Stack(
        children: [
            ...
    
            // Add Float Box Panel at the bottom of the 'stack' widget.
            FloatBoxPanel(
                positionTop: 0.0, // Initial Top Position
                positionLeft: 0.0, // Initial Left Position
                backgroundColor: Color(0xFFEDEDED), // Color of the panel
                contentColor: Colors.black, // Color of the icons
                panelShape: PanelShape.rectangle, // 'PanelShape.rectangle' or 'PanelShape.rounded', border radius property doesn't work in the rounded shape
                borderRadius: BorderRadius.circular(8.0), // Border radius of the panel
                dockType: DockType.inside, // 'DockType.inside' or 'DockType.outside', weather to dock the panel outside or inside the edge of the screen
                dockOffset: 5.0, // Offset the dock from the edge depending on the 'dockType' property
                panelAnimDuration: 300, // Duration for panel open and close animation
                panelAnimCurve: Curves.easeOut, // Curve for panel open and close animation
                dockAnimDuration: 300, // Auto dock to the edge of screen - animation duration
                dockAnimCurve: Curves.easeOut, // Auto dock animation curve
                panelOpenOffset: 20.0, // Offset from the edge of screen when panel is open
                panelIcon: Icons.menu, // Panel open/close icon
                size: 70.0, // Size of single button in the panel
                iconSize: 24.0, // Size of icons
                borderWidth: 1.0, // Width of panel border
                borderColor: Colors.black, // Color of panel border
                onPressed: (index) {
                    print("Clicked on item: $index");
                }
                buttons: [
                    // Add Icons to the buttons list.
                    Icons.message,
                    Icons.photo_camera,
                    Icons.video_library
                ]
            );
        ]
    );
You might also like...

Beautiful Login Panel UI with support for dark mode and validation. Created by Martin Gogołowicz.

Flutter Login UI with darkmode support Flutter 2.8.0 Null Safety Beautiful Login Panel UI with support for dark mode and validation. Created by Martin

Dec 17, 2022

A quick sample app on how to implement a friend list and a profile page in Flutter.

A quick sample app on how to implement a friend list and a profile page in Flutter.

FlutterMates All code resides in the /lib folder: there's no Android / iOS specific code needed. The article, slides and how this came to be, is here.

Dec 29, 2022

An Advanced Logging Framework develop in flutter that provides quick & simple logging solution.

An Advanced Logging Framework develop in flutter that provides quick & simple logging solution.

FLogs Advance Logging Framework FLog is an Advanced Logging Framework develop in flutter that provides quick & simple logging solution. All logs are s

Dec 30, 2022

ghiNote is a quick note application with a good-looking interface and simple operation.

ghi_note ghiNote is a quick note application with a good-looking interface and simple operation. Getting Started This project is a starting point for

Dec 15, 2021

ViteED - a quick learning app

ViteED - a quick learning app

viteED is an open source learning app, currently under development. The app aims at providing users a platform to read or/and write mini blogs (=100 words) on various range of topics.

Nov 7, 2022

Famous FB Messenger Floating Chat head UI developed in Flutter.

Famous FB Messenger Floating Chat head UI developed in Flutter.

Messenger Chat Head Tried to clone the famous Chat Heads by Facebook Messenger using Flutter. 🔴 Issues are reported in the bottom of README, feel fre

Dec 27, 2022

This repo contains the side menu UI for admin template

f9tech A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Dec 11, 2021

A flutter app face detection and emotion, can detect if you're smiling, big smiley, sad or if there is not face on the screen.

My Emotion A flutter app face detection and emotion, can detect if you're smiling, big smiley, sad or if there is not face on the screen. News feactur

Dec 31, 2022
Owner
Akshaye JH
Akshaye JH
A shopping cart application that lets the user create an account, select items, save the items in the cart, pay using the payment gateway, change account details and check order history.

Shopping Cart A new Flutter application. The main code file has all the code required for the mobile application. Getting Started This project is a st

null 1 Oct 14, 2021
A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully

Muhammad Hamza 21 Jan 1, 2023
This plugin lets you show a message in a simple way.

error_message This plugin lets you show a message in a simple way. Usage ErrorMessage( icon: Icon(Icons.error), title: "Error Title",

TamilKannan-Developer 0 Dec 5, 2021
Radiao - a radio explorer app that lets you listen to several stations of various countries

radiao Radiao is a radio explorer app that lets you listen to several stations of various countries. features trending stations popular stations liste

null 4 Apr 20, 2022
Android app that converts an URL to markdown, and lets you share it to your favorite notes app.

markdownr Android app that converts an URL to markdown, and lets you share it to your favorite notes app. I've written this app to save articles I fou

Andrea Ghensi 41 Dec 10, 2022
A discord bot, made with Dart, which lets you run your own pure Dart code snippets directly via a discord ping, and get the output in an instant.

A discord bot, made with Dart, which lets you run your own pure Dart code snippets directly via a discord ping, and get the output in an instant.

Anikate De 3 Oct 21, 2022
Flutter Smart Admin Panel & Dashboard

?? ?? Smart Admin Panel & Dashboard Flutter Web Smart Admin & Panel Dashboard with flutter UI kit. Support ⭐️ If you want to access the backend(Fireba

Deniz Çolak 333 Dec 25, 2022
An admin panel aplication written with Flutter, aiming work with apps responsiveness.

admin_panel A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Samilly Nunes 2 Oct 23, 2021
Schoolclearance admin panel with full functionalities made with flutter

Schoolclearance admin panel with full functionalities made with flutter :) ?? you can also buy me coffee ?? Requirements ?? Any Operating System (MacO

Dami 11 Oct 12, 2022
Flutter Admin Panel Made In Flutter 2.8

Responsive Admin Panel or Dashboard - Flutter UI Packages we are using: flutter_svg: link google_fonts: link provider: link Fonts Poppins link Respons

Manish Dayma 58 Dec 23, 2022