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 🇧🇷
| Package | Pub |
|---|---|
| wed_core | |
| wed_dom | |
| wed_utils | |
| wed_router |
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.6Or just run the following command:
$ dart pub add wedThen, 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();
});
},
),
),
],
),
];
}
}
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.
The Component class contains the following methods:
render(): This method returns aWidgetobject that represents the component's current state.setState(): This method allows the component's state to be updated, triggering a re-render.
The ComponentBaseProps class is the base class for all component props classes.
Contributions are welcome! If you have any suggestions or improvements, please open an issue or submit a pull request.
- Henrique Nascimento - Initial work - @HenriqueNas
The Wed Framework is licensed under the MIT License.