搜尋套件、儲存庫與 APP 分類

套件詳情v0.1.0

flemme

Flutter、淺色、早期、製作、材質、環境。使用 Flemme 簡化您的組件撰寫!

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
46
喜歡數
19
Pub 分數
60

安裝套件

flutter pub add flemme

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Flemme 是一個 Flutter 套件,專為透過輕量級、早期材質設計的 UI 開發方法來簡化組件建立而設計。它透過減少重複程式碼並簡化常見的組件模式來提升生產力。以簡單性為核心理念,Flemme 支援多個平台,包括 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 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。