Please notice: this project is a work in progress and completely experimental!
The reason & motivation why this project have been started is a question: Flutter & Dart awesome! Vue3 & Typescript & Tailwind awesome too!
But…
Flutter is not working inside Excel:( and its kind of complicated to work with web libraries.
So, what if we will write Vue3 TS in style of Flutter, because it’s just simplier and faster?
Please notice:
Add this package to your package.json file:
"dependencies": {
"@xsoulspace/vue_flutter_tailwind": "next"
}
add styling to your main.ts
import '@xsoulspace/vue_flutter_tailwind/dist/vft.css'
add styling to app div (temporary and will be removed during Scaffold widget refactoring)
<div id="app" class="absolute left-0 right-0 top-0 bottom-0"></div>
export const wrapperApp = () => {
const text = ref('Hello world!')
const text2 = ref(2)
const padding = EdgeInsets.all(EdgeInsetsStep.s3)
const textCard = Padding({
child: Text({
text,
}),
padding,
})
const btn = ElevatedButton({
child: Text({ text: ref('Hello Button') }),
onPressed: () => {
text2.value++
text.value = `Hello Wolrd! Counter: ${text2.value}`
},
})
return Scaffold({
body: Align({
toOverlay: true,
alignment: Alignment.bottom,
child: Container({
padding,
decoration: new BoxDecoration({
boxShadow: BoxShadow.xl,
borderRadius: BorderRadius.vertical({ bottom: BorderRadiusStep.xxl }),
}),
child: Row({
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
MouseRegion({
child: btn,
cursor: SystemMouseCursor.use({
cursor: SystemMouseCursors.click,
}),
}),
textCard,
],
}),
}),
}),
})
}
Let’s suppose we have a model:
export class Hero {
constructor(public name: string) {}
}
export class HeroesModel {
heroes = reactive<Maybe<Hero>[]>([])
add(hero: Hero) {
this.heroes.push(hero)
}
get count() {
return this.heroes.length
}
}
Create Provider on top of tree
MultiProvider.create({
models: [HeroesModel],
child: wrapperApp(),
})
And somewhere in tree just call
const heroModel = MultiProvider.get<HeroesModel>(HeroesModel)
First - get NavigationController in setup
Be sure that you have Navigation widget on top of tree
const navigationController = MultiProvider.get<NavigationController>(
NavigationController
)
Second call a function from for example Button.onTap:
ElevatedButton({
child: Text({
text: ref('Show dialog'),
}),
onTap: () => {
showDialog({
builder: Dialog({
child: Text({ text: ref('Hello World') }),
}),
navigationController,
})
},
}),
To close, just use navigationController.pop()
Add controller into MultiPorvider and Navigation widget below:
MultiProvider.create({
models: [NavigationController, ...],
child: Navigation({
child: ...,
}),
})
[] DropdownButton, DropdownButtonItem [x] functionality [] decoration
[] Visibility [x] functionality [] animation
[] TextField [x] Basic properties [x] TextEditingController [] InputDecoration (partially) [] TextStyle
Checkbox [x] Basic [] Style
[] GestureDetecture [x] click [] tap [] swipes [] hover
[] Container [x] Border [x] BorderRadius [x] Color [x] Shadow [] Margin [x] Padding [] Color Opacity ? Border Color Opacity [] Shape [] Gradient [] Alignment [] Image [x] Height [x] Width
[] Material
[] InkWell
[] Colors [x] White, black [] Color palette
[] Scaffold
Changelog can be found in Releases
Author: xsoulspace
Source Code: https://github.com/xsoulspace/vue_flutter_tailwind
#flutter #dart #mobile-apps #vuejs