skawa_material_components 1.0.0+1

  • Installing
  • Versions
  • 69


Pub Package

More "Material" Components

These components are based on Material Design and built on top of package:angular_components.

The goal is to provide a couple of components that seem to be missing from angular_components.

Currently Available components:

  • <skawa-card>
  • <skawa-data-table>
  • <skawa-grid>
  • <skawa-snackbar>

Both packages are being actively maintained, meaning components get added and removed. In case of a component from this list is added to angular_components, it will be deprecated and eventually removed from skawa_material_components.

Removed components:

  • <skawa-appbar>
  • <skawa-drawer>
  • <skawa-sidebar>

Getting started

See examples

Need a component?

Let us know what you'd like to use, open an issue!

Looking for maintainers

If you have a component you'd like to be part of this collection, let us know, we can chat!


Skawa Material Components reuses and builds on top of certain parts of angular_components package. (Namely, base SCSS files) angular_components license

Skawa Material Components is released under MIT license.


  • Fixed missing pub constraints


  • Release to pub


  • Splitted the original package, removed the non-material components from this package
  • RowData now has additional classes filed to be able style them differently


  • SkawaRawMarkdownRendererComponent added


  • SkawaMarkdownEditorComponent disable ex improved


  • SkawaMarkdownEditorComponent can be disabled


  • Added a new output stream to SkawaMarkdownEditorComponent which emits on displayMode change
  • SkawaMarkdownRendererComponent added
  • SkawaDataTableComponent non-highlightable mode fixed


  • SkawaInfobarComponent button open the url in a new tab
  • SkawaDataTableComponent can be non highlightable


  • SkawaMarkdownEditorComponent now updates EditorRenderTarget with the proper classes


  • fix minor issue in toggleAttribute method
  • snackbar_test refactored
  • added flaky-on-travis tags to tests which is never fails on localhost but sometimes fails on travis
  • moved PromptComponent to lib folder due to Angular4 migration


  • Upgrade to Angular4


  • Added new component <prompt>


  • Added new component <skawa-markdown-editor> and corresponding Directives.
  • Ckeditor description corrected
  • analysis_options became stricter
  • travis script now running dartfmt, if the code is not formated properly then exit


  • Added tests to snackbar
  • Changed angular2 version from ^3.1.0 to 3.1.0


  • Added SkawaRandomColorizePipe


  • Added sort logic to SkawaDataTableComponent


  • Modified snackbar to use material popup.
  • Snackbar should now be in the bottom left corner of the screen always.
  • Changed angular_components version from "^0.5.1" to "^0.5.3+1"


  • DataTable highlight event won't be triggered when selector checkbox is clicked


  • Changed to DataTable
    • introduction of the concept of primaryAction. Columns with accessors can subscript to (trigger) action.
    • rows can be (highlight)-ed without making a change in selection


  • Fixed a strong-mode error about missing trigger on Snackbar
  • Changed DataTableAccessor return value from dynamic to String


  • Add SnackbarComponent


  • Add some new functionality to <skawa-data-table>:
    • change event is emitted when selection changes
    • setting multiSelection toggles whether only a single or multiple elements can be selected


  • fixed an issue where dart2js would warn about ?? in for loop


  • Added support for column renderer for <data-table>


  • Added new component <skawa-grid>


  • CKEditor accepts initial value as content input property


  • Fixed transformer usage


  • Added new component <skawa-ckeditor>


  • Added tests with travis integration
  • Minor changes to components and their styling

Use this package as a library

1. Depend on it

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

  skawa_material_components: ^1.0.0+1

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:skawa_material_components/base_implementations/grid/grid.dart';
import 'package:skawa_material_components/card/card.dart';
import 'package:skawa_material_components/card/card_actions.dart';
import 'package:skawa_material_components/card/card_directives.dart';
import 'package:skawa_material_components/data_table/data_table.dart';
import 'package:skawa_material_components/data_table/data_table_column.dart';
import 'package:skawa_material_components/data_table/row_data.dart';
import 'package:skawa_material_components/data_table/sort.dart';
import 'package:skawa_material_components/grid/grid_component.dart';
import 'package:skawa_material_components/skawa_materialish_components.dart';
import 'package:skawa_material_components/snackbar/snackbar.dart';
import 'package:skawa_material_components/util/attribute.dart';
Version Uploaded Documentation Archive
1.0.0+1 Dec 14, 2018 Go to the documentation of skawa_material_components 1.0.0+1 Download skawa_material_components 1.0.0+1 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

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

  • Dart: 2.1.0
  • pana: 0.12.10


Detected platforms: web

Platform components identified in package: html, js.

Health suggestions

Format lib/base_implementations/grid/grid.dart.

Run dartfmt to format lib/base_implementations/grid/grid.dart.

Format lib/card/card.dart.

Run dartfmt to format lib/card/card.dart.

Format lib/data_table/data_table.dart.

Run dartfmt to format lib/data_table/data_table.dart.

Fix additional 5 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/data_table/data_table_column.dart (Run dartfmt to format lib/data_table/data_table_column.dart.)
  • lib/data_table/sort.dart (Run dartfmt to format lib/data_table/sort.dart.)
  • lib/grid/grid_component.dart (Run dartfmt to format lib/grid/grid_component.dart.)
  • lib/skawa_materialish_components.dart (Run dartfmt to format lib/skawa_materialish_components.dart.)
  • lib/snackbar/snackbar.dart (Run dartfmt to format lib/snackbar/snackbar.dart.)

Maintenance suggestions

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use skawa_material_components.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
angular ^5.2.0 5.2.0
angular_components ^0.10.1 0.10.1 0.11.0
quiver ^2.0.0 2.0.1
Transitive dependencies
analyzer 0.34.1
angular_ast 0.5.8
angular_compiler 0.4.2
angular_forms 2.1.1
args 1.5.1
async 2.0.8
build 1.1.0
built_collection 4.1.0
built_value 6.2.0
charcode 1.1.2
cli_repl 0.2.0+1
code_builder 3.1.3
collection 1.14.11
convert 2.1.1
crypto 2.0.6
csslib 0.14.6
dart_internal 0.1.2
dart_style 1.2.2
fixnum 0.10.9
front_end 0.1.8
glob 1.1.7
html 0.13.3+3
http 0.12.0+1
http_parser 3.1.3
intl 0.15.7
js 0.6.1+1
json_annotation 2.0.0
kernel 0.3.8
logging 0.11.3+2
matcher 0.12.4
meta 1.1.7
observable 0.22.1+5
package_config 1.0.5
package_resolver 1.0.6
path 1.6.2
plugin 0.2.0+3
protobuf 0.10.8 0.11.0
pub_semver 1.4.2
pubspec_parse 0.1.4
sass 1.16.0
sass_builder 2.1.2
source_gen 0.9.4
source_maps 0.10.8
source_span 1.5.1
stack_trace 1.9.3
stream_transform 0.0.14+1
string_scanner 1.0.4
term_glyph 1.1.0
tuple 1.0.2
typed_data 1.1.6
utf 0.9.0+5
watcher 0.9.7+10
yaml 2.1.15
Dev dependencies
angular_test ^2.1.0
build_config ^0.3.1+4 0.3.1+4
build_runner ^1.1.2
build_test ^0.10.3+4
build_web_compilers ^1.0.0
html_unescape ^1.0.1+2
mockito ^3.0.0
test ^1.5.1