パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v0.1.0

flemme

Flutter、ライト、初期、作成、マテリアル、環境。Flemmeでウィジェットの記述を簡単に!

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
46
いいね数
19
Pub ポイント
60

パッケージをインストール

flutter pub add flemme

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flemme は、UI開発における軽量で初期のマテリアルアプローチを採用し、ウィジェット作成を簡素化するためのFlutterパッケージです。ボイラープレートコードの削減と一般的なウィジェットパターンのスムーズ化により生産性を向上させます。シンプルさを最優先に設計されており、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 件

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。