Flutter Floating Widgets:


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 the 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 GetFlutter Floating Widget Component.

What is a GFFloating widget?

GFFloating Widget is a GetFlutter component which is used as a Scaffold in any dart page in other word 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.

Where to use this?


GF Floating 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 GF Floating Widget is mostly and effectively used to show some popups, alerts or some error messages which floats 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 GFFloating widget is that it has a custom property of changing the background color and its blurness 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 helps, If your application has a requirement for live chat support. Check out a short introduction video about Floating Button widgets.

Video Credit: Flutter.dev

How to Start:

Now here is the guide about how we should we start developing Flutter Floating Widget while using GetFlutter UI Library.

Getting started will guide you how to start building a beautiful flutter application with GetFlutter 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/getflutter

Import full package:

import 'package:getflutter/getflutter.dart';

Note: dependencies: getflutter: ^1.0.4

Keep playing with the pre-built UI components.

Example to use GFFloating widget :

import 'package:getflutter/getflutter.dart';

return Scaffold(
  body:GFFloatingWidget(
    child:Text('This is a floating text'),
    body:Text('body or any kind of widget here..')
  )
)

GFFloating widget has two types of positions ie, horizontalPosition and VerticalPosition in which the child of GF Floating widget can be placed anywhere inside the body (top, center, bottom). The below code shows how to use the positions.

import 'package:getflutter/getflutter.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,
  )
)

There are two custom properties for GFFloating widget to build Flutter Floating Widgets:

  1. showblurness: Basically showblurness is a boolean value in which it allows the user to blur the body or not whenever the popup messages show up and it defaults to false.
  2. blurnessColor: The blurnessColor shows how much blur backgroundColor should be whenever the child is used and when showblurness is true.

Conclusion:

Here we discuss what Flutter Floating widgets are? And how we can build and use them in our Flutter app through GetFlutter Floating Widgets component. Here also got an idea where we should use a floating widget in our Flutter app that will increase our user interaction with our app and enhance overall user experience with our app.

FAQ:

Q. Does Floating Widget use a Flutter overlay widget?

Ans: Yes, It can be used as an overlay widget while using Flutter overlays classes. Like OverlayEntry, OverlayState, WidgetsApp, MaterialApp.

Q. Is this Widget used as a Flutter Floating Button?

Ans: 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

Q. What is the Overlay widget?

Ans: 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.