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
When updating dependencies in a Pub Workspace, use "dart pub upgrade," which automatically resolves to the correct version and updates it in every package.
#flutter #FlutterDev #dart #tip
#flutter #FlutterDev #dart #tip
π6
This media is not supported in your browser
VIEW IN TELEGRAM
I created a Shimmer animation in Flutter in 100 lines without libraries.
It is performant and minimizes rebuilds, based on a CustomPaint, a LinearGradient, and a Transform.
https://gist.github.com/hawkkiller/2ed40b43d6372fc322080e0c8ce76521
#dart #flutter #flutterdev
It is performant and minimizes rebuilds, based on a CustomPaint, a LinearGradient, and a Transform.
https://gist.github.com/hawkkiller/2ed40b43d6372fc322080e0c8ce76521
#dart #flutter #flutterdev
π20
Don't use SVGs for Icons in Flutter. There are better and more performant ways.
Rendering SVG requires several time-consuming operations: reading from memory, parsing the SVG to a binary format, parsing the binary format to Dart structures, and only then rendering.
Instead, opt for icon fonts, similar to the Icons class in Flutter. A Flutter engine processes all the fonts during startup and makes them available throughout the whole app lifecycle. The performance of rendering an icon font is the same as rendering text.
#dart #flutter #flutterdev
Rendering SVG requires several time-consuming operations: reading from memory, parsing the SVG to a binary format, parsing the binary format to Dart structures, and only then rendering.
Instead, opt for icon fonts, similar to the Icons class in Flutter. A Flutter engine processes all the fonts during startup and makes them available throughout the whole app lifecycle. The performance of rendering an icon font is the same as rendering text.
#dart #flutter #flutterdev
π6π₯3π1
Mobile Tech
Don't use SVGs for Icons in Flutter. There are better and more performant ways. Rendering SVG requires several time-consuming operations: reading from memory, parsing the SVG to a binary format, parsing the binary format to Dart structures, and only thenβ¦
I have created SVG vs Iconfont Performance Benchmark
It tracks the rasterization, which is the process of rendering UI objects as pixels on the screen.
The icon font is much better on the GPU thread. SVG's complexity leads to expensive rasterization, which easily overwhelms the GPU and causes stutters.
You can check the full benchmark here https://github.com/hawkkiller/svg_iconfont_benchmark
Note that I tested on my MacBook, which is extremely performant. Testing on a low-end Android device may provide even more insights.
I also tried to add some readmes for better understanding.
#flutter #flutterdev
It tracks the rasterization, which is the process of rendering UI objects as pixels on the screen.
The icon font is much better on the GPU thread. SVG's complexity leads to expensive rasterization, which easily overwhelms the GPU and causes stutters.
You can check the full benchmark here https://github.com/hawkkiller/svg_iconfont_benchmark
Note that I tested on my MacBook, which is extremely performant. Testing on a low-end Android device may provide even more insights.
I also tried to add some readmes for better understanding.
#flutter #flutterdev
π₯9π5
There is an easy way to speed up Flutter tests in CI.
If you have a large test suite, use sharding. It distributes the number of tests between multiple shards, so you can create multiple parallel jobs in CI.
#flutter #FlutterDev
If you have a large test suite, use sharding. It distributes the number of tests between multiple shards, so you can create multiple parallel jobs in CI.
#flutter #FlutterDev
π8π1
Do not hardcode paths to assets; use the path generator!
The generator ensures that assets exist and removes the possibility of a typo.
Explore what fits your needs, but I would recommend flutter_gen/spider.
#flutter #flutterdev
The generator ensures that assets exist and removes the possibility of a typo.
Explore what fits your needs, but I would recommend flutter_gen/spider.
#flutter #flutterdev
π8β€4
It is better to wait before updating Flutter to the latest stable version.
After a new stable, there are usually multiple fixes published β 3.32 had 8 patches!
I recommend staying 1 stable version behind the latest release. This ensures that you won't be affected by regressions and new bugs.
#flutter #flutterdev
After a new stable, there are usually multiple fixes published β 3.32 had 8 patches!
I recommend staying 1 stable version behind the latest release. This ensures that you won't be affected by regressions and new bugs.
#flutter #flutterdev
π15
Is your layout ready for RTL languages?
A common mistake is using a fixed left/right EdgeInsets or Alignment.
Instead, use their directional counterparts. They provide logical start and end properties, allowing the UI to adapt automatically.
#flutter #flutterdev
A common mistake is using a fixed left/right EdgeInsets or Alignment.
Instead, use their directional counterparts. They provide logical start and end properties, allowing the UI to adapt automatically.
#flutter #flutterdev
π11β€2