FLUTTER ECOSYSTEM

Norbert515/flutter_ide

Flutter 위젯을 위한 시각적 편집기

위젯 메이커 프로젝트 이미지
Stars
1.1천
Forks
186
최근 푸시(UTC)
2022. 12. 6.
프로젝트 상태
활성
Norbert Kozsir GitHub avatar
GITHUB User

Norbert Kozsir ↗

Mostly Flutter these days. Love to explore new technologies though.

FlutterFlowKarlsruhe, Germany공식 웹사이트 ↗
언어DartC++CMakefileBatchfileSwiftObjective-CHTML

관련 패키지 및 예제

사용 중인 의존성

의존성 목록 17 개
  • flutter{"sdk":"flutter"}
  • uuid^2.0.1
  • provider^2.0.1
  • flutter_colorpickerany
  • code_builder^3.2.0
  • dart_style^1.2.8
  • rxdartany
  • file_system_explorer{"git":{"url":"https://github.com/Norbert515/file_system_explorer.git"}}
  • flutter_desktop_widgets2{"git":{"url":"https://github.com/Norbert515/flutter_desktop_widgets2.git"}}
  • flutter_highlight^0.6.0
  • usage3.4.1
  • flutter_hooks^0.7.0
  • mustache{"git":{"url":"https://github.com/Norbert515/mustache.git"}}
  • cupertino_icons^0.1.2
  • flutter_test개발 의존성{"sdk":"flutter"}
  • flutter_driver개발 의존성{"sdk":"flutter"}
  • test개발 의존성any

앱 카테고리

순위

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

README 펼치기 / 접기

The Widget-Maker

title

Buy Me A Coffee

State of the project

The project is currently not maintained by me and the code could probably use a bit of refactoring.

This README is still work in progress.

If anybody is interested in contributing/ forking/ using it as a base for another project - feel free!

Features

  • Templates
  • Different Canvas sizes
  • Build and "Play" (interact with UI) mode
  • Multiple Canvases and instantiation
  • Code Generation

title title

Building

This is intended to be run using Flutter Desktop or Flutter web. For Desktop, simply switch to the master channel and run:

flutter run -d [windows|linux|macos]

The concept

A few words about the code architecture.

Widget-Elements

Widget-Elements play a central part in the Widget-Maker as these are actual widgets you drag around and style. The Widget-Elements can be found under lib/data/widget_elements.

Widget-Elements form a forth tree (on top of Widgets/RenderObjects and Elements) they include a lot of meta information. Widget-Elements only manage the tree, but not the actual rendering, interaction and modification of the widgets, that is up to the widget which is generated by the generateWidget() method. Those widgets have to mix in ElementWidgetStateMixin, that class contains code which handles common UX scenarios like accepting children via drag, or showing a border on selection.

Making new Widget-Elements

You certainly can make new Widget-Elements by hand, in fact Widget-Elements such as the Scaffold, Row and more are hand made.

But a lot of widgets are pretty basic, so instead of copy-pasting the same wrapper code over and over again, there is a generator which does that for you.

Take a look at (lib/Data/widget_elements/config.yaml and README.md) to get a sense of the schema.

To generated those widget simply execute the lib/data/widget_elements/scripts/build.dart file. Be sure to be inside the script folder when running that script because it relies on relative paths!

dart build.dart
Properties

The MProperty is the base class for all properties inside the Widget-Maker. Each Widget-Element has a list of properties. These properties reflect the constructor parameters of the widgets in code. Properties are responsible for providing a way of changing themselves and providing meta information.

For more information take a look at lib/data/properties/basic_properties.dart

Running the test

Not all tests seem to pass as of now.

flutter test

Website

The docs folder contains the source for www.widgetmaker.dev

Donations

Feel free to donate a pizza/ coffee :)