How does #Flutter draw a frame?
The process can be initiated by several sources - setState, render object, system, or engine.
When you call setState, it marks the element as dirty and asks the engine (C++) for a frame via FFI. Later, when the engine is ready, it calls the WidgetsBinding.drawFrame callback.
The drawFrame iterates through the element tree and rebuilds dirty elements. If dirty elements change their size, color, or orientation (generally something that render objects are interested in) - render objects are marked as dirty.
Then the framework performs layout and painting.
Finally, the scene (or frame) is built and sent to the painting engine.
The process can be initiated by several sources - setState, render object, system, or engine.
When you call setState, it marks the element as dirty and asks the engine (C++) for a frame via FFI. Later, when the engine is ready, it calls the WidgetsBinding.drawFrame callback.
The drawFrame iterates through the element tree and rebuilds dirty elements. If dirty elements change their size, color, or orientation (generally something that render objects are interested in) - render objects are marked as dirty.
Then the framework performs layout and painting.
Finally, the scene (or frame) is built and sent to the painting engine.
🔥3👍2
Enhancing Image Rendering Efficiency
Handling large images often leads to excessive consumption of device memory. To tackle this issue, DevTools offers valuable insights into identifying images that are too large.
To optimize, consider setting 'cacheWidth' or 'cacheHeight' properties on your images. This approach decodes and stores images in memory at a designated size.
There is also a ResizeImage class in the SDK that can be used to resize the image.
See how the GSkinner team utilized AppImage in the Wonderous project, offering a real-world example of these techniques in action - https://buff.ly/46sE71y
#FlutterDev #Flutter #Performance
Handling large images often leads to excessive consumption of device memory. To tackle this issue, DevTools offers valuable insights into identifying images that are too large.
To optimize, consider setting 'cacheWidth' or 'cacheHeight' properties on your images. This approach decodes and stores images in memory at a designated size.
There is also a ResizeImage class in the SDK that can be used to resize the image.
See how the GSkinner team utilized AppImage in the Wonderous project, offering a real-world example of these techniques in action - https://buff.ly/46sE71y
#FlutterDev #Flutter #Performance
👍9
Media is too big
VIEW IN TELEGRAM
Use extent to optimize scrolling
If all elements have the same length along their main axis, it is recommended to set the
#Flutter #Performance
If all elements have the same length along their main axis, it is recommended to set the
extent or utilize prototypeItem. This will prevent the scrolling engine from laying out these widgets.#Flutter #Performance
👍8🔥4
formsf.png
648 KB
Implemented extremely simple forms for #Flutter that support asynchronous validators 👀
👍7🔥4
A while ago compute function from flutter SDK has moved to dart.
Incredibly easy and efficient way to process something in a different thread.
https://youtu.be/PPwJ75vqP_s?si=bqjge122nwFCBkIw
Incredibly easy and efficient way to process something in a different thread.
https://youtu.be/PPwJ75vqP_s?si=bqjge122nwFCBkIw
YouTube
Isolates (Technique of the Week)
If your Flutter app has jank due to a heavy computation, use Isolate.run() to move that computation to a new isolate.
Isolate class → https://goo.gle/3vvBKi4
Use isolates in your Flutter app → https://goo.gle/43DiXxL
Article about Isolate.run → https…
Isolate class → https://goo.gle/3vvBKi4
Use isolates in your Flutter app → https://goo.gle/43DiXxL
Article about Isolate.run → https…
🔥7👍6🎉2
Screen Recording 2024-05-18 at 20.43.37.mov
3.3 MB
In the meantime, I have created a custom popup that positions follower widget relatively to a target and prevents it from overflowing the screen.
#flutter
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍3
Avoid these dart libraries. Briefly about their drawbacks and better alternatives.
https://lazebny.io/avoid-these-dart-libraries/
#flutter #flutterdev #dart
https://lazebny.io/avoid-these-dart-libraries/
#flutter #flutterdev #dart
Michael Lazebny
Avoid These Dart Libraries
This article lists popular Dart and Flutter libraries that are not recommended, including Riverpod, Get, Get_it, Hive, and Stacked.
👍15🔥6🤔4👏2👌1💯1
Tomorrow, I'm launching a new article series on creating UI Kits.
I’ll guide you through developing various components like buttons, text fields, and more.
You’ll also learn about animations, transitions, iconography, responsive design tools, and best practices for layouts and custom components.
#article #uikit #flutter
I’ll guide you through developing various components like buttons, text fields, and more.
You’ll also learn about animations, transitions, iconography, responsive design tools, and best practices for layouts and custom components.
#article #uikit #flutter
7❤22👍7🔥7
Navigation in Flutter
A bit of theory and my thoughts and tips on how the navigation should be implemented.
https://lazebny.io/navigation-in-flutter
#flutter #navigation
A bit of theory and my thoughts and tips on how the navigation should be implemented.
https://lazebny.io/navigation-in-flutter
#flutter #navigation
Michael Lazebny
Navigation in Flutter
Learn Flutter navigation with insights on Navigator, Router, and tips for seamless setup using go_router. Includes some theory and expert advice.
👍8🔥3❤2
Learn how to build efficient sticky headers in Flutter using slivers for seamless scrolling. Includes code examples and best practices!
https://lazebny.io/sticky-headers
#flutter #article
https://lazebny.io/sticky-headers
#flutter #article
Michael Lazebny
Sticky headers in Flutter
Learn how to build efficient sticky headers in Flutter using slivers for seamless scrolling. Includes code examples and best practices!
👍9🔥3
Modern Monorepo management in Dart and Flutter
https://lazebny.io/modern-monorepo-management
#dart #flutter #flutterdev
https://lazebny.io/modern-monorepo-management
#dart #flutter #flutterdev
Michael Lazebny
Modern Monorepo Management with Pub Workspaces and Melos in Dart
Efficiently manage Flutter/Dart monorepos using Pub Workspaces and Melos, with examples for dependency management and workflow automation.
👍6☃1❤🔥1
Learn how scroll works in Flutter, the differences between scroll widgets, and how to build efficient layouts using slivers for best performance.
https://lazebny.io/flutter-slivers
#article #flutter #slivers
https://lazebny.io/flutter-slivers
#article #flutter #slivers
Michael Lazebny
Flutter Slivers: How Scrolling Works
Learn how scroll works in Flutter, the differences between scroll widgets, and how to build efficient layouts using slivers for best performance.
🔥8❤2👎1
I created a simple but much more powerful alternative to Widgetbook, Storybook, and similar tools.
It automatically generates routes for GoRouter (supports deep links).
It also makes it very easy to create configurations, fields, etc., for customizing widgets.
This is just an example—it will be improved over time and might eventually be added to sizzle starter or a separate package.
Github Link
#flutter
It automatically generates routes for GoRouter (supports deep links).
It also makes it very easy to create configurations, fields, etc., for customizing widgets.
This is just an example—it will be improved over time and might eventually be added to sizzle starter or a separate package.
Github Link
#flutter
👍11🥰4🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Created a minimal example of custom AppBars using SliverPersistentHeaderDelegate.Take a look here https://github.com/hawkkiller/pageheader/blob/main/lib/page_header.dart
#flutter #flutterdev
#flutter #flutterdev
👍13❤🔥2🔥2
If you want to make your VS Code indentation a bit more beautiful for #Flutter widgets, set "dart.previewFlutterUiGuides" to true
If I'm not mistaken, the same thing exists in IDEA :)
If I'm not mistaken, the same thing exists in IDEA :)
❤11👍4