搜索插件、代码仓与 APP 分类

插件详情v0.1.0

flemme

Flutter、浅色、早期、制作、材料、环境。使用 Flemme 简化您的小部件编写!

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
46
喜欢数
19
Pub 分数
60

安装插件

flutter pub add flemme

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Flemme 是一个 Flutter 包,旨在通过轻量级、早期材料设计的 UI 开发方法简化组件创建。它通过减少样板代码和简化常见的组件模式来提高生产力。该包以简洁为核心理念,支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台,非常适合希望以清晰高效方式构建用户界面的开发者。该包可无缝集成到现有的 Flutter 项目中,并促进更直观的编码体验。

适合场景

  • 快速UI原型设计
  • 减少重复的部件代码
  • 简化材料设计的实现
  • 跨平台 UI 开发
  • 简化复杂的部件树
  • 提升开发人员的生产力

主要特点

  • 最小化样板代码
  • 早期材料设计原则
  • 跨平台兼容性
  • 直观的 API
  • 轻量级占用
  • 与 Flutter 的轻松集成

适合对象

  • Flutter 初学者
  • 寻求效率的资深开发人员
  • 专注于快速开发的团队
  • 需要一致 UI 模式的项目
  • 大量使用材料设计的开发人员
  • 面向多个平台的应用程序

使用建议

  • 可用文档有限
  • 可能需要学习新的约定
  • 最适合简单到中等复杂度的UI
  • 不太适合高度自定义的组件架构
  • 依赖社区采用以获得长期支持
  • 新用户可能需要一定的学习曲线

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

flemme

Plaftorm Flutter pub package GitHub stars GitHub forks GitHub license GitHub issues

Flutter , Light , Early, Making, Material, Environnement Simplify the writing of your widgets with Flemme

Installation

Add flemme as a dependency in your pubspec.yaml file.

dependencies:
  flemme: ^0.1.0

Get Started

For use Flemme object by following steps :

import 'package:flemme/flemme.dart';

Defaut code Flutter Example:


Scaffold defaultFlutterScaffoldExample() {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

Same with Flemme:

 
Scaffold flemmeScaffoldExample() {
  return Scaffold(
    appBar: AppBar(
      title: widget.title.toTextWidget(),
    ),
    body: [
      'You have pushed the button this many times:'.toTextWidget(),
      '$_counter'.toTextWidget(style: Theme.of(context).textTheme.headline4),
    ].listToColumn(mainAxisAlignment: MainAxisAlignment.center).withCenter(),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

For all Widget

Create and custom Padding

// default value :  EdgeInsets.all(8.0)
Padding myPadding = Text('sample').withPadding();

// you can custome like  :  
Padding myPadding = Text('sample').withPadding(padding: EdgeInsets.all(20.0));

Encapsulate your Widget in another

// Center
Center center = myText.withCenter();
// Flexible
// defaut value flex = 1 , FlexFir = FlexFit.tight
Flexible myFlexible = myText.withFlexible();
Flexible myFlexible = myText.withFlexible(flex:2);

//  Expanded
// defaut value flex = 1 
Expanded myExpanded = myText.withExpanded();
Expanded myExpanded = myText.withExpanded(flex:2);

//Container
Container myContainer = myText.withContainer();

//SizeBox
SizeBox mySizedBox = myText.withSizedBox();

//FractionallySizedBox
FractionallySizedBox myFractionallySizedBox = myText.withFractionallySizedBox();

Generate a modal from a widget

  //context is necessary
 Container().showHimself(context);

  // custom background color, default transparent:
  Container().showHimself(context, bgColor:Colors.red);

For String

    //ellips text with '...' defaut value lenght 140
    String textShort = 'text too long'.ellipse();

    //custom lenght: 
    String textShort = 'text too long'.ellipse(lenght:32);
    
    //Convert quickly String to Text Widget
    Text myText = 'my sample'.toTextWidget();
    // you can custom with every Text parameter

For DateTime

    //convert DateTime to short string 
    //String like 10 seconds ago, a minute ago, 7 hours ago, etc. if is before now
    //String like in 10 seconds , in a minute, in 7 hours, etc. if is after now
    String time = DateTime().returnDateSmall();


For List

List<Widget> myList = ['sample'.toTextWidget(),'sample'.toTextWidget(),'sample'.toTextWidget(),'sample'.toTextWidget()];

//Convert list to Row
Row myRow = myList.listToRow();

//Convert list to Column
Column myRow = myList.listToColumn();

Configure and use default padding

You can use and config default padding.

Call FlemmeConfig() for use and config. It's a single instance, you don't need to put it statically in your code, just call it where you need it. Preferably before your MaterialApp

 FlemmeConfig().paddingAllM = const EdgeInsets.all(100); // default padding

Default value is configure like this:

  EdgeInsets paddingAllSM = const EdgeInsets.all(4);
  EdgeInsets paddingAllS = const EdgeInsets.all(8);
  EdgeInsets paddingAllM = const EdgeInsets.all(12);
  EdgeInsets paddingAllL = const EdgeInsets.all(20);
  EdgeInsets paddingAllXL = const EdgeInsets.all(32);

所属分类

依赖

依赖清单 3 项

源码仓库

使用此插件的项目

暂无相关数据。