rad 0.3.0 
rad: ^0.3.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. Widgets are the centeral concept, and widgets can be composed together to build more widgets. A widget can describe static as well as dynamic part of user interface. Rad offers widgets that are similar to Flutter widgets. Let's take a look,
Here's an example written using 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.3.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 for your IDE/editor. See Dart guide for debugging web apps and tools that you can use. (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
Deployment #
For getting a release build run webdev build --release. It'll generate a ready-to-deploy build of your app inside build folder. To customize your build, read this official deployment guide. Alternatively, you can also follow webdev documentation.
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.
Size & Position #
Some widgets have properties for their "size" or "position" or both. We refers to them as SizeProps & PositionProps respectively. PositionProps includes left, right, top and bottom properties while width and height are SizeProps.
Widgets that accept SizeProps also have an optional property sizeUnit. For PositionProps there's positionUnit. 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 sizeUnit: 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. Core(src/core) of this framework is extremely small and straightforward. Having just the 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)
