rad 0.2.0 
rad: ^0.2.0 copied to clipboard
erlage.comA zero-dependency frontend framework for writing web apps in plain Dart. Inspired from Flutter.
Rad #
Rad is a frontend framework for Dart. It's inspired from Flutter and shares same programming paradigm. Similar to Flutter, widgets can be composed together to build more widgets. A widget can be describe static as well as dynamic part of user interface. Widgets in Rad are very similar to Flutter widgets.
Let's take a look at one of the widget from Rad:
class HomePage extends StatelessWidget
{
@override
Widget build(BuildContext context) {
return Container(
child: GestureDetector(
child: const Text("click me"),
onTap: () => print("received a click!"),
),
);
}
}
How about that? if you're familiar with Flutter it don't even need an explanation.
Geting started #
-
Create a demo web app:
dart create -t web-simple myapp
Having troubles? learn more from official guide
-
Add Rad as dependency:
- Open
pubspec.yamlin newly created app folder and addradto your dependencies:dependencies: rad: 0.2.0
- Open
-
Import Rad widgets in your
main.dartimport 'package:rad/widgets.dart'; -
Create Rad app
void main() { RadApp( // 'output' is the id of div in your web/index.html // framework will mount your app inside that div // if you don't have a div with id 'output' in web/index.html, targetId: "output", // you've to create it // e.g // <body> // <div id="output"></div> // ... child: GestureDetector( onTap: () { print("working"); }, child: Container( child: Text("click me"), ), ), ); } -
Run
webdev serveand follow on-screen instructions
Debugging #
For debugging a Dart web app, you've to setup a debugger. See official guide here. (remember you don't need Flutter SDK/or its plugins for using Rad)
If you happen to be using VS code,
- Install VS code Dart plugin
- Create a
launch.jsoninside.vscodefolder - see example - Start your app in debug mode - see this for more
Styling widgets #
Rad doesn't use a rendering engine to render a widget or anything like that. Rad widgets are mapped to HTML tags and composed together they way you describe them. This allows you to style them the way you want.
Using CSS for styling #
You can add CSS rules to widgets to style them. For example:
Container(
styles: "css-class another-class",
child: const Text("text inside a styled container"),
);
Note: Some widgets such as StatelessWidget don't have a style property.
Sizing & Positioning #
Some widgets have properties for their "size" or "position" or both. We refers to them as Sizing & Positioning props. Positioning props includes left, right, top and bottom properties while width and height are Sizing props.
Widgets that accept sizing props also have an optional property sizingUnit. For positioning props there's positioningUnit. By default, width: 20 will be mapped to width: 20px. But if you want to set width to some percentage of parent you can set sizingUnit: to MeasuringUnit.percentage. This will tell framework to map width: 20 to width: 20%.
Api reference #
Widgets Index #
Main #
Elements #
Layout #
Misc #
Abstract #
Contribution #
Rad is a hobby project, feel free to open pull requests if you feel like missing a widget or something. Rad's core(src/core) is extremely small and straightforward. Having basic knowledge of DOM & Dart is enough to implement widgets(src/widgets).
Metadata
Publisher
Metadata
A zero-dependency frontend framework for writing web apps in plain Dart. Inspired from Flutter.
Repository (GitHub)
View/report issues
Documentation
License
unknown (LICENSE)
