rad 0.1.0 
rad: ^0.1.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. Which means, again, you'll be working with Widgets and tress. Don't worry, widgets in Rad are similar to Flutter widgets but in many ways more flexible.
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("working!"),
),
);
}
}
How about that? if you're familiar with Flutter it don't even need a explanation. Important to note here is that Rad doesn't render pixels to build widgets instead it maps widgets to HTML elements(tags).
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.1.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 #
Rad is a zero-dependency web framework which helps you write web apps in plain Dart(no-flutter). For debugging Dart web apps, you've follow your IDE/editor docs. See official guide here.
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 #
Using CSS #
You can add CSS rules to widgets to style them. For example:
Container(
style: "css-class another-class",
child: const Text("text inside a styled container"),
);
Note that some widgets such as StatelessWidget don't have a style parameter.
Sizing & Positioning #
Some widgets have parameters for their "size" or "position" or both. We refers to them as Sizing & Positioning props. Positioning props includes left, right, top and bottom parameters while width and height are Sizing props.
Widgets that accept sizing props also have a optional parameter 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: MeasuringUnit.percentage which 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)
