Flutter Floating Widget
Design Custom Flutter Floating widget Component step by step guide with example Code using getwidget UI library.
Floating widgets generally stick with screens on our application. It has usually paired with one of our Floating action buttons in our Flutter App. Flutter Floating widgets help us to build a specific call to action that will pair with our application screens. It is generally known as Flutter overlay widgets that will float on top of other widgets in our Flutter app development. We can build these floating widgets with Flutter Widgets as well as there are some of our UI packages. Here we are explaining how we build a nice and fully customizable Flutter Floating Widget with GetWidget Floating Widget Component.
Design Floating widget with GFFloating?
GFFloating Widget is a GetWidget component that is used as a Scaffold in any dart page in other words to overlay any widget in your Flutter App. GFFloating Widget is a simple widget component that mainly focuses on achieving other operations like toast, alert, or even a popup without writing a hardcoded or any extra lines of code. Basically, It is designed to give flexibility and make the most use of the horizontal and vertical positions of the popups, alerts, etc that can be placed on the body of the page. While using this widget it is easier and consumes little lines of code for the extra activities to show like the popups, It is not hardcoded to use the popups, alerts, etc in this component as it works smoothly like a scaffold.
Hence GFFloating Widget does two activities at the same time i.e., it can be used just like a scaffold or it can also be used to show the pop-ups, etc. Thus, it is more beneficial than writing hard-coded lines for popups, alerts, toasts, etc.
How to use the GFFloating widget in your app
GFFloating Widget is basically a skeleton to other widgets and has properties like body and child wherein the body acts like the default Scaffold's body. The GFFloating Widget is mostly and effectively used to show some popups, alerts, or some error messages which float over the main body.
GFFloating widget's child property takes any kind of widget but mostly preferred widgets are the popups, alerts which basically show some message to the user. The body of GFFloating Widget takes a normal scaffold's body functionality as in where we can use any kind of other components. It is a simple widget wherein we can achieve a basic or a customized popup wherever required.
It has two other properties called the position properties, known as horizontalPosition and VerticalPosition which is explicitly used to align the child widget wherever needed over the main body, it is just like placing the popups, alerts, or any other error messages on the top, left, center, etc, corners of the main body.
The flexibility of the GFFloating widget is that it has a custom property of changing the background color and the blurriness of the body whenever any popups or alerts are shown to the user, the body automatically blurs itself and highlights the messages to the user. Thus it is a very flexible component and is very useful when using popups, alerts or to show any error messages.
Flutter Overlays Widget Example
The most common example is Flutter Floating Button widgets that overlays our other component to keep moving or floating over our app screen. This widget will help, If your application has a requirement for live chat support.
How to Start with Flutter Floating widget
Now here is the guide about how we should start developing Flutter Floating Widget while using GetWidget UI Library.
Getting started will guide you on how to start building a beautiful flutter application with the GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.
Install Package from pub.dev :
https://pub.dev/packages/getwidget
Import full package:
import 'package:getwidget/getwidget.dart';
Note: dependencies: getwidget: ^4.0.0
Keep playing with the pre-built UI components.
Flutter Floating Widget with Example Code
GFFloating Widget has two properties called child and the body and the simple example code is as shown below.
import 'package:getwidget/getwidget.dart';
return Scaffold(
body:GFFloatingWidget(
child:Text('This is a floating text'),
body:Text('body or any kind of widget here..')
)
)Flutter Floating Widget with example Code snippet
GFFloating widget has two types of positions ie, horizontalPosition and VerticalPosition in which the child of the GFFloating widget can be placed anywhere inside the body (top, center, bottom, left, right).
The below code shows how to use the positions.
import 'package:getwidget/getwidget.dart';
return Scaffold(
body:GFFloatingWidget(
child: GFIconBadge(
child: GFAvatar(
size: GFSize.large,
backgroundImage:AssetImage('your asset image'),
),
counterChild: GFBadge(
text: '12',
shape: GFBadgeShape.circle,
)
),
body:Text('body or any kind of widget here..'),
verticalPosition: MediaQuery.of(context).size.height* 0.2,
horizontalPosition: MediaQuery.of(context).size.width* 0.8,
)
)
Flutter Custom Floating Widget Example Code Snippet
GF Flutter Floating Widget Custom Properties
The look and feel of GFFloating Widget can be changed using the below properties:
| Name | Description |
|---|---|
| showBlurness | showBlurness defines whether the body should be blur or not when showing popups, error messages, etc whenever the child property is used in GF Floating widget. The showBlurness defaults to false. |
| blurnessColor | defines how much blur backgroundColor should be whenever the child is used and when showBlurness is true |
Read more about the Flutter Floating Widget component of GetWidget UI Library here
getwidgetDoes Floating Widget use a Flutter overlay widget?
Yes, It can be used as an overlay widget while using Flutter overlays classes. Like OverlayEntry, OverlayState, WidgetsApp, MaterialApp.
Is this Widget used as a Flutter Floating Button?
Yes, we can use this widget to build Flutter Floating Button. Or we can use FloatingActionButton class to build Floating buttons. To read more about the Floating button widget check out Floating Button Class
What is the Overlay widget?
It is a stack of entries that could be managed independently. Overlays means, Let an independent child widget “float” as a visual element on the top of other widgets while inserting them into its Stack. All these widgets manage their contribution in the overlay while using OverlayEntry objects.
getwidget
GitHub Repository: Please do appreciate our work through Github start
Conclusion:
Here we discuss, what Flutter Floating Widget is? And how we can use and implement it into our Flutter app through the GetWidget Floating Widget component. Here, there are options to customize the Floating Widget.
About Our Team:
We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as After successfully delivering enterprise and SAAS applications that have been used by more than 500+ businesses around 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we trying to give a small contribution to the Flutter Dev Community.