Видео

I don't think they use my package. Yes, this can be used on any platform.

@@FilledStacks No, I meant similar behaviour I have seen there.

Thanks for adding the timestamps.

Hey, I have never had to do memory management in Flutter because it uses a garbage collector so I have no experience in memory management in Flutter.

@@FilledStacks okay, thank you so much for quick response 🙂

haha. My clients are not angry about it.

@@FilledStacks did u use some workarounds from flutter issue 32120 ?

@@saqibamin9942 it's my pleasure to share the information.

Hi, I don't know what you're asking. Could you phrase the question in a different way please.

Makes sense, I've seen some of those experiences as well. I'm currently building a Flutter web app for a client and the hot reload is instant. Plus with WASM in stable the deployed version is also great. I can't tell the difference between Flutter web apps and NextJS ones in well built apps like rive.app and superlist.com . I also know how to make it feel premium, there's a few small things, which I show in a video, but I have like another 10 of those I apply and the apps feel "like a normal web application"

@@migalv_17 Thank you, I appreciate that. 1. Thats handled by the framework, you would build the i individual items then use the framework to add them into a list or a page view. 2. yes you can control them through a StateController that I built in expression UI. still some features missing but it works with my current apps. 3. Different screen sizes works the same as how framer handles it. One artboard per for, factor, mobile, tablet, desktop. Then for responsiveness inside a form factor you can bind your UI to the edges of screens so it sticks the same distance from each side. Video on my twitter profile. 4. You can dynamically change any text by passing in the value using the text property name you gave it in the editor so localization works the same as you currently do it in your codebase.

haha, frog was such an easy setup for me. Maybe the CLI isn't as great anymore. When I used it I got it setup in seconds the first time I used it.

You use the same approach. This approach works for mobile and web.

@@FilledStacks thank you, great tutorials

🥳

Sure. Run the flutter command with the --wasm flag in your project and you should have it working.

Thank you.

hey, yes. on the docs site there’s a discord link. stacked.filledstacks.com

Node Js would be great if I could write it with dart 😁

yes it is. we use it with the latest flutter.

That's great to hear! I appreciate you leaving the comment.

I don't want to maintain or write any UI code.

I didn't get you, if we are exporting code from figma then you don't have to write Or maintain ui code right?

@@atishayjain9341 based on the 5 I have tried the code didn’t work as is. Plus, you have to integrate your state and business logic which means you have to modify that code. so you have to update the code to fit into your project and the refactor so it can use shared widgets instead of pure from scratch widgets every time. Code gen is basically just someone else’s coding patterns for UI in your codebase, that you then have to maintain for the rest of time when that UI has to change.

Yes, you can do that. There's a few package that do it. Most of them use a combination of the offset + itemSize + listBounds to manually calculate if the item is available. The offset will tell you when an item is off screen at the scrolling direction end. The itemSize can be used to understand when that item has left the screen. The listBounds can be used to determine when an item has entered the screen visibility. This video is 2 years old so I think there might be additional properties you can explore. Check out the source of some of the "visibilty packages" and see what they do in the latest Flutter.

We use the same approach that Framer does. You define an artboard per form factor and it'll select the correct one based on your screen size. .i.e. mobile, tablet, desktop, watch. In addition to that we'll use some contraints in the framework that will keep UI pegged against other UI elements or the edge of the screens.

Thank you ☺

Hey, you can do that if you want to. All that Stacked does is sync the text value to the viewModel in realtime without adding additional code. This means you can write all business logic that needs to access the text from the form in the viewmodel without using the controller. Making it a pure class that can be unit tested with ease.

Kind of. I'd say create better products by not writing code. Delete code often, it's a healthy and required part of app maintenance.

@@FilledStacks I think kinda agree of this, but it like we do 2 times job

State I manage using Rive runtime, but I trigger the transitions from my ViewModel. UI code , Business Logic, and Application Logic should be completely separate for testability reasons. Therefore you should be able to replace the UI entirely with something else and keep the rest of the app the same. Which is how this approach works.

@@FilledStacks great 👍

😄

This only replaces your UI, so the rest of your code looks exactly the same. 1. You'll call your backend code 2. You get your data 3. You construct your list 4. You pass your data to your list item created in rive 5. ExpressionUI dynamically updates your text of your list item. TextFields you'll do in code for now. I just design my decoration in rive then add it to the input field.

Thank you. I appreciate that.

I appreciate that Yazeed. I hope you can help too.

I'm confused by this question. Are you asking where my content directs viewers / readers of it?

@@FilledStacks yes my brother.... Once you talk about flutter web, and then about testing, and then about build UI with Figma, then this video....

@@conceptcoder I talk about what I'm doing as a professional developer. What I'm currently doing is what you'll see on the channel.

I actually just finished writing the first post about how you can start using it. It's scheduled for release tomorrow. Link at the end of this comment. 1. You create your UI in rive 2. You load your artboard using the expressionUI open source package or rive directly. ExpressionUI is a collection of classes that make it more mobile developer friendly to build on the rive runtime. Sign up here to get tomorrows post: appsplusplus.carrd.co/

haha, I just wanted to have a bit more fun as I'm building my own mobile apps 😁 This is what I ended up with.

That would be really awesome, when you're ready reach out and let me know. I have a discord where the contributors discuss implementations and ideas.

Good question. tl;dr - Both of those are possible. This is how we do it. You'll see the BaseExpressionView has a textValues property where you can pass in strings. github.com/FilledStacks/expression-ui/blob/73f9fb52910b0e266c28120af3eb248aa7bcb8be/packages/expression-ui-flutter/lib/src/expression_widgets/base_expression_view.dart#L30 The key will reference the name you gave your text in rive and it'll replace that text at runtime. So you can pass in your localisation strings in that way. The same goes for the text style. We can access the style of the Rive Text from code so I'll simply do a copyWith and update the fontSize with a multiplier using the system font size.

@@FilledStacks Oh that's really nice! Do you have any insights on performance? I used rive animation more often already but sometimes when the animation should take the whole screen and especially on older devices or when there is a lot going on in the animation the performance view from flutter dev tools showed many janks and you could also feel that it got kinda laggy

@@tobidozed When was the last time you used it? I haven't seen that behaviour in the app I'm building using rive.

@@FilledStacks Just recently. We wanted to have a fullscreen animation in the background and on top normal ui. I guess all together was too much but maybe it's fine if it's just the animation. It does get worse when the animation is complex like using a skeleton for movements in rive. Also for example in the duolingo app they just introduced a new fullscreen animation when activating an xp booster treasure box and it lags on my phone (iPhone 12). Would be nice to have an example app with your approach and analyse a bit :)

@@tobidozed i see. You can check out the expression-ui example app and navigate through the onboarding. That's full screen rive files in there.

So far there's been 0 lag on any loading, I only have 7 screens, and a bunch of widgets, about 15 artboards in total and it all loads instantly. Yes, the whole file needs to be loaded. You can do multiple files for sections of your UI, especially if it gets big. I like 1 file per app, but like I said, the app is currently tiny. As far as I can tell this optimization is not needed, but if it is then Rive's pre-cache functionality should help a lot with the loading time.

Thank you! Glad you liked it.

Thank you, I appreciate that Tyler. It's a really exciting product to be working on.

Good question. We'll use the same approach Framer does. 1 Artboard per form factor. Mobile, tablet, desktop, watch. So you'll add -mobile, -tablet, -desktop at the end of your artboard name and we'll automatically select the correct one based on the current screen size. You can see a working example in this PR demo: github.com/FilledStacks/expression-ui/pull/1

I liked creating these 😁 Didn't have more ideas to share. But I might make more soon.

I'm very happy to hear that 🔥

Yeah, it's not been tried yet but it's working really well. And they're working on auto-layout functionality, which will make it even more fitting.

Good question. UI -> Business Logic -> Application Logic is always completely separated. So you're only replacing your widget code with a single widget for expessionUI. The rest of your app stays exactly the same. That means you can use whatever app management pattern you use, bloc, stacked, provider, riverpod etc. You can pass in data to update the text in an animation through the textValue properties. Everything else stays exactly the same. You'll just be replacing your ui file widget code with expression UI widgets.

@@FilledStacks , yes, that is the general principle. But, you said you want to have a widget without code. So, if you want to show progress indicator when the data is loading, list of widgets when the data is fetched or show snackbar when error is received, for example, how would you do it with this kind of widget you don't want to code? That is my question. :)

@DraskoSaric aaah, I see. I use the Rive state machine for that. All I do in code is call triggers in my viewmodel that goes to a new state. I build all the UI with widget code. Then I bund them together. So I'm saving on 90% of widget code writing, the other 10% is code that binds things together. I'll show more in videos to make it clearer how it works. It's too much to type out here.

Much appreciated! Thank you very much for letting me know you're excited about this.

RUclips knows what we're thinking 😅 ... jokes aside, I'm happy that you found this video. It's helped me a lot in my freelance career to make better pricing decisions.

yes please

It's very new so there's nothing published yet. But you can see the example app to see how it's used.

I'm happy to hear that! I think it's pretty cool too. Really enjoying working this way.