패키지, 저장소 및 앱 카테고리 검색

패키지 상세v0.1.0

flemme

플러터, 라이트, 초기, 제작, 재료, 환경. Flemme로 위젯 작성 간편화!

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
46
좋아요
19
Pub 점수
60

패키지 설치

flutter pub add flemme

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Flemme는 가벼운 초기 마테리얼 접근 방식을 통해 위젯 생성을 단순화하는 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 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.