https://github.com/renatoathaydes/flattery
Flattery is a library for building HTML elements using Widgets.
https://github.com/renatoathaydes/flattery
dart dart-web web-framework widget-toolkit
Last synced: about 1 year ago
JSON representation
Flattery is a library for building HTML elements using Widgets.
- Host: GitHub
- URL: https://github.com/renatoathaydes/flattery
- Owner: renatoathaydes
- License: apache-2.0
- Created: 2019-04-13T13:49:15.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-01T14:58:14.000Z (almost 7 years ago)
- Last Synced: 2025-02-09T23:28:26.355Z (over 1 year ago)
- Topics: dart, dart-web, web-framework, widget-toolkit
- Language: Dart
- Homepage: https://pub.dev/packages/flattery
- Size: 108 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flattery
Flattery is a library for building HTML elements using Widgets.
Widgets are just Dart objects whose purpose is to represent some user interface element.
They are implemented using the awesome `dart:html` package, and do not try to hide it - so you can
use your HTML/CSS knowledge to enhance existing widgets, and to create your own, type safely.
## Usage
A simple usage example:
```dart
import 'dart:html' hide Text;
import 'package:flattery/flattery_widgets.dart';
/// Simple Counter Model.
class Counter {
int value = 0;
}
/// A Counter Widget.
///
/// By implementing [ShadowWidget], we make our widget use a shadow root
/// to isolate its contents.
class CounterView extends Counter with Widget, ShadowWidget {
final text = Text('')..style.textAlign = 'left';
/// Build the component's Element.
/// Uses a 2x2 grid to place the child Widgets
Element build() => Grid(columnGap: '10px', classes: [
'main-grid'
], children: [
[text, text],
// row 1 (repeat the element so it takes up both columns)
[
// row 2 contains 2 buttons to inc/decrement the counter
Button(text: 'Increment', onClick: (e) => value++),
Button(text: 'Decrement', onClick: (e) => value--),
]
// row 2
]).root;
CounterView() {
stylesheet = '* { font-family: sans-serif; }'
'button { height: 4em; }'
'.main-grid { width: 25em; }';
_update();
}
/// All model's setters that affect the state of the view need to be
/// overridden in the Widget extending it, so that they update the view.
@override
set value(int value) {
super.value = value;
_update();
}
_update() => text.text = 'The current count is $value';
}
```
## Building
```
pub get
```
### Run the example
```
webdev serve example
```
### Running the tests
Unit tests:
```
pub run test
```
> Use option `-r json` or `r -expanded` to see details.
Browser tests:
```
pub run test -p chrome
```
## Features and bugs
Please file feature requests and bugs at the [issue tracker][tracker].
[tracker]: https://github.com/renatoathaydes/flattery/issues
## Links
Dart Test Documentation:
https://github.com/dart-lang/test/tree/master/pkgs/test