fsuper 0.1.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 85

FSuper

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.

Author:Newton(coorchice.cb@alibaba-inc.com)

English | 简体中文

Like it? Please cast your Star 🥰!

✨ 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 #

🔩 Basic parameters #

ParamTypeNecessaryDefaultdesc
widthdoublefalsenullwidth
heightdoublefalsenullheight. can not be double.infinity
maxWidthdoublefalsenullmaxWidth. If width> maxWidth, width is overridden. If there is no width, the maximum expanded width is maxWidth
maxHeightdoublefalsenullmaxHeight. If height> maxHeight, height is overridden. If there is no height, the maximum extension width is maxHeight
backgroundColorColorfalsenullbackground color
backgroundImageImageProviderfalsenullBackground illustration. Overrides backgroundColor and gradient
gradientGradientfalsenullGradient. Will be overwriting backgroundColor
paddingEdgeInsetsGeometryfalsenullText and margins on each side. This is very useful to reserve space for children in FSuper
marginEdgeInsetsfalsenullFSuper margins in parent container
cornerCornerfalsenullCorner size
cornerStyleCornerStylefalseCornerStyle.roundCorner style. Rounded by default, set CornerStyle.bevel to bevel
textStringfalsenullText content
textColorColorfalsenullFont color
textSizedoublefalsenullFont size
textStyleFontStylefalsenullFont style
textWeightFontWeightfalsenullFont style
fontHeightdoublefalsenullHeight of a line of text = textSize * fontHeight
textAlignTextAlignfalseTextAlign.centerText alignment
spansListfalsenullRich text. After receiving text, the text configuration will be inherited by default. Can be set individually via TextStyle
onClickGestureTapCallbackfalsenullSet FSuper click listener

🧸 Child Widget Parameters #

ParamTypeNecessaryDefaultdesc
child1Widgetfalsenullchild widget 1
child1AlignmentAlignmentfalsenullRelative position of child widget 1 in FSuper
child1MarginEdgeInsetsfalsenullchild widget 1 relative position based offset
onChild1ClickGestureTapCallbackfalsenullClick listener of child widget 1
child2Widgetfalsenullchild widget 2
child2AlignmentAlignmentfalsenullRelative position of child widget 2 in FSuper
child2MarginEdgeInsetsfalsenullchild widget 2 relative position based offset
onChi2d1ClickGestureTapCallbackfalsenullClick listener of child widget 2

🎈 Red Point Parameters #

ParamTypeNecessaryDefaultdesc
redPointboolfalsefalseWhether to show the Red Point
redPointColorColorfalseColors.redAccentThe Red Point color
redPointSizedoublefalse20The Red Point size
redPointTextStringfalsenulltext on Red Point
redPointTextColorColorfalsenullText color on Red Point
redPointTextSizedoublefalsenullText font size on Red Point
redPointOffsetOffsetfalsenullThe 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

🖼 Stroke Parameters #

ParamTypeNecessaryDefaultdesc
strokeWidthdoublefalsenullBorder width. > 0 border will be displayed
strokeColorColorfalsenull边框颜色

🔳 Shadow Parameters #

ParamTypeNecessaryDefaultdesc
shadowColorColorfalsenullShadow color
shadowOffsetOffsetfalsenullShadow offset
shadowBlurdoublefalsenullThe larger the value, the larger the shadow

📺 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,
        )),
  ...
  ],
),

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: 'git@github.com: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.

💡 License #

Copyright 1999-2020 Fliggy Android Team <alitrip_android@list.alibaba-inc.com>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Like it? Please cast your Star 🥰! #

0.1.5 #

  • Optimize fsuper.dart

0.1.4 #

  • 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

example/lib/main.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:fsuper/fsuper.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  var text =
      "FWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidgetFWidget";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FSuperPage(),
    );
  }
}

class FSuperPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FSuperPageState();
  }
}

class _FSuperPageState extends State<FSuperPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xffffc900),
          title: const Text('FSuper'),
          centerTitle: true,
        ),
        body: Builder(
          builder: (context) {
            return SingleChildScrollView(
              physics: BouncingScrollPhysics(),
              child: Column(
                children: <Widget>[
                  _buildTitle("Size & Rich Text"),
                  _buildSmallMargin(),
                  FSuper(
                    text: "This is FSuper!",
                    backgroundColor: Color(0xffffc900),
                  ),
                  _buildDesc("在不设置 width、height 属性的情况下,FSuper 大小为 text 的大小\n"
                      "在这种情况下,textAlignment 将会失效,text 始终看起来是居中的"),
                  FSuper(
                    margin: EdgeInsets.fromLTRB(12, 0, 12, 0),
                    width: double.infinity,
                    maxHeight: 300,
                    text: "This is FSuper!",
                    backgroundColor: Color(0xffffc900),
                  ),
                  _buildDesc('设置 "width: double.infinity",可让 FSuper 宽充满可用空间\n'
                      '但不要将 height 设置为 double.infinity,你应该给他一个具体值,\n'
                      '或者干脆就空着'),
                  FSuper(
                    text: "En.. ",
                    spans: [
                      TextSpan(
                          text: "FWidget",
                          style: TextStyle(
                            color: Color(0xffffc900),
                            backgroundColor: Colors.black38,
                            fontSize: 20,
                          )),
                      TextSpan(text: " are really "),
                      TextSpan(
                          text: "delicious",
                          style: TextStyle(
                            color: Colors.blue,
                            fontSize: 20,
                            fontStyle: FontStyle.italic,
                          )),
                      TextSpan(text: "!"),
                      TextSpan(
                        text: "\nYou can try to ",
                      ),
                      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?");
                          },
                      ),
                      TextSpan(text: " !"),
                    ],
                  ),
                  _buildDesc("通过 spans 属性,可以传入一个 List<TextSpan> 来实现富文本"),
                  _buildTitle("Corner"),
                  _buildSmallMargin(),
                  Container(
                    width: 200,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        FSuper(
                          padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
                          text: '¥',
                          textSize: 11,
                          textColor: Colors.white,
                          spans: [
                            TextSpan(
                              text: '370起 ',
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w800),
                            ),
                            TextSpan(
                              text: '2.4折',
                              style: TextStyle(fontSize: 11),
                            ),
                          ],
                          backgroundColor: Colors.redAccent,
                          corner: Corner.all(20),
                        ),
                        FSuper(
                          text: 'GO',
                          textColor: Color(0xffB44431),
                          padding:
                              EdgeInsets.fromLTRB(9, 6, 3.0 + 12.0 + 6.0, 6),
                          backgroundColor: Color(0xfffeebc5),
                          corner: Corner.all(15),
                          child1: Icon(
                            Icons.arrow_forward_ios,
                            size: 12,
                            color: Color(0xffB44431),
                          ),
                          child1Alignment: Alignment.centerRight,
                          child1Margin: EdgeInsets.only(right: 6),
                          onClick: () {
                            _showDialog(context, "HA.. Go Go Go!🏃️🏃️🏃️");
                          },
                        ),
                      ],
                    ),
                  ),
                  _buildDesc("corner 属性能够赋予 FSuper 边角\n"
                      "默认情况下,FSuper 的边角是圆角"),
                  FSuper(
                    width: 130,
                    padding: EdgeInsets.only(top: 16, bottom: 16),
                    text: 'Corner FSuper',
                    backgroundColor: Color(0xffFF7043),
                    corner: Corner.all(12),
                    cornerStyle: CornerStyle.bevel,
                  ),
                  _buildDesc('设置 cornerStyle: CornerStyle.bevel 将变成斜切角'),
                  Container(
                    width: 300,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        FSuper(
                          width: 130,
                          text: 'Corner FSuper',
                          backgroundColor: Color(0xff00B0FF),
                          padding: EdgeInsets.only(top: 16, bottom: 16),
                          corner: Corner(
                              leftTopCorner: 25,
                              leftBottomCorner: 25,
                              rightBottomCorner: 25),
                        ),
                        FSuper(
                          width: 130,
                          text: 'Corner FSuper',
                          backgroundColor: Color(0xffFFA726),
                          padding: EdgeInsets.only(top: 16, bottom: 16),
                          corner: Corner(rightTopCorner: 10),
                          cornerStyle: CornerStyle.bevel,
                        ),
                      ],
                    ),
                  ),
                  _buildDesc("通过设置单个 Corner 值,可以控制每个圆角"),
                  _buildTitle("Stroke"),
                  _buildSmallMargin(),
                  Container(
                    width: 300,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        FSuper(
                          text: '私享假日时光',
                          textColor: Color(0xffe56837),
                          padding: EdgeInsets.fromLTRB(9, 2, 12.0 + 6.0, 2),
                          corner: Corner.all(16),
                          strokeColor: Color(0xffd76d44),
                          strokeWidth: 1,
                          child1: Icon(
                            Icons.arrow_forward_ios,
                            size: 12,
                            color: Color(0xffe56837),
                          ),
                          child1Alignment: Alignment.centerRight,
                          child1Margin: EdgeInsets.only(right: 6),
                        ),
                        FSuper(
                          text: '音乐类型:流行音乐',
                          textColor: Color(0xffc2bfc2),
                          padding: EdgeInsets.all(2),
                          corner: Corner.all(3),
                          strokeColor: Color(0xffc2bfc2),
                          strokeWidth: 1,
                        ),
                      ],
                    ),
                  ),
                  _buildDesc("FSuper 支持边框效果,只需要 strokeWidth > 0 即可"),
                  _buildTitle("Gradient"),
                  _buildSmallMargin(),
                  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),
                    ]),
                  ),
                  _buildDesc("gradient 属性能够为 FSuper 设置渐变色背景\n"
                      "这会覆盖 backgroundColor 属性"),
                  _buildTitle("Shadow"),
                  _buildSmallMargin(),
                  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");
                    },
                  ),
                  _buildDesc('shadowColor 和 shadowBlur 属性能够设置阴影颜色和样式\n'
                      '而 shadowOffset 则可以控制阴影的偏移量'),
                  _buildTitle("ReadPoint"),
                  _buildMiddleMargin(),
                  Container(
                    width: 360,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        FSuper(
                          width: 60,
                          height: 60,
                          backgroundColor: Color(0xffeeeeee),
                          corner: Corner.all(6),
                          redPoint: true,
                          redPointSize: 20,
                        ),
                        FSuper(
                          width: 60,
                          height: 60,
                          backgroundColor: Color(0xffeeeeee),
                          corner: Corner.all(6),
                          redPoint: true,
                          redPointSize: 20,
                          redPointText: "5",
                        ),
                        FSuper(
                          width: 60,
                          height: 60,
                          backgroundColor: Color(0xffeeeeee),
                          corner: Corner.all(6),
                          redPoint: true,
                          redPointSize: 20,
                          redPointText: "红包",
                        ),
                      ],
                    ),
                  ),
                  _buildDesc('通过设置 "redPoint: true" 可以展示一个小红点\n'
                      '使用 redPointSize 属性可以设置小红点的大小\n'
                      'redPointText 属性可以设置小红点中的文字\n'),
                  Container(
                    width: 360,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        FSuper(
                          text: "Home",
                          width: 60,
                          height: 60,
                          textAlignment: Alignment.bottomCenter,
                          padding: EdgeInsets.only(bottom: 6),
                          corner: Corner.all(6),
                          child1: Icon(
                            Icons.home,
                            size: 28,
                          ),
                          child1Alignment: Alignment.topCenter,
                          child1Margin: EdgeInsets.only(top: 6),
                          redPoint: true,
                          redPointSize: 10,
                          redPointOffset: Offset(-5, 0),
                        ),
                        FSuper(
                          width: 36,
                          height: 36,
                          corner: Corner.all(6),
                          redPoint: true,
                          redPointSize: 15,
                          redPointText: "99+",
                          redPointTextSize: 11,
                          child1: Icon(
                            Icons.chat_bubble,
                            size: 36,
                          ),
                        ),
                        FSuper(
                          text: "You have messages",
                          textColor: Colors.white,
                          redPoint: true,
                          redPointSize: 10,
                          redPointOffset: Offset(5, 3),
                          shadowColor: Color(0xffffc900),
                          shadowBlur: 18,
                        ),
                      ],
                    ),
                  ),
                  _buildDesc("通过 redPointOffset 可以控制小红点的位置\n"
                      "(0, 0) 点在 FSuper 的右上角"),
                  _buildTitle("Child1 & Child2"),
                  _buildSmallMargin(),
                  SizedBox(
                    width: 300,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        FSuper(
                          text: "综合排序",
                          textColor: Colors.blue,
//                          backgroundColor: Colors.blue,
                          padding: EdgeInsets.fromLTRB(
                              8, 6, (4 + 12 + 8).toDouble(), 6),
                          corner: Corner.all(18),
                          child1: Icon(
                            Icons.keyboard_arrow_down,
                            color: Colors.blue,
                            size: 15,
                          ),
                          child1Alignment: Alignment.centerRight,
                          child1Margin: EdgeInsets.fromLTRB(0, 0, 8, 0),
                          onClick: () {
                            _showDialog(context, "Sorting..");
                          },
                        ),
                        FSuper(
                          text: "标签",
                          textColor: Colors.white,
                          backgroundColor: Color(0xffffc900),
                          padding: EdgeInsets.fromLTRB(
                              8, 6, (4 + 12 + 8).toDouble(), 6),
                          corner: Corner.all(18),
                          child1: Icon(
                            Icons.close,
                            color: Colors.white,
                            size: 11,
                          ),
                          child1Alignment: Alignment.centerRight,
                          child1Margin: EdgeInsets.fromLTRB(0, 0, 8, 0),
                          onChild1Click: () {
                            _showDialog(context, "Close");
                          },
                        ),
                        FSuper(
                          text: "9999+",
                          height: 15,
                          textColor: Color(0xff333333),
                          padding: EdgeInsets.fromLTRB(22.0 + 3.0, 0, 0, 0),
                          child1: Icon(
                            Icons.message,
                            color: Color(0xff333333),
                            size: 22,
                          ),
                          child1Alignment: Alignment.centerLeft,
                          onClick: () {
                            _showDialog(context, "Message count: >9999");
                          },
                        ),
                      ],
                    ),
                  ),
                  _buildDesc("FSuper 允许设置最多两个确定大小的子组件\n"
                      "而且你能够通过 child1Alignment、child2Alignment\n"
                      "以及 child1Margin、child2Margin 来控制它们的位置"),
                  FSuper(
                    width: double.infinity,
                    padding: EdgeInsets.fromLTRB(
                        (12.0 + 15.0 + 8.0), 8, (15.0 + 12.0), 8),
                    margin: EdgeInsets.all(10),
                    corner: Corner.all(6),
                    backgroundColor: Color(0xfff3faf1),
                    strokeColor: Color(0xffe8f6e2),
                    strokeWidth: 1,
                    text: '成功提示的文案',
                    textColor: Colors.grey,
                    textAlignment: Alignment.centerLeft,
                    child1: Transform.rotate(
                      angle: 0,
                      child: Icon(
                        Icons.check_circle,
                        size: 15,
                        color: Color(0xff89cf6d),
                      ),
                    ),
                    child1Alignment: Alignment.centerLeft,
                    child1Margin: EdgeInsets.fromLTRB(12, 0, 0, 0),
                  ),
                  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: [
                      FSuper.VerticalSpace(8),
                      TextSpan(
                        text: "错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提"
                            "示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅"
                            "助性文字介绍错误提示的辅助性文字介绍",
                        style: TextStyle(
                          color: Color(0xffc2c9cc),
                          fontSize: 11,
                        ),
                      )
                    ],
                    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, "关闭警告⚠️");
                    },
                  ),
                  _buildDesc("你需要确定 FSuper 的大小,或者让 FSuper 自适应大小\n"
                      "通过 padding 来为子组件留够位置\n"
                      "当然,你可以为子组件设置点击事件监听\n"
                      "通过 onChild1Click 和 onChild2Click"),
                  _buildTitle('FSuper Power'),
                  _buildSmallMargin(),
                  FSuper(
                    width: double.infinity,
                    text: "FWidget",
                    textAlign: TextAlign.left,
                    textSize: 18,
                    textWeight: FontWeight.w600,
                    padding:
                        EdgeInsets.fromLTRB(12.0 + 60.0 + 12.0, 20, 12, 20),
                    margin: EdgeInsets.fromLTRB(12, 0, 12, 0),
                    strokeWidth: 1,
                    strokeColor: Colors.grey[300],
                    backgroundColor: Colors.white,
                    corner: Corner.all(9),
                    spans: [
                      FSuper.VerticalSpace(9),
                      TextSpan(
                          text: "构建精美 Flutter 应用的绝佳利器 ⚔️",
                          style: TextStyle(
                              color: Colors.grey[500],
                              fontSize: 11,
                              fontWeight: FontWeight.w300))
                    ],
                    child1: SizedBox(
                        width: 70,
                        height: 70,
                        child: Image.network(
                            "https://gw.alicdn.com/tfs/TB1a288sxD1gK0jSZFKXXcJrVXa-360-360.png")),
                    child1Alignment: Alignment.centerLeft,
                    child1Margin: EdgeInsets.only(left: 9),
                    child2: FSuper(
                      text: 'Start Now',
                      textColor: Color(0xffffad2f),
                      padding: EdgeInsets.fromLTRB(6, 3, 6, 3),
                      corner: Corner.all(14),
                      strokeColor: Color(0xffffc900),
                      strokeWidth: 1,
                    ),
                    child2Alignment: Alignment.centerRight,
                    child2Margin: EdgeInsets.only(right: 9),
                    onChild2Click: () {
                      _showDialog(context, "Welcome to use FWidget ⚔");
                    },
                  ),
                  _buildSmallMargin(),
                  _buildDesc('使用 FSuper 能够快速构建出精美的组件\n'
                      '你甚至可以将 child1、child2 也设置成 FSuper\n'
                      '再复杂的视图也能轻松迎刃而解 😉'),
                  _buildSmallMargin(),
                  FSuper(
                    height: 86,
                    padding: EdgeInsets.fromLTRB(12.0 + 80.0 + 12.0, 0, 0, 0),
                    text: '泰国之行',
                    textSize: 15,
                    textAlignment: Alignment.centerLeft,
                    textAlign: TextAlign.left,
                    textWeight: FontWeight.w600,
                    spans: [
                      FSuper.VerticalSpace(8),
                      TextSpan(
                          text: '**月**日-**月**日 | **天',
                          style: TextStyle(
                              fontSize: 12,
                              color: Color(0xffb8b4b8),
                              fontWeight: FontWeight.normal)),
                    ],
                    corner: Corner.all(10),
                    backgroundColor: Colors.white,
                    margin: EdgeInsets.only(left: 12, right: 12),
                    shadowColor: Colors.black38.withOpacity(0.12),
                    shadowBlur: 5,
                    child1: Container(
                      width: 80,
                      height: 53,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        shape: BoxShape.rectangle,
                        image: DecorationImage(
                          fit: BoxFit.cover,
                          image: NetworkImage(
                            "https://bkimg.cdn.bcebos.com/pic/023b5bb5c9ea15cef6ee42feb7003af33b87b2c1@wm_1,g_7,k_d2F0ZXIvYmFpa2U5Mg==,xp_5,yp_5",
                          ),
                        ),
                      ),
                    ),
                    child1Alignment: Alignment.centerLeft,
                    child1Margin: EdgeInsets.only(left: 12),
                    child2: FSuper(
                      width: 76,
                      height: 30,
                      text: '查看',
                      textColor: Color(0xff333333),
                      textAlignment: Alignment.center,
                      corner: Corner.all(15),
                      strokeWidth: 1,
                      strokeColor: Color(0xfff3f1f7),
                    ),
                    child2Alignment: Alignment.centerRight,
                    child2Margin: EdgeInsets.only(right: 12),
                    onChild2Click: () {
                      _showDialog(context, "HAHAHAHA.. 😄");
                    },
                  ),
                  _buildSmallMargin(),
                  _buildDesc("尝试使用 FSuper 构建精美的组件吧!"),
                  _buildSmallMargin(),
                  FSuper(
                    width: double.infinity,
                    height: 78,
                    text: '舌尖风味',
                    textWeight: FontWeight.w600,
                    spans: [
                      FSuper.VerticalSpace(6),
                      TextSpan(
                          text: '时令甄选美食 VIP专属价',
                          style: TextStyle(
                            fontSize: 11,
                            fontWeight: FontWeight.normal,
                          ))
                    ],
                    textSize: 20,
                    textColor: Colors.white,
                    textAlignment: Alignment.centerLeft,
                    textAlign: TextAlign.left,
                    padding: EdgeInsets.only(left: 12),
                    margin: EdgeInsets.only(left: 12, right: 12),
                    corner: Corner(leftTopCorner: 10, rightTopCorner: 10),
                    backgroundImage: NetworkImage(
                        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4186127082,3602109448&fm=15&gp=0.jpg'),
                    child1: Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.white,
                    ),
                    child1Alignment: Alignment.centerRight,
                    child1Margin: EdgeInsets.only(right: 12),
                    shadowColor: Colors.black38.withOpacity(0.28),
                    shadowBlur: 5,
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 12, right: 12),
                    padding: EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(6),
                      color: Color(0xfff3f0f3),
                    ),
                    child: Column(
                      children: <Widget>[
                        Align(
                          alignment: Alignment.topRight,
                          child: FSuper(
                            maxWidth: 220,
                            text: 'Hi, Welcome to use FWidget.',
                            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,
                          ),
                        ),
                        _buildMiddleMargin(),
                        Align(
                          alignment: Alignment.topLeft,
                          child: FSuper(
                            maxWidth: 220,
                            text: 'FWidget is great!Very useful!',
                            textAlign: TextAlign.left,
                            padding: EdgeInsets.only(
                                left: 12, right: 12, top: 15, bottom: 15),
                            backgroundColor: Colors.white,
                            corner: Corner.all(6),
                            child1: Transform.rotate(
                              angle: pi / 4,
                              child: FSuper(
                                width: 10,
                                height: 10,
                                backgroundColor: Colors.white,
                                corner: Corner.all(1.5),
                              ),
                            ),
                            child1Alignment: Alignment.topLeft,
                            child1Margin: EdgeInsets.only(left: -4, top: 20),
                            shadowColor: Colors.white,
                            shadowBlur: 5,
                          ),
                        ),
                        _buildMiddleMargin(),
                        Align(
                          alignment: Alignment.topRight,
                          child: 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,
                          ),
                        ),
                        _buildMiddleMargin(),
                        Align(
                          alignment: Alignment.topLeft,
                          child: FSuper(
                            maxWidth: 220,
                            text: "So am I 😄",
                            textAlign: TextAlign.left,
                            padding: EdgeInsets.only(
                                left: 12, right: 12, top: 15, bottom: 15),
                            backgroundColor: Colors.white,
                            corner: Corner.all(6),
                            child1: Transform.rotate(
                              angle: pi / 4,
                              child: FSuper(
                                width: 10,
                                height: 10,
                                backgroundColor: Colors.white,
                                corner: Corner.all(1.5),
                              ),
                            ),
                            child1Alignment: Alignment.topLeft,
                            child1Margin: EdgeInsets.only(left: -4, top: 20),
                            shadowColor: Colors.white,
                            shadowBlur: 5,
                          ),
                        ),
                      ],
                    ),
                  ),
                  _buildMiddleMargin(),
                  _buildMiddleMargin(),
                ],
              ),
            );
          },
        ));
  }

  SizedBox _buildMiddleMargin() {
    return const SizedBox(
      height: 18,
    );
  }

  SizedBox _buildSmallMargin() {
    return const SizedBox(
      height: 10,
    );
  }

  void _showDialog(BuildContext context, String msg) {
    showDialog(
        context: context,
        builder: (_) => AlertDialog(
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    msg,
                    style: TextStyle(color: Colors.white, fontSize: 12),
                  ),
                ],
              ),
              backgroundColor: Colors.black45,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8)),
            ));
  }

  Padding _buildDesc(String desc) {
    return Padding(
        padding: const EdgeInsets.all(8),
        child: Text(
          desc,
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.grey,
            fontSize: 12,
          ),
        ));
  }

  Container _buildTitle(String title) {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.all(9),
      color: Color(0xffe0e0e0).withOpacity(0.38),
      child: Text(
        title,
        style: TextStyle(color: Colors.grey),
      ),
    );
  }
}

class Test extends StatelessWidget {
  String text;

  Test(this.text);

  @override
  Widget build(BuildContext context) {
    return FSuper(
      text: text,
//            padding: EdgeInsets.fromLTRB(50, 50, 50, 50),
      backgroundColor: Colors.blue,
      child1: Icon(Icons.check_circle),
      child1Alignment: Alignment.bottomRight,
//            child1Margin: EdgeInsets.all(20),
      margin: EdgeInsets.all(50),
//            padding: EdgeInsets.all(50),
      redPoint: true,
      onChild1Click: () {},
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  fsuper: ^0.1.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:fsuper/fsuper.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
72
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
85
Learn more about scoring.

We analyzed this package on May 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health suggestions

Fix lib/fsuper.dart. (-2.48 points)

Analysis of lib/fsuper.dart reported 5 hints:

line 305 col 19: Name non-constant identifiers using lowerCamelCase.

line 317 col 19: Name non-constant identifiers using lowerCamelCase.

line 360 col 54: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

line 361 col 52: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

line 362 col 54: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test