✨ features

Let’s see what FSuper brings you.

• Rich edge effect

• Exquisite border decoration

• Natural support for wonderful rich text

• The gradient effect is no problem

• More spatial shadows

• Not simple little red dot

• Flexible and powerful relative location layout

🛸 transfer zone

[Portal: FSuper Github home page – Thanks to Star 🌟]

【 Portal: FSuper document 】

🔲 edges

Follow your inclinations and show your individuality.

FSuper supports flexible and rich corner Settings. Rounded, bevel, 1, 2,.. You are free to do as you please.

With just two properties corner and cornerStyle, you’ll have all kinds of corner effects.

🖼 border

Make it simple. Make it simple.

Adding borders to FSuper is simple enough.

Simply combine the strokeColor and strokeWidth properties for an immediate, satisfying border decoration. Even with the edge effect, it’s simple enough.

📝 rich text

All in one step.

FSuper naturally supports direct configuration of rich text effects without the need for developers to add additional components. Everything is done in FSuper.

FSuper(
  // # 1
  text: "En.. ",
  spans: [
    // # 2
    TextSpan(
        text: "FWidget",
        style: TextStyle(
          color: Color(0xffffc900),
          backgroundColor: Colors.black38,
          fontSize: 20,
        )),
    // # 3
    TextSpan(text: " are really "), / /# 4
    TextSpan(
        text: "delicious",
        style: TextStyle(
          color: Colors.blue,
          fontSize: 20,
          fontStyle: FontStyle.italic,
        )),
    // # 5
    TextSpan(text: "!"), / /# 6
    TextSpan(
      text: "\nYou can try to ",
    ),
    // # 7
    TextSpan(
      text: "click here", style: TextStyle( color: Colors.redAccent, fontSize: 18, decoration: TextDecoration.underline, decorationColor: Colors.blue, decorationStyle: TextDecorationStyle.wavy, ), recognizer: TapGestureRecognizer() .. onTap = () { _showDialog( context,"YA! How dare you clicked me?"); }), / /# 8
    TextSpan(text: "!"),],), copy the codeCopy the code

FSuper combines the rich text support provided by Flutter with all the capabilities provided by FSuper without introducing new components to support rich text. This is awesome 👏!

🧡 Gradient effect

Enough color, enough color.

Using the gradient property, you can directly configure the LinearGradient, RadialGradient, SweepGradient and other gradient background effects for FSuper.

FSuper is always a sharp tool in reducing hierarchy nesting.

🔳 shadow

More dimensions, all right!

FSuper controls the color and size of component shadows through the simple shadowColor and shadowBlur properties.

Although the code is simple, but the stereo effect is definitely not simple.

🎈 little red dot

There is a mystery in it.

FSuper can make little red dots stand out in your application. The calculation of the position determination of the little red dot is done by FSuper. You just have to focus on what you need.

This was an obvious change, and it was easy to build the little red dot.

🧸 Relative location layout

No matter how complex, it is also simple.

FSuper supports the configuration of up to two child components, CHILD1 and child2, which you can locate by relative location descriptions. This makes a lot of effects, which are not easy to build, simple and clear.

FSuper can smartly determine the size of its own content area, and further determine the position of the child controls relative to the content area based on their relative position configuration. That would solve a lot of problems.

Especially if you don’t know the size of the content area, and the child controls need up-center alignment, or some other alignment, you need to create additional components to nest in order to create this effect of relative position. Sometimes you even have to listen to the drawing to determine the position once you get the main size.

FSuper can prevent these problems from appearing in front of you, and everything will be easy enough.

Organizing the Warning view in the graph is difficult without using FSuper. In addition to the need for additional component nesting, it is difficult to determine the size of content areas such as centerLeft, centerRight,.. Equal alignment effect. Not to mention the case where the size of all the components that need to be aligned is uncertain.

But FSuper makes such layouts easy to build. If one FSuper is not enough, you can even make one FSuper a child of another.

FSuper(child1: FSuper(child1: FSuper(),), child2: FSuper(child1: FSuper(),),) copies the codeCopy the code

This might look punk! But it works.

The effects shown above are all built by FSuper.

How do I use 😃?

Add dependencies to the project pubspec.yaml file:

🌐 pub Dependent mode

Dependencies: fsuper: ^< version numberCopy the code

⚠️ Note, please go to pub for the latest version number of FSuper

🖥 Git dependency mode

Feeling good? Please go to the Github homepage of FSuper to submit a Star you like 🌟!