A super powerful widget to help developers build complex views quickly and comfortably.

Last update: Jun 30, 2022

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, high-quality Neumorphism style.

Author:Newton([email protected])

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

  • High-quality Neumorphism style

🛠 Guide

⚙️ Parameters

🔩 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 FCorner false null Corner size
cornerStyle FCornerStyle false FCornerStyle.round Corner style. Rounded by default, set FCornerStyle.bevel to bevel
text String false null Text content
style TextStyle false null text style
textAlign TextAlign false TextAlign.center Text alignment
spans List 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

🧸 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

🎈 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
redPointTextStyle TextStyle false null red point text style
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

🖼 Stroke Parameters

Param Type Necessary Default desc
strokeWidth double false null Border width. > 0 border will be displayed
strokeColor Color false null stroke color

🔳 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

🍭 Neumorphism Style

Param Type Necessary Default desc
isSupportNeumorphism bool false false Whether to support the Neumorphism style. Open this item [highlightColor] will be invalid
lightOrientation FLightOrientation false FLightOrientation.LeftTop Valid when [isSupportNeumorphism] is true. The direction of the light source is divided into four directions: upper left, lower left, upper right, and lower right. Used to control the illumination direction of the light source, which will affect the highlight direction and shadow direction
highlightShadowColor Color false null After the Neumorphism style is turned on, the bright shadow color
float bool false false Whether the Neumorphism style is turned on, whether it is a floating effect, otherwise it is a concave effect, the default is true

📺 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 and maxHeight 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: FCorner.all(12),
  cornerStyle: FCornerStyle.bevel,
),

FSuper(
  text: '音乐类型:流行音乐',
  padding: EdgeInsets.all(2),
  corner: FCorner.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:

  • FCornerStyle.round:Rounded corners. This is what we need most of the time.

  • FCornerStyle.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,
  corner: FCorner.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: FCorner.all(6),
  redPoint: true,
  readPointTextStyle: TextStyle(fontSize: 20.0),
  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: FCorner.all(6),
    backgroundColor: Color(0xfffff0e7),
    strokeColor: Color(0xfffee0cd),
    strokeWidth: 1,
    text: '警告提示的文案',
    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.

🍭 Neumorphism 风格

FSuper(

  /// 开启 Neumorphism 支持
  ///
  /// Turn on Neumorphism support
  isSupportNeumorphism: true,

  /// 配置光源方向
  ///
  /// Configure light source direction
  lightOrientation: lightOrientation,

  /// 配置暗部阴影
  ///
  /// Configure dark shadows
  shadowColor: Colors.black87,

  /// 配置亮部阴影
  ///
  /// Configure highlight shadow
  highlightShadowColor: Colors.white24,

  /// 是否呈浮起视效
  ///
  /// Whether it is floating visual effect
  float: false,
  shadowOffset: Offset(0.0, 1.0),
  width: 50,
  height: 50,
  backgroundColor: Color(0xff28292f),
  corner: FCorner.all(40),
  child1: Icon(
    Icons.star,
    color: Color(0xfffff176),
    size: 23,
  ),
),

FButton brings an incredible, ultra-high texture Neumorphism style to developers.

Developers only need to configure the isSupportNeumorphism parameter to enable and disable the Neumorphism style.

If you want to adjust the style of Neumorphism, you can make subtle adjustments through several attributes related to Shadow, among which:

  • shadowColor: configure the shadow of the shadow

  • highlightShadowColor: configure highlight shadow

FButton also provides lightOrientation parameters, and even allows developers to adjust the care angle, and has obtained different Neumorphism effects.

Through the float parameter, developers can easily switch between floating visual effect and recessed visual effect.

🎞 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: FCorner.all(6),
  child1: Transform.rotate(
    angle: pi / 4,
    child: FSuper(
      width: 10,
      height: 10,
      backgroundColor: Color(0xffa5ed7e),
      corner: FCorner.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-Mobile/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 2020-present Fliggy Android Team <[email protected]>.

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 🥰 !


How to run Demo project?

  1. clone project to local

  2. Enter the project example directory and run the following command

flutter create .
  1. Run the demo in example

GitHub

https://github.com/Fliggy-Mobile/fsuper
Comments
  • 1. fsuper相互嵌套,视图更新的时候,子元素会闪烁

    测试代码

    把AddNotesTextField 放到stfulwidget中,更新state,

    AddNotesTextField ->FSuper->child1->child1 闪烁

    class AddNotesTextField extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return FSuper(
          width: 303,
          height: 80.5,
          child1Alignment:Alignment.bottomCenter ,
          child1: FSuper( // 容器,需要注意child1和child2的层级
            width: 303,
            height: 63.5,
            backgroundColor: Color(0xFF26465C),
            corner:Corner(rightTopCorner:6,leftBottomCorner: 6,rightBottomCorner: 6),
            child1Alignment: Alignment.center,
            child1: FSuper(
              width: 283,
              height: 43.5,
              child1: TextField(
                maxLines: 2,
                maxLength: null,
                style: TextStyle(fontSize: 12,color: Colors.white),
                decoration: InputDecoration(
                    isDense: true,
                    contentPadding: EdgeInsets.all(5),
                    border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(6)),borderSide: BorderSide.none),
                    fillColor:Color(0xff486F8D),
                    filled: true
                ),
              ),
            ),
          ) ,
          child2Alignment: Alignment.topLeft,
          child2: FSuper( // 头部
            width: 70,
            height: 22.5,
            text: 'add notes',
            textSize: 12,
            textColor: Color(0xffF29D2C),
            textAlign: TextAlign.center,
            textAlignment: Alignment.center,
            backgroundColor: Color(0xFF26465C),
            corner:Corner(leftTopCorner: 5.625,rightTopCorner: 5.625),
          ),
        );
      }
    }
    
    Reviewed by TomVista at 2020-08-03 09:59
  • 2. 2.0.0版本编译报错

    `/D:/FlutterSDK/flutter/.pub-cache/hosted/pub.flutter-io.cn/fcontrol-1.0.0/lib/fcontrol.dart:157:3: Error: Type 'MouseCursor' not found. MouseCursor effectiveMouseCursor; ^^^^^^^^^^^ /D:/FlutterSDK/flutter/.pub-cache/hosted/pub.flutter-io.cn/fcontrol-1.0.0/lib/fcontrol.dart:157:3: Error: 'MouseCursor' isn't a type. MouseCursor effectiveMouseCursor; ^^^^^^^^^^^ /D:/FlutterSDK/flutter/.pub-cache/hosted/pub.flutter-io.cn/fcontrol-1.0.0/lib/fcontrol.dart:161:60: Error: 'MouseCursor' isn't a type. effectiveMouseCursor = MaterialStateProperty.resolveAs( ^^^^^^^^^^^ /D:/FlutterSDK/flutter/.pub-cache/hosted/pub.flutter-io.cn/fcontrol-1.0.0/lib/fcontrol.dart:162:7: Error: The getter 'MaterialStateMouseCursor' isn't defined for the class 'FControlState'.

    • 'FControlState' is from 'package:fcontrol/fcontrol.dart' ('/D:/FlutterSDK/flutter/.pub-cache/hosted/pub.flutter-io.cn/fcontrol-1.0.0/lib/fcontrol.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'MaterialStateMouseCursor'. MaterialStateMouseCursor.clickable, ^^^^^^^^^^^^^^^^^^^^^^^^ /D:/FlutterSDK/flutter/.pub-cache/hosted/pub.flutter-io.cn/fcontrol-1.0.0/lib/fcontrol.dart:248:7: Error: No named parameter with the name 'cursor'. cursor: effectiveMouseCursor, `
    Reviewed by momtboy at 2020-07-16 06:00
  • 3. flutter create .失败,无法克隆下来

    Git error. Command: git clone --mirror [email protected]:Fliggy-Mobile/fcommon.git /Users/damianshou/Documents/flutter/.pub-cache/git/cache/fcommon-f93b3357d285e9e1a9d497011589284c8dcdcf4a stdout: stderr: Cloning into bare repository '/Users/damianshou/Documents/flutter/.pub-cache/git/cache/fcommon-f93b3357d285e9e1a9d497011589284c8dcdcf4a'... [email protected]: Permission denied (publickey). fatal: Could not read from remote repository.

    Please make sure you have the correct access rights and the repository exists. exit code: 128

    Reviewed by damianshou at 2020-08-31 03:43
  • 4. Support flutter 3.0

    See this error: ../../../appdev/flutter/.pub-cache/hosted/pub.flutter-io.cn/fsuper_nullsafety-3.0.1/lib/fsuper_nullsafety.dart:330:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../appdev/flutter/packages/flutter/lib/src/widgets/binding.dart'). WidgetsBinding.instance!.addPostFrameCallback(_handleSizeChanged); ^ ../../../appdev/flutter/.pub-cache/hosted/pub.flutter-io.cn/fsuper_nullsafety-3.0.1/lib/fsuper_nullsafety.dart:342:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../appdev/flutter/packages/flutter/lib/src/widgets/binding.dart'). WidgetsBinding.instance!.addPostFrameCallback(_handleSizeChanged); ^ ../../../appdev/flutter/.pub-cache/hosted/pub.flutter-io.cn/fsuper_nullsafety-3.0.1/lib/fsuper_nullsafety.dart:626:22: Warning: Operand of null-aware operation '!' has type 'SchedulerBinding' which excludes null.
    • 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('../../../appdev/flutter/packages/flutter/lib/src/scheduler/binding.dart'). SchedulerBinding.instance!.addPostFrameCallback(postFrameCallback); ^
    Reviewed by hs029 at 2022-05-20 12:17
  • 5. xcode 12 ios14 运行报错

    Flutter 1.22.0-10.0.pre.221 xcode 12 模拟器iphone ios14环境

    flutter run 后 报错 ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:710:9: Error: Type 'Overflow' not found. final Overflow overflow; ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:756:5: Error: Type 'Overflow' not found. Overflow overflow = Overflow.clip, ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:845:3: Error: Type 'Overflow' not found. Overflow get overflow => _overflow; ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:846:3: Error: Type 'Overflow' not found. Overflow _overflow; ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:848:16: Error: Type 'Overflow' not found. set overflow(Overflow value) { ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:469:17: Error: The getter 'Overflow' isn't defined for the class '_FSuperState'. - '_FSuperState' is from 'package:fsuper/fsuper.dart' ('../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'Overflow'. overflow: Overflow.visible, ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:667:21: Error: Getter not found: 'Overflow'. this.overflow = Overflow.clip, ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:710:9: Error: 'Overflow' isn't a type. final Overflow overflow; ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:739:33: Error: 'Overflow' isn't a type. properties.add(EnumProperty('overflow', overflow)); ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:756:5: Error: 'Overflow' isn't a type. Overflow overflow = Overflow.clip, ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:756:25: Error: Getter not found: 'Overflow'. Overflow overflow = Overflow.clip, ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:846:3: Error: 'Overflow' isn't a type. Overflow _overflow; ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:848:16: Error: 'Overflow' isn't a type. set overflow(Overflow value) { ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:1049:22: Error: The getter 'Overflow' isn't defined for the class '_RenderStack'. - '_RenderStack' is from 'package:fsuper/fsuper.dart' ('../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'Overflow'. if (_overflow == Overflow.clip && _hasVisualOverflow) { ^^^^^^^^ ../../../../.pub-cache/hosted/pub.flutter-io.cn/fsuper-2.0.2/lib/fsuper.dart:1068:33: Error: 'Overflow' isn't a type. properties.add(EnumProperty('overflow', overflow)); ^^^^^^^^

    Reviewed by clin003 at 2020-09-17 03:24

Related

Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to tidily bound separated logic into complex solution.
Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to tidily bound separated logic into complex solution.

Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to

Feb 23, 2022
Help developers build the most beautiful search bar🍹.
Help developers build the most beautiful search bar🍹.

fsearch Help developers build the most beautiful search bar ?? . [FSearch] provides developers with a one-stop search bar construction service. Suppor

May 19, 2022
📅 Customizable flutter calendar widget including day and week views

?? Customizable, animated calendar widget including day, week, and month views. Navigation Animation Callbacks Changing the VisibleDateRange Available

Jun 25, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Jan 8, 2022
A super effective dart library delivering performance & ensuring greater build speed.
A super effective dart library delivering performance & ensuring greater build speed.

A super effective Dart and Flutter library for delivering performante app ?? & ensuring greater build speed ?? . The package has some cook utilizes wh

Nov 22, 2021
Quickly is build as a tool to enhance your Flutter UI development experience and make code easier

Quickly is build as a tool to enhance your Flutter UI development experience and make code easier. It is highly inspired by Bootstrap and Tailwind CSS. It also provide lots of extension methods on String, List and Map.

Mar 14, 2022
Flutter qidgets - Build widgets hierarchies quickly with qidgets

Build widgets hierarchies quickly with qidgets. Quick widgets → qidgets. Feature

Mar 31, 2022
DEVS: Developer Board and Jobs Listing | For Developers, By Developers
DEVS: Developer Board and Jobs Listing | For Developers, By Developers

devs Setup Currently, this DEVS project is using the master channel of the Flutter SDK. TODO: Migrate to beta Clone the project git clone https://gith

Apr 16, 2022
This is an open source Tips & Tricks for Flutter, that helps flutter Developers write simple but powerful dart codes.

Showcasing-flutter - This is an open source Tips & Tricks for Flutter, that helps flutter Developers write simple but powerful dart codes.

Jan 4, 2022
Admob Flutter plugin that shows banner ads using native platform views.
Admob Flutter plugin that shows banner ads using native platform views.

Looking for Maintainers. Unfortunately I haven't been able to keep up with demand for features and improvments. If you are interested in helping maint

Jun 6, 2022
A simple, powerful widget to build cool transitions
A simple, powerful widget to build cool transitions

motion_widget A simple, powerful widget to build cool transitions Features Fine-grained control with Interval Lightweight & fully customizable No boil

Jul 29, 2021
Experimenting with 6 examples of different types of simple and complex JSON structures in Flutter

Parsing complex JSON in Flutter Gives a detailed explanation of working with simple and complex JSON structures using dart:convert library in Flutter

Jun 17, 2022
Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern.
Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern.

Karee Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern. + = About Karee Karee is a frame

May 4, 2022
Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.
Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.

supabase_flutter Flutter package for Supabase. What is Supabase Supabase is an open source Firebase alternative. We are a service to: listen to databa

Jun 28, 2022
Jan 11, 2022
Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.

Flet Flet is a framework that enables you to easily build realtime web, mobile and desktop apps in your favorite language and securely share them with

Jun 24, 2022
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Jun 22, 2022
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

video_editor My other APIs Scroll Navigation Video Viewer Helpers Features Super flexible UI Design. Support actions: Crop Trim Scale Rotate Cover sel

Jun 27, 2022
Super Useful Flutter Layouts - Right in Your Pocket. 😉
Super Useful Flutter Layouts - Right in Your Pocket. 😉

Super Useful Flutter Layouts - Right in Your Pocket. ?? Update: Flutter web app preview here: https://flutter-layouts-demo.web.app/ YouTube video walk

Jun 21, 2022