help developers
help developers fsuper can help developers build complex views quickly and comfortably.
it supports rich text, rounded corners, borders, pictures, small red dots, and set up to two sub-components at the same time, and control their relative positions help developers.
✨ features
- rich corner effect
- exquisite border decoration
- naturally supports wonderful rich text
- gradient effect
- more sense of space shadow
- not simple red point
- flexible and powerful relative layout
guide
⚙️ parameters
help developers
�� basic parameters
param | type | necessary | default | desc |
---|---|---|---|---|
width | double | false | null | width |
height | double | false | null | height. can not be double.infinity |
maxwidth | double | false | null | maxwidth. if width> maxwidth, width is overridden. if there is no width, the maximum expanded width is maxwidth |
maxheight | double | false | null | maxheight. if height> maxheight, height is overridden. if there is no height, the maximum extension width is maxheight |
backgroundcolor | color | false | null | background color |
backgroundimage | imageprovider | false | null | background illustration. overrides backgroundcolor and gradient |
gradient | gradient | false | null | gradient. will be overwriting backgroundcolor |
padding | edgeinsetsgeometry | false | null | text and margins on each side. this is very useful to reserve space for children in fsuper |
margin | edgeinsets | false | null | fsuper margins in parent container |
corner | corner | false | null | corner size |
cornerstyle | cornerstyle | false | cornerstyle.round | corner style. rounded by default, set cornerstyle.bevel to bevel |
text | string | false | null | text content |
textcolor | color | false | null | font color |
textsize | double | false | null | font size |
textstyle | fontstyle | false | null | font style |
textweight | fontweight | false | null | font style |
fontheight | double | false | null | height of a line of text = textsize * fontheight |
textalign | textalign | false | textalign.center | text alignment |
spans | list<textspan> |
false | null | rich text. after receiving text, the text configuration will be inherited by default. can be set individually via textstyle |
onclick | gesturetapcallback | false | null | set fsuper click listener |
help developers
child widget parameters
param | type | necessary | default | desc |
---|---|---|---|---|
child1 | widget | false | null | child widget 1 |
child1alignment | alignment | false | null | relative position of child widget 1 in fsuper |
child1margin | edgeinsets | false | null | child widget 1 relative position based offset |
onchild1click | gesturetapcallback | false | null | click listener of child widget 1 |
child2 | widget | false | null | child widget 2 |
child2alignment | alignment | false | null | relative position of child widget 2 in fsuper |
child2margin | edgeinsets | false | null | child widget 2 relative position based offset |
onchi2d1click | gesturetapcallback | false | null | click listener of child widget 2 |
help developers
�� red point parameters
param | type | necessary | default | desc |
---|---|---|---|---|
redpoint | bool | false | false | whether to show the red point |
redpointcolor | color | false | colors.redaccent | the red point color |
redpointsize | double | false | 20 | the red point size |
redpointtext | string | false | null | text on red point |
redpointtextcolor | color | false | null | text color on red point |
redpointtextsize | double | false | null | text font size on red point |
redpointoffset | offset | false | null | the red point shifts to the upper right. the red point of offset (0,0) is in the upper right corner of fsuper. by default, the red point is shifted to the upper right by 1/4 |
help developers
�� stroke parameters
param | type | necessary | default | desc |
---|---|---|---|---|
strokewidth | double | false | null | border width. > 0 border will be displayed |
strokecolor | color | false | null | 边框颜色 |
shadow parameters
param | type | necessary | default | desc |
---|---|---|---|---|
shadowcolor | color | false | null | shadow color |
shadowoffset | offset | false | null | shadow offset |
shadowblur | double | false | null | the larger the value, the larger the shadow |
help developers
�� demo
�� basic demo
fsuper(
margin: edgeinsets.fromltrb(12, 0, 12, 0),
width: double.infinity,
text: "this is fsuper!",
backgroundcolor: color(0xffffc900),
),
fsuper(
text: "en.. ",
spans: [
textspan(
text: "fwidget",
style: textstyle(
color: color(0xffffc900),
backgroundcolor: colors.black38,
fontsize: 20,
)),
...
],
),
help developers fsuper the first part of the text is set through the text
property, and related text style properties can be set. if you want to achieve rich text effects, you can pass a textspan array via the spans property.
of course, by default, the properties you have not set for textspan will automatically inherit the text style configuration of fsuper.
by default, fsuper is able to adapt the text content size.
but you can still specify a specific size through the width
,height
properties. if you want the parent container to be full of components, you can set their value to double.infinity
.
⚠️ you should never set the size of fsuper to double.infinity in an infinite parent container, because it really does not know how big it should be!
in addition, fsuper also provides maxwidth
andmaxheight
to assist in layout, which is useful in the case of an uncertain component size. your components will never exceed their limits.
corner & stroke demo
fsuper(
width: 130,
padding: edgeinsets.only(top: 16, bottom: 16)
text: 'corner fsuper',
backgroundcolor: color(0xffff7043),
corner: corner.all(12),
cornerstyle: cornerstyle.bevel,
),
fsuper(
text: '音乐类型:流行音乐',
textcolor: color(0xffc2bfc2),
padding: edgeinsets.all(2),
corner: corner.all(3),
strokecolor: color(0xffc2bfc2),
strokewidth: 1,
),
using fsuper to declare a corner and border component is very simple.
corners can be declared just by the corner
property. a corner object will describe the corners of the component. you can control each corner individually.
fsuper supports two types of corners:
- cornerstyle.round:rounded corners. this is what we need most of the time.
- cornerstyle.bevel:bevel corners.
if you want a border, you only need to make strokewidth> 0
of fsuper. in addition, the strokecolor
property allows you to describe the color of the border.
gradient & shadow demo
fsuper(
width: 280,
height: 45,
text: 'search flight',
textalignment: alignment.center,
textsize: 16,
textcolor: color(0xff333333),
corner: corner.all(23),
gradient: lineargradient(colors: [
color(0xfffed83a),
color(0xfffcad2c),
]),
),
the gradient
property allows you to declare a gradient background for fsuper using a gradient object.
the gradient background will override the solid background color set by backgroundcolor.
⚠️ background priority:backgroundimage > gradient > backgroundcolor.
fsuper(
text: 'overview',
backgroundcolor: colors.white,
padding: edgeinsets.fromltrb(6.0 + 18.0 + 6.0, 9, 9, 9),
corner: corner(righttopcorner: 20, rightbottomcorner: 20),
child1: icon(
icons.subject,
size: 18,
color: color(0xffa6a4a7),
),
child1alignment: alignment.centerleft,
child1margin: edgeinsets.only(left: 3),
shadowcolor: colors.black38,
shadowblur: 10,
onclick: () {
_showdialog(context, "disco");
},
),
if you are considering adding shadow effects to your components, using fsuper is a great choice.
�� red point demo
fsuper(
width: 60,
height: 60,
backgroundcolor: color(0xffeeeeee),
corner: corner.all(6),
redpoint: true,
redpointsize: 20,
redpointtext: "红包",
),
using fsuper can be very simple to achieve the common red point effect. just configure redpoint: true
.
in addition, you can add arbitrary text content to the red point (it is really convenient) and set its position.
⚠️ the (0,0) position of the red point is in the upper right corner of fsuper.
one-stop service to meet all your needs.
child widget
fsuper(
width: double.infinity,
padding: edgeinsets.fromltrb(
(16.0 + 25.0 + 12), 8, (0.0 + 8.0), 8),
margin: edgeinsets.fromltrb(10, 10, 10, 0),
corner: corner.all(6),
backgroundcolor: color(0xfffff0e7),
strokecolor: color(0xfffee0cd),
strokewidth: 1,
text: '警告提示的文案',
textcolor: color(0xff7e7c7a),
textalignment: alignment.centerleft,
textalign: textalign.left,
spans: [
...
],
child1: transform.rotate(
angle: pi,
child: icon(
icons.info,
size: 25,
color: color(0xfffd6721),
),
),
child1alignment: alignment.centerleft,
child1margin: edgeinsets.fromltrb(16, 0, 0, 0),
child2: icon(
icons.close,
size: 15,
color: colors.black38,
),
child2alignment: alignment.topright,
child2margin: edgeinsets.fromltrb(0, 8, 12, 0),
onchild2click: () {
_showdialog(context, "关闭警告⚠️");
},
),
in fsuper, two child components can be declared by child1, child2
. you can specify their location and declare a click event.
this will greatly increase development speed in some common and complex layouts. especially in the scenario where the size of one component is small and uncertain, and the other component determines the position based on its size, fsuper handles everything.
the effects of these components in the picture only need one fsuper component to complete.
more demo
do not be surprised, the effects in the figure are all achieved with fsuper.
the design of the sub-components makes fsuper a qualitative leap in flexibility, and most of the complex views are capable.
for example, the chat bubble in the picture does not need to use the background picture, just use fsuper to achieve it. this makes such components extremely flexible and easy to modify.
fsuper(
maxwidth: 220,
textalign: textalign.left,
text: "i'm created by fsuper ��",
padding: edgeinsets.only(
left: 12, right: 12, top: 15, bottom: 15),
backgroundcolor: color(0xffa5ed7e),
corner: corner.all(6),
child1: transform.rotate(
angle: pi / 4,
child: fsuper(
width: 10,
height: 10,
backgroundcolor: color(0xffa5ed7e),
corner: corner.all(1.5),
),
),
child1alignment: alignment.topright,
child1margin: edgeinsets.only(right: -4, top: 20),
shadowcolor: color(0xffa5ed7e),
shadowblur: 5,
),
�� how to use?
add dependency in project pubspec.yaml
file:
pub dependency
dependencies:
fsuper: ^<version number>
⚠️ attention, please go to pub to get the latest version number of fsuper
git dependencies
dependencies:
fsuper:
git:
url: '[email protected]:fliggy-android-team/fsuper.git'
ref: '<branch number or tag number>'
⚠️ attention,please refer to the official project of fsuper for the branch number or tag.
Comments are closed.