FWidget takes care to provide elegant components to help you build beautiful applications.

Hello developers, come to see, this is by our carefully baked for developers 🍩 new component, F ~ ~ ~ Float.

FFloat is the fifth member of the FWidget family of components developed and maintained by [Alibaba-Fliggy Mobile Technology team].

As our Slogan: “Carefully provide exquisite components, help you build beautiful applications.”

We’re really trying to craft a nice set of components that make it easier for developers to build Beautiful apps.

Over the past few weeks, we’ve opened up four polished basic functional components to the community, received 333 stars from developers, and thank you so much for your recognition and support πŸ₯°.

Now we have our fifth member of the FWidget, FFloat.

FFloat was born out of the problem of floating elements, which has always been a problem in our daily development.

It’s almost impossible to calculate how many cans of Coca-Cola our anxiety caused us to drink when we needed to develop the following interaction elements πŸ₯€ before FFloat came along

Of course, for this example 🌰, this is a very simple example of a floating element.

FFloat will solve all the problems.

Now, the time point will be divided into two parts, before and after FFloat.

FFloat is a natural at simplifying things into complexity.

Thanks to a lot of complicated logic processing and calculation in FFloat, developers can restore creation in the most natural and simple way when using it.

✨ features

Here are some of the features FFloat brings to developers:

  • Both anchor mode and absolute mode are supported

  • Flexible enough, simple enough position control

  • Supports configuration of background mask

  • It has exquisite dynamic effect and can be adjusted intelligently according to position relationship

  • Rich decorative triangle configuration

  • The outer container supports rounded corners, borders, gradients, shadows, and more

  • Convenient show/hide control

πŸ›Έ transfer zone

πŸ›Έ [Portal: FFloat Github home page – Thank you for your Star 🌟]

πŸ“– [Portal: FFloat documentation]

πŸ“ position control based on anchor elements

Simple enough, effective enough

FFloat(
  Float element content
  (setter) => createContent(),
  alignment: _alignment,
  margin: _margin

  /// anchor element
  anchor: buildAnchor(),
)
Copy the code

The amazing thing about FFloat is that all the developer needs to do is provide an anchor point via the Anchor parameter and FFloat knows how to display floating elements in the right place.

And FFloat doesn’t have any adverse effects on the original anchor elements and visible view tree structure, which is amazing.

For the content to be shown, FFloat is built using the FloatBuilder function. All the developer needs to do is return the floating content that needs to be displayed in this function, and FFloat takes care of the rest.

In addition, in the FloatBuilder function, the developer can get the refresh function StateSetter as an argument to the function, which limits the refresh scope to the floating content area instead of refreshing the entire page area. This is crucial to building a nice, silky application.

FFloat(
  (setter){
    return FButton(text: _text, 
      onClick: (){

        /// Update the floating contentsetter((){ updateText(); })}); },...).Copy the code

If you are not satisfied with where the floating element appears, FFloat provides alignment and margin parameters that allow developers to adjust the floating element’s position in an incredibly simple way until they are satisfied.

Alignment provides a full range of relative position options:

type instructions
topLeft Above the anchor element, with the left edge aligned with the anchor element
topCenter Above the anchor element and horizontally centered
topRight Above the anchor element, and the right edge is aligned with the anchor element
bottomLeft Below the anchor element, and aligned with the anchor element
bottomCenter Below the anchor element and horizontally centered
bottomRight Below the anchor element, and the right edge is aligned with the anchor element
leftTop On the anchor element [left], and the [upper edge] is aligned with the anchor element
leftCenter At the anchor element [left], and vertically centered
leftBottom On the anchor element [left], and the [lower edge] is aligned with the anchor element
rightTop It is on the right side of the anchor element and the upper edge is aligned with the anchor element
rightCenter At the anchor element [right], and vertically centered
rightBottom It is on the right side of the anchor element, and the lower edge is aligned with the anchor element

From there, the margin parameter allows developers to further fine-tune the offset of floating elements based on their current relative position.

In the past, achieving these effects required a lot of effort to navigate complex positional logic and write different algorithms to determine the final position of floating elements.

Now, it’s as simple as that 😎.

πŸ“Œ Position control based on absolute coordinates

One more model, one more possibility

GestureDetector(
  onPanDown: (details) {
    FFloat(
      (setter) => createContent(),
      autoDismissDuration: Duration(milliseconds: 2000),
      alignment: _alignment,
      canTouchOutside: false./// Configure float element positions with absolute coordinates
      location: Offset(details.globalPosition.dx, details.globalPosition.dy),
    ).show(context); / / / show
  },
  child: FSuper(...),
)
Copy the code

In some cases, our floating element does not need to be based on an anchor point, but rather we want it to be at a certain location.

If the developer knows such a location, the location parameter can be used to set the location of the floating element.

At this point, the developer doesn’t need to put FFloat in the view tree to wrap any component elements at all. This means that developers can create a floating element in any callback or function at any time, anywhere.

With ffloat.show (context) and ffloat.dismiss (), developers can easily show/hide floating elements at any time.

All other FFloat configurations remain in effect.

πŸ’« background mask and dynamic effect

The effect will be rich, will achieve simplification

# background mask demonstrates FFloat((_) => buildSearchWidget(), color: color.black.withopacity (0.95),

  /// Configure the background mask color
  backgroundColor: Colors.black26,
  corner: FFloatCorner.all(20),
  margin: EdgeInsets.only(bottom: 10, left: 10),
  anchor: buildAnchor(),
  alignment: FFloatAlignment.topRight, 
 
  /// configure the click on whether the non-floating element area is hidden
  canTouchOutside: false.)Copy the code

In FFloat, a single parameter, backgroundColor, is used to mask the background of the floating element.

By default, all events are blocked when floating elements are present, and developers can turn this off with the canTouchOutside parameter.

Dynamic effect configuration
FFloat(
  (_) => FSuper(text: "SurpriseπŸ˜ƒ !"), anchor: buildAnchor(), /// When this parameter is not null, FFloat automatically disappears after the specified Duration. 2000), animDuration: Duration(milliseconds: 800),Copy the code

FFloat comes with beautiful interactive effects, which can be automatically adjusted according to the position of floating elements to present the most elegant visual effects.

Using the animDuration parameter, developers can define their own duration. Of course, if you don’t need any dynamic effects, just pass in NULL.

In many scenarios, we expect a floating element to appear and then disappear after a certain amount of time.

Typically, to achieve this effect, developers need to create separate timers, state machines and, in special cases, additional state logic validation to make sure the effect is seamless. There’s just too much logic to consider.

FFloat allows developers to do this with just one parameter: autoDismissDuration.

πŸ”Ί Decorative triangle

Save effort, save worry, save internal storage

FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),

  /// configure the relative position of the decoration triangle
  triangleAlignment: TriangleAlignment.start,

  // set the relative offset of the trim triangle
  triangleOffset: Offset(10.10),

  /// configure the width of the decorative triangle
  triangleWidth: 20./// configure the height of the decorative triangle
  triangleHeight: 15.)Copy the code

Before FFloat, tooltips-style floating elements were often too cumbersome to implement.

What really stumps developers is a small triangle on the floating element 😲. Experienced developers must know the bitterness behind this.

Since the platform system does not provide support for triangles or components with triangles, developers have to choose between drawing on Canvas or using images instead.

The former is flexible and efficient, but the implementation is tedious, not just to draw a triangle on a Canvas, but also to consider the integration of real floating elements.

The latter is easy to implement, but for triangles of different colors, positions and sizes, developers need to configure multiple sets of images for them, and memory will gradually accumulate over time. However, developers tend to choose this approach because of cost and efficiency.

FFloat solves these problems completely, and is both efficient and flexible, even better than developers had hoped.

In the Code demo above, I’ve shown common FFloat configurations for small triangles, including simple relative positions, dimensions, and fine-tuned position offsets.

Now, developers can remove all similar image resources from their applications πŸ‘.

In addition to solving past problems, FFloat is able to automatically adjust its triangle to a proper position based on the relative position of floating elements and anchor elements. This process is completely invisible to the developer.

FFloat(
  (setter) => buildContent(),

  /// configure whether to hide decorative triangles
  hideTriangle: true,
  anchor: buildAnchor(),
),
Copy the code

By default, FFloat displays decorative triangles. If not, developers can simply configure hideTriangle: true to hide it.

πŸ”† Rounded corners & borders

Simple, but not shabby


FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),
  alignment: FFloatAlignment.bottomLeft,
  hideTriangle: true./// add rounded corners
  corner: FFloatCorner.all(6),

  /// add a border
  strokeColor: mainShadowColor,
  strokeWidth: 1.0.)Copy the code

In the above example 🌰, we can clearly see that a nice rounded layer with a border is so simple to build.

FFloat provides a simple way to set rounded corners for FWidget components in the same line. With a simple corner parameter, you can flexibly configure rounded corners.

The cornerStyle property, which comes with the corner, allows developers to switch the style of rounded corners (rounded corners or beveled corners) at any time.

As fans of FWidget know, the strokeWidth and strokeColor properties are all you need to configure the border effect for your widget.

Our mission has always been to help developers build beautiful applications more easily and efficiently.

πŸŒ” Gradient & Shadows

Keep it simple, but keep it brilliant


FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),
  hideTriangle: true,
  alignment: FFloatAlignment.bottomCenter,

  /// configure gradient
  gradient: SweepGradient(
    colors: [
      Color(0xffE271C0),
      Color(0xffC671EB),
      Color(0xff7673F3),
      Color(0xff8BEBEF),
      Color(0xff93FCA8),
      Color(0xff94FC9D),
      Color(0xffEDF980),
      Color(0xffF0C479),
      Color(0xffE07E77),,),/// add shadows
  shadowColor: Colors.black38,
  shadowBlur: 3,
  shadowOffset: Offset(3.2),Copy the code

Yes, FFloat has support for gradients despite all of its capabilities.

By simply using the gradient attribute, developers can get an amazing gradient effect.

In addition, as a modern component, FFloat certainly supports shadows.

Developers only need to configure the shadowColor parameter to get a basic shadow effect.

If you want to further adjust the shadow, you can use the shadowBlur and shadowOffset parameters to do so.

πŸ‘ more wonderful

Let FFloat solve the problem of floating elements, developers only need to worry about how to make the application beautiful.

Want more details? Please visit theFFloatOfficial homepage (PS: Don’t forget to submit one you agree withStarOh 😘).

How do I use πŸ˜ƒ?

Add dependencies to the project pubspec.yaml file:

🌐 pub Dependent mode

Dependencies:Copy the code

⚠️ Note, go to pub for the latest version of FFloat

πŸ–₯ Git dependency mode

dependencies:
  ffloat:
    git:
      url: '[email protected]:Fliggy-Mobile/ffloat.git'
      ref: '< branch number or tag>'
Copy the code

⚠️ Note that the branch number or tag is subject to FFloat official project.

Feeling good? Please go to FFloat’s Github page to submit a Star you like 🌟!

Past components

  • FSuper – Helps developers build beautifully complex views quickly

  • FButton – Lots of nice configuration options for developers

  • FSwitch – Beautiful switch elements with excellent interaction and visuals

  • FRadio – a radio component for almost any radio scenario