Hey man, don't know if you still reply here, but I'm getting an error. Flutter now requires me to add destinations:[], to the home_view.dart file for the body: Column(children: <Widget>[NavigationBar()],) part. Now its causing an Assertion failed: destinations.length>=2 is not true. How do I fix this?
Thanks for video ❤, i have question , do we need to write all apis code in a single service class ‘ApiService’? And then call them according to their viewModel?
Totally agree with that. Adoption is not the goal for us at the moment. It's to create a tool that we use internally to speed up our process. When it becomes more popular the maintenance increases, and since we pay for all development it's very exepensive in terms of time (and money) to keep up with things like documentation, etc.
00:02 Building TikTok's UI using Flutter 02:09 Refactoring middle and bottom sections into separate widgets 04:19 Creating a row with evenly spaced children and organizing code in a widgets folder 06:26 Creating social actions toolbar with icons and titles 08:43 Adjusting UI and Theme in Flutter 10:54 Organizing constants for easy reference and sharing. 13:16 Implementing UI for TikTok's plus icon and music player action. 15:20 Creating TikTok's UI components in Flutter. 17:30 Setting up containers and centering widgets
Hey, Can you please create a video on memory management in flutter? If you don't have much time for creating video can you please create a short even. please.
Would still argue not to use Flutter for web apps, worked at a place where they have Flutter for mobile and web, so one code base. However, the web version lacks so much functionality due to having to support the mobile. Just to get the web app to run takes 1/2 minutes, hot reload hardly works due to its size. IMO, I would either go with NextJS or Angular for frontend and leave Flutter for mobile and that's as far as I would take it.
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"
Hey Dane this looks really cool. Amazing work I'm really interested in where this ends up. I just have a few questions: - How can you have animations with that depend on user input like scrolling, swiping, etc... - Can you control animations, like resetting them or moving them forward x amount, etc... - How does this work with different screen sizes? - How does this work with Text? What about translations?
@@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.
what if my code if for mobile and web, do i make a seprate branch for mobile and do its navigation differently or use same navigation for both mobile and web.
@@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.
This was super helpful. Question: How do you identify the indices of the item that are currently visible? I want to fire off an event tracker when a particular item is currently visible on the screen on a long list of scrollable items. Is this even possible?
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.
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.
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.
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.
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/
I love the idea , thank you for taking the initiative and starting the project. I may become a contributor in near future , because I see myself using it for my next projects .
How would you manage localisations if the texts are inserted by rive? Also with this approach texts won't resize to the system font size of the users device right?
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
@@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 :)
How's load performance? You seem to have all screens in one big Rive file. Does this whole file need to be loaded into memory meaning future screens that are not relevant for the current screen will also be loaded? Or is it possible to have multiple Rive files and load e.g onboarding.rive then main_pages.rive etc? Or is this optimization not needed.
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.
Even though I like the idea but I have some concerns regarding responsiveness (not adaptability). For mobile screens how do you handle different width for example? Usually you don't want everything to scale the same.
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