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.

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.5

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.

GitHub

View Github