flattery 0.3.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 59

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:

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.

Dart Test Documentation:

https://github.com/dart-lang/test/tree/master/pkgs/test

0.3.0 #

  • Several internal improvements, including tighter type checking.
  • Added option to allow Row Widgets to wrap their contents.
  • Added support for Observing contents of a Container.
  • Added CSS classes to all Widget constructors.

0.2.0 #

  • New widgets: CheckBox, Button, Rectangle, Column, Grid.
  • New function: querySelectorAllWithShadow (can query within shadow Widget).

0.1.0 #

  • Initial version, created by Stagehand
  • Basic types: Widget, Container, ShadowWidget, Text.

example/flattery_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';
}

main() => document.getElementById('output').append(CounterView().root);

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flattery: ^0.3.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flattery/flattery.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
19
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
59
Learn more about scoring.

We analyzed this package on Oct 21, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21

Platforms

Detected platforms: web

Primary library: package:flattery/flattery.dart with components: html.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.4.0 <3.0.0
Dev dependencies
build_runner ^1.6.7
build_test ^0.10.8
build_web_compilers ^2.2.3
pedantic ^1.8.0
test ^1.0.0
webdriver ^2.1.1