Flutter Force Weekly
Your hub for all things Flutter! Discover codes, repos, libraries, projects, and articles. Let's build amazing apps together!
Hey everyone, exciting news! We've given our Flutter resource a makeover – say hello to Flutter Force! 🚀 We're stoked to share our fresh look, updated platforms, and snazzy new logo with you all. As your go-to spot for all things Flutter, we're here to dish out the latest codes, repositories, libraries, projects, and articles to supercharge your app development game. So, buckle up and join us on this journey as we dive into the world of Flutter. Let's team up and craft some seriously awesome apps together! 🎉
Articles
Making Flutter apps look more native.
Part 1: tap effects
By default, if you are using InkWells to handle tap events in your UI, a ripple effect will be applied. The issue here is that while the ripple effect is an essential part of Android design, it seems somewhat out of place in the iOS world.
Instead, it’s more common for buttons to simply fade out the content. Let’s see how we can implement in Flutter
Part 2: refresh indicators
Android and iOS have different refreshing logic. On iOS it is common to drag the content downward to trigger a refresh, while on Android the content stays at the same place and the indicator is drawn on a separate layer on top of it, making it possible to scroll the content and still see the indicator.
Flutter has both implementations, but they work differently. IOS implementation is based on Slivers, while on Android it’s as simple as wrapping the content in a RefreshIndicator widget.
Integrating Flutter with WatchOS: Transmitting Workout Data Seamlessly
In the realm of cross-platform app development, Flutter has emerged as a powerful tool for crafting stunning interfaces and seamless experiences across multiple platforms. Combining the flexibility of Flutter with the health-tracking capabilities of WatchOS opens up a world of possibilities for developers alike. In this blog, we’ll delve into the integration of Flutter with WatchOS, focusing specifically on transmitting workout data. We’ll explore the steps to achieve this integration.
Building a (Mini) 3D Flutter Game Engine - Part 1
If you've been following me at all, you might know that I've been working on flutter_filament for some time now, a package that enables cross-platform 3D rendering in Flutter apps with the Filament Physically Based Rendering library.
Flutter Vignettes updated to Dart 3.x
We’re happy to announce that the Flutter Vignettes have been updated to Dart 3.x and Flutter 3.19! This will allow developers to more easily build the Vignettes and port the relevant source code to their own projects.
How to Host Flutter Web Apps for Free
Flutter Web is a great tool for creating websites and web applications. Even better with the use of Firebase, you can host your Flutter web apps for free. In this post, we will go over the necessary steps needed to host an existing Flutter application on the web.
Image Carousel Sliders in Flutter
Carousel sliders are popular user interface components that allow you to display a list of items in a scrollable, horizontal, or vertical format. These can be used to showcase images, products, or any other content. In this post, you will learn how to implement image carousel sliders in Flutter.
Examples
Fantastic Assistant
Fantastic Assistant - a mobile application supporting creation and management of the games and characters in the D&D 5e system. The main work has been concerned on the creation of a mobile application that would be used as management tool by D&D players
Flutter Shaders Demo
A new Flutter project to demo Shaders
Videos
Serverpod Clean Architecture: Framework Setup (Part 1)
In this series, we'll learn a lot about Serverpod and follow clean architecture patterns and the SOLID principles in our Flutter app. We'll use bloc for state management, get_it for our service locator, and go_router for routing. This is a fairly advanced topic, but I'm doing my best to make it reasonably beginner-friendly. I hope you find this useful in your app development journey!
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.
Observable Flutter #42: Building with Serverpod, Data layer & user authentication
Watch as Craig Labenz adds some polish to the data layer in his social media app, Chirpy, then begins looking at user authentication.
Packages
Fresher: Keep Your Projects Up to Date
An invisible (means that maintenance packages are not aware of this tool) tool to help keep your multiple projects in multiple repositories up to date: automated upgrade dependencies, update links and sections in README, CONTRIBUTING, STYLEGUIDE, wiki, etc
ElResponsive
Flutter package for Responsive Layout. MediaQuery alternative that triggers rebuild only when the screen type changes, You set list of the screens for the package and the rebuild get trigges only when certain breakpoint of the screens reached instead of triggering it on every screen change (pixel by pixel)
dimensions_theme
dimensions_theme provides a theme extension to easily define and access app dimensions such as blank spaces, padding, border radius, and other dimensions within the Flutter theme.
material_color_utilities
Algorithms and utilities that power the Material Design 3 color system, including choosing theme colors from images and creating tones of colors; all in a new color space.
This is a low-level package. For developers looking to adopt Material 3 features such as dynamic color and color harmonization in their apps, please see the dynamic_color package.
skeletonizer
What are skeleton loaders?
UI skeleton loading is a technique used to enhance user experience during web or app loading. It involves displaying a simplified, static version of the user interface while the actual content is being fetched. This placeholder UI gives the illusion of instant loading and prevents users from perceiving long loading times.