Today I Learned: golden tests are natively supported by flutter_test!
I always thought that for goldens you need to install third-party packages.
To generate goldens, you can use matchesGoldenFile API:
https://api.flutter.dev/flutter/flutter_test/matchesGoldenFile.html
I always thought that for goldens you need to install third-party packages.
To generate goldens, you can use matchesGoldenFile API:
https://api.flutter.dev/flutter/flutter_test/matchesGoldenFile.html
👍7
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
A package should do a single thing and do it well.
If the package solves state management, it should expose APIs specifically for that purpose – it should not concern itself with dependency injection or database storage.
A package that has many responsibilities likely tries to connect them under a single API, which adds more coupling and more unknowns to it. Such packages are considered red flags.
Applications built with packages that are "red flags" tend to be "red flags" in terms of maintenance/scalability/performance.
#architecture
If the package solves state management, it should expose APIs specifically for that purpose – it should not concern itself with dependency injection or database storage.
A package that has many responsibilities likely tries to connect them under a single API, which adds more coupling and more unknowns to it. Such packages are considered red flags.
Applications built with packages that are "red flags" tend to be "red flags" in terms of maintenance/scalability/performance.
#architecture
👍8💯4👎1
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❤5
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
👍16
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
👍14❤3
I updated the article about monorepos with some new information!
https://lazebny.io/dart-flutter-workspaces/
https://lazebny.io/dart-flutter-workspaces/
Michael Lazebny
Dart & Flutter Monorepos: Pub Workspaces and Melos
Simplify Dart & Flutter development with a monorepo using Pub Workspaces, reusable scripts, and release automation with Melos.
👍5
🚨 I have a few article ideas that I'm interested in:
- Creating an FFI Dart package with Rust for image upscaling using build hooks.
- Eliminating pigeons with native bindings (ffigen+jnigen).
- What you can achieve with the built-in Flutter SDK for bottom sheets. I recently worked on this in a company, so it should be helpful as bottom sheets are a complex topic.
What do you think? Share your opinions in the comments.
If you have other interesting ideas, please share as well :)
- Creating an FFI Dart package with Rust for image upscaling using build hooks.
- Eliminating pigeons with native bindings (ffigen+jnigen).
- What you can achieve with the built-in Flutter SDK for bottom sheets. I recently worked on this in a company, so it should be helpful as bottom sheets are a complex topic.
What do you think? Share your opinions in the comments.
If you have other interesting ideas, please share as well :)
❤8👍1
Mobile Tech
🚨 I have a few article ideas that I'm interested in: - Creating an FFI Dart package with Rust for image upscaling using build hooks. - Eliminating pigeons with native bindings (ffigen+jnigen). - What you can achieve with the built-in Flutter SDK for bottom…
Bottom sheet won the poll 🤣😭
So the order is like this:
- bottom sheet features/limitations
- native bindings with ffigen/jnigen
- dart package with rust [build hooks]
So the order is like this:
- bottom sheet features/limitations
- native bindings with ffigen/jnigen
- dart package with rust [build hooks]
👍10👎1
Is there anyone from Poland/Portugal looking for a Senior position with Flutter?
My team is looking for senior engineer:
https://jobs.eu.lever.co/olx/3d7022fc-54b1-4917-a956-9d981c49f815
if you’d like to know some details, please DM me
My team is looking for senior engineer:
https://jobs.eu.lever.co/olx/3d7022fc-54b1-4917-a956-9d981c49f815
if you’d like to know some details, please DM me
jobs.eu.lever.co
OLX - Senior Mobile Engineer
Join Our Team as a Senior Mobile Engineer! Join our Mobile App Platform team, working remotely from Poland or Portugal. As part of our 1,000+ tech team across multiple locations, you’ll collaborate with engineers, SREs, and product teams to build scalable…
🔥8❤2
Hey all!
There is a great 7-minute video about how Flutter merged Platform and UI threads recently. It also slightly covers jnigen!
Recommend watching for everyone!
https://www.youtube.com/watch?v=miW7vCmQwnw
There is a great 7-minute video about how Flutter merged Platform and UI threads recently. It also slightly covers jnigen!
Recommend watching for everyone!
https://www.youtube.com/watch?v=miW7vCmQwnw
YouTube
The great thread merge
Dive deep into Flutter's thread merge, a fundamental shift in its engine design aimed at enhancing native interoperability. Craig breaks down the roles of the UI and Raster threads, introduces the native platform thread, and explains how integrating Dart…
👍3🔥3