Skip to content

Web Dart framework, to works like React and sounds like Flutter.

License

Notifications You must be signed in to change notification settings

HenriqueNas/Wed

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Wed Framework

The Wed Framework is a simple web framework for Dart, inspired by React and using Flutter syntax. It provides a set of basic components and a global method for rendering the application.

Developed with 💙 by HenriqueNas 🇧🇷

Packages 📦

Package Pub
wed_core pub package
wed_dom pub package
wed_utils pub package
wed_router pub package

Getting Started

Installing

To use the Wed framework, first you'll need to create a new Dart web project and add the wed package to your pubspec.yaml file:

dependencies:
  wed: ^0.0.6

Or just run the following command:

$ dart pub add wed

Using

Then, you can import the package into your project and start using the provided components:

import 'dart:html';

import 'package:wed/wed.dart';

final app = querySelector("#output") as DivElement;

void main() {
  renderApp(MyComponent(), app);
}

class MyComponent extends Component {
  var text = 'Hello World';
  var isClicked = false;

  void toggleText() {
    isClicked = !isClicked;
    text = isClicked ? 'Clicked' : 'Hello World';
  }

  @override
  List<Component> build() {
    return [
      Div(
        props: DivProps(
          styles: CssStyle(
            width: Units.vw(100),
            height: Units.vh(100),
            backgroundColor: 'lightblue',
          ).merge(DisplayFlex.center),
        ),
        children: [
          Button(
            props: ButtonProps(
              innerText: text,
              styles: CssStyle(
                backgroundColor: 'blue',
                fontSize: Units.rem(2),
                color: 'white',
                textAlign: TextAlign.center,
                padding: Padding.symmetric(horizontal: 30, vertical: 20),
                borderRadius: BorderRadius.all(12),
                borderWidth: Units.none,
                cursor: Cursor.pointer,
              ),
              onClick: (_) {
                setState(() {
                  toggleText();
                });
              },
            ),
          ),
        ],
      ),
    ];
  }
}

Classes and Helpers

The Component class is the base class for all components, and it contains a basic set of methods for rendering the component and updating its state.

Component Class

The Component class contains the following methods:

  • render(): This method returns a Widget object that represents the component's current state.
  • setState(): This method allows the component's state to be updated, triggering a re-render.

CssStyle Class

The ComponentBaseProps class is the base class for all component props classes.

Contributing

Contributions are welcome! If you have any suggestions or improvements, please open an issue or submit a pull request.

Authors

License

The Wed Framework is licensed under the MIT License.