A web framework for Dart based on Flutter's widget model. The goal of the
project is conceptual and data model compatibility with Flutter. An explicit
non-goal is "write once, run anywhere". Butterfly shares no code with Flutter.
Disclaimer: This is a personal experiment. This is not an official Google product.
What is Butterfly?
- Widget-based (i.e. component-based)
- Web framework
- For Dart
- Inspired by Flutter (transitively by ReactJS)
Who is Butterfly for?
- For app developers who build mobile apps using Flutter, and who also need
to build web apps. Butterfly gives you a single conceptual model for writing
your apps for both web and mobile, and allows the reuse of big chunks of code.
- For web developers, switching to Dart but prefer using a ReactJS-like app
- For application developers who prefer functional-reactive programming style.
- One language: traditionally web-frameworks make developers work in a
number of languages that are glued together by toolchains and runtimes.
LESS). This complicates tooling and usually the integration between the
languages is very weak. Butterfly gives you one modern battle-tested language -
Dart - that proved to scale from small apps to large enterprise projects, has
great tools and is a pleasure to write code in every day. Code navigation
works seamlessly, typos in the code are identified immediately, and you get
powerful refactoring features, such as renaming variables and methods. In
addition Dart gives you minification, dead code elimination and performance
optimizing compiler. Having one powerful language lets you write your code
using the normal OOP practices and patterns:
- Encapsulation: private fields, methods and classes
- Lexical scoping: static and top-level variables, constants and
- Control of API surface: make your components private
- Control of initialization and lifecycle: components can be cached, injected,
shared, and provided via factories
- Debugging: breakpoints work everywhere and show correct stack information.
- Familiar: if you have prior Flutter/ReactJS experience you will feel right
- Reusable: while not API compatible with Flutter (on purpose), the
component system is identical, which means you can reuse most of your app's
business logic, data model and utilities across mobile and web. More
importantly, you will be using the same Dart tools both for your mobile and
web projects. You cannot reuse the widgets though, as they are targeting
different rendering systems (Flutter Engine vs HTML DOM).
- Simple: Butterfly introduces only a handful of concepts popularized by
ReactJS and it works like a plain library that you can drop into an existing
project; it shares all the same Dart libraries so the incremental cost of
adding it to your project is minimal.
- Small: starting application size is <40kb (minified + gzipped)
- Fast: while it's hard to compare frameworks in terms of raw speed, this
framework does aim to give you great levels of control for efficient
incremental UI updates. Because widgets in Butterfly are plain in-memory
objects (a.k.a. virtual) the framework minimizes the number of DOM nodes by
only creates nodes for those virtual nodes that need them. Most other
frameworks create a DOM element for each component.
- Layered: made of layers (widgets, tree, DOM) - you choose how low-level to
- Hackable: defining new widgets is at the core of the development
experience. However, you can also extend the virtual tree model when you need
to perform advanced rendering tricks directly on top of the DOM API.
0.0.2 - 2016-04-29
Can now render the TodoMVC app (ported from Angular 2). Maybe, just maybe,
someone could even write a simple app with it? Good luck!
0.0.1 - 2016-04-03
butterfly is born.
1. Depend on it
Add this to your package's pubspec.yaml file:
2. Install it
You can install packages from the command line:
$ pub get
Alternatively, your editor might support
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
||Apr 30, 2016
||Apr 3, 2016
We analyzed this package, and provided a score, details, and suggestions below.
- completed on Feb 3, 2018
- Dart: 2.0.0-dev.20.0
- pana: 0.10.1
Detected platforms: web
package:butterfly/butterfly.dart with components:
Package is pre-v1 release.
While there is nothing inherently wrong with versions of
0.*.*, it usually means that the author is still experimenting with the general direction API.
The description is too long.
Search engines will display only the first part of the description. Try to keep it under 180 characters.
Create a short demo in the
example/ directory to show how to use this package. Common file name patterns include:
example.dart or you could also use