flutter pub add rad基于插件公开信息、社区数据与项目使用情况整理的选型参考。
RAD 是一个零依赖的前端框架，专为使用 Dart 构建高性能 Web 应用而设计。它使开发者能够在无外部依赖的情况下创建快速、可扩展的 Web 应用，专注于简单性和效率。RAD 专为 Web 而构建，利用 Dart 的功能以最小开销提供响应式用户界面。该框架非常适合对性能和轻量级架构要求较高的项目。其简洁的设计促进了快速开发，并易于集成到现有工作流程中。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
Rad is a frontend framework for creating fast and interactive web apps using Dart. It has all the best bits of Flutter(StatefulWidgets, Builders) and React(Hooks, Performance), and allows you to use web technologies(HTML and CSS) in your app.
void main() {
runApp(
app: Text('hello world'),
appTargetId: 'output',
);
}
Function runApp will finds a element having id=output in your HTML page, create a Rad app with it, and then displays "hello world" inside of it. As you might have guessed it, Text('hello world') is a widget, a special purpose widget provided by the framework that we're using to display desired text on the screen. Rad provides number of widgets that you can use and best thing about widgets is that you can compose them together to create more widgets and build complex layouts.
Following widgets in Rad are inspired from Flutter:
These widgets has same syntax as their Flutter's counterparts. Not just syntax, they also works exactly same as if they would in Flutter. Which means you don't have to learn anything new to be able to use them.
Similar to React, we have number of hooks that you can use to power-up your widget functions.
Let's see a basic example with useState:
Widget widgetFunction() => HookScope(() {
// create a stateful value
var state = useState(0);
return Span(
child: Text('You clicked me ${state.value} time!'),
onClick: (_) => state.value++,
);
});
runApp(app: widgetFunction(), ...);
While using hooks please keep in mind following things,
Rad provides you with more than 100 widgets that are dedicated to help you write HTML within your Dart code as easily as possible.
Let's look at this markup example:
<div>
<p>Hey there!</p>
</div>
Here's how we'll write this using HTML widgets:
Division(
children: [
Paragraph(innerText: 'Hey there!'),
]
)
There's also an alternative syntax for all HTML widgets:
div(
children: [
p(innerText: 'Hey there!'),
]
)
Apart from syntax/names, HTML widgets are composable and has same semantics in the sense that they can be composed and mixed together with other widgets. For example,
Span(
child: ListView(
children: [
SomeStatefulWidget(),
Span(),
...
]
),
);
In above example, a Span widget is containing a ListView widget. Further, that ListView is containing a StatefulWidget and a Span widget. The point we're trying to make is that HTML widgets won't restrict you to 'just HTML'.
A testing library for Rad applications, heavily inspired from flutter_test.
A set of commonly used hooks for using in your Rad applications.
Provides an enhanced development experience for developers working with the Rad Framework. With its powerful features, this extension makes it easier for developers to write and manage code, saving time and increasing productivity. Extension's top features are:
Visual JSX: Transforms your HTML widgets into a visually appealing, JSX-like syntax.
HTML2Rad: Converts your HTML markup directly into Rad's HTML widgets.
Below is the list of available widgets and hooks in Rad. Some widgets are named after Flutter widgets because they either works exactly same or can be used to achieve same things but in a different way(more or less). All those widgets are tagged accordingly.
Tags:
useContext , useNavigator , useRef , useState , useMemo , useCallback , useEffect , useLayoutEffect
InputButton , InputCheckBox , InputColor , InputDate , InputDateTimeLocal , InputEmail , InputFile , InputImage , InputMonth , InputNumber , InputPassword , InputRadio , InputRange , InputReset , InputSearch , InputSubmit , InputTelephone , InputText , InputTime , InputUrl , InputWeek
a , abbr , address , area , article , aside , audio , bdi , bdo , blockquote , br , button , canvas , caption , cite , code , col , colgroup , data , datalist , dd , del , details , dfn , dialog , div , dl , dt , em , embed , fieldset , figcaption , figure , footer , form , h1 , h2 , h3 , h4 , h5 , h6 , header , hr , i , iframe , img , input , ins , kbd , label , legend , li , map , mark , menu , meter , nav , ol , optgroup , option , output , p , picture , portal , pre , progress , q , rp , rt , ruby , s , samp , section , select , small , source , span , strong , sub , summary , sup , table , tbody , td , textarea , tfoot , th , thead , time , tr , track , ul , vartag , video , wbr
Anchor , Abbreviation , Address , Article , Aside , Audio , BidirectionalIsolate , BidirectionalTextOverride , BlockQuote , Button , Canvas , Citation , Data , DataList , Definition , DeletedText , DescriptionDetails , DescriptionList , DescriptionTerm , Details , Dialog , Division , EmbedExternal , EmbedTextTrack , Emphasis , FieldSet , Figure , FigureCaption , Footer , Form , Header , Heading1 , Heading2 , Heading3 , Heading4 , Heading5 , Heading6 , HorizontalRule , Idiomatic , IFrame , Image , ImageMap , ImageMapArea , InlineCode , InlineQuotation , Input , InsertedText , KeyboardInput , Label , Legend , LineBreak , LineBreakOpportunity , ListItem , MarkText , MediaSource , Menu , Meter , Navigation , Option , OptionGroup , OrderedList , Output , Paragraph , Picture , Portal , PreformattedText , Progress , RubyAnnotation , RubyFallbackParenthesis , RubyText , SampleOutput , Section , Select , Small , Span , StrikeThrough , Strong , SubScript , Summary , SuperScript , Table , TableBody , TableCaption , TableColumn , TableColumnGroup , TableDataCell , TableFoot , TableHead , TableHeaderCell , TableRow , TextArea , Time , UnOrderedList , Variable , Video
For reporting bugs/queries, feel free to open issue. Read contributing guide for more.
依赖清单 1 项
^1.8.0暂无相关数据。