flattery 0.3.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 54

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

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter 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]
8
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]
54
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6

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