simple_dart_web_widgets 0.0.3 icon indicating copy to clipboard operation
simple_dart_web_widgets: ^0.0.3 copied to clipboard


UI library.

Simple dart web widgets #

A library of very simple Web-components on dart. Not compatible with Flutter.

Read in other languages: English, Русский.

Live showcase example: simple_dart_web_showcase

##The main principles of the library

  • OOP approach
  • The components should be simple, flexible and suitable for customization in each individual project.
  • No magic (no code generation, no React programming, no DI, etc.).

Separation for css and code #

  • Theme is defined in one CSS file.
  • System styles are extracted in the system_style.css file.

Component properties defined in the theme (via CSS) #

  • font
  • background
  • color
  • border
  • font
  • images
  • padding (for components)

Component properties defined in dart code #

  • stride
  • width
  • height
  • vertical
  • wrap
  • align
  • scrollable
  • fillContent
  • padding (for panels)

Names conventions #

  • The names of all CSS classes begin with a capital letter and correspond to the class names in Dart.

Panel #

  • There is only one component for composition in the library - the Panel class. Using a combination of panels, you can create any layouts.
  • Panel - is not intended to be inherited from it.
  • To create new panel-based components, use the abstract PanelComponent class. As a parameter, you need to pass the name of the new dart class.


class SomeNewComplexComponent extends PanelComponent {
    SomeNewComplexComponent(): super('SomeNewComplexComponent') {
        vertical = true;
  • Simple components that do not need composition are inherited from the Component class. You also need to pass the name of the new dart class as a parameter.


class SomeNewComponent extends Component {
    SomeNewComponent(): super('SomeNewComponent') {


    Element nodeRoot = DivElement();

All components have a nodeRoot - which is placed in the DOM. Is possible access to the component style using - but only in emergency cases or during development.

Auxiliary CSS classes #

  • Active - highlights the active state of the component (for example, the current tab or a clamped button).
  • Disabled - highlights the disabled state of the component.

These classes are used only in MixinActivate and MixinDisable mixins - if you need to add activability or a ban on editing to your components, just mix these mixins into your new component.

Examples of using the library: #

For checking the appearance of themes, exist project: simple_dart_web_showcase

For create single page applications, it is recommended to use the library: simple_dart_web_views