This week in Flutter #8
Tags: dart, flutter, news
Published: 2021-06-19 09:12:58

Ever since I first watched [this video](<https://www.youtube.com/watch?v=UZBjt04y4Oo>) from the [Inkdrop](<https://www.inkdrop.app>) developer [Takuya Matsuyama](<https://www.craftz.dog>), I wanted to try **vim for Flutter**. [Robert Brunhage]
(<https://robertbrunhage.com/>) published a [video on the topic](<https://robertbrunhage.com/videos/how-to-setup-vim-for-flutter>), but I still have to find the right **motivation** (and **time**) to give it a try. If you have suggestions, comments, or even if you think I **should not do it**, please let me know.

<small>- Michele Volpato</small>

## 🧑‍💻 Development

### [Create a Simple Responsive GridView with Flutter](<https://blog.albertobonacina.com/create-a-simple-responsive-gridview-with-flutter>)

[Alberto Bonacina](<https://hashnode.com/@polilluminato>) shows us how to use [`flutter_staggered_grid_view`](<https://pub.dev/packages/flutter_staggered_grid_view>) to create a **responsive grid of widgets**, with an explanation of how the layout works.

---

### [Flutter Face Detection Using Firebase ML Kit](<https://rrtutors.com/tutorials/flutter-face-recognition-example>)

I have never used [Firebase ML](<https://firebase.google.com/products/ml>) in an app. Apparently, it is quite simple. Follow this tutorial to implement **face recognition** in your app.

---

### [Flutter Package Preview: shared\_preferences](<https://dev.to/carlmobiledev/flutter-package-preview-sharedpreferences-4kc1>)

[Carl Wills](<https://github.com/carlMobileDev>) is back with another **introductory article** to well-known Flutter packages. This time its [`shared_preferences`](<https://pub.dev/packages/shared_preferences>).

---

### [Flutter GetX Example – Category Selection](<https://bartvwezel.nl/flutter/flutter-getx-example-category-selection/>)

[Bart van Wezel](<https://twitter.com/bartvwezel>) is also back in this newsletter with an article about how to get started with [GetX](<https://pub.dev/packages/get>). There are so **many state management packages** for Flutter, I suggest you **pick one** and use that in all your projects. But it is good to know what's available out there, in case you find a package that works better for you.

---

### [Dart Basics](<https://www.raywenderlich.com/22685966-dart-basics>)

A new article by the raywenderlich.com team, about Dart, updated to the recent **sound null safety feature**.

---

### [Flutter Drag and Drop – State Management](<https://bartvwezel.nl/flutter/flutter-drag-and-drop-state-management/>)

[Bart van Wezel](<https://twitter.com/bartvwezel>) is back (again) with an article about **integrating drag and drop** with [Riverpod](<https://pub.dev/packages/riverpod>). There is a lot of code in this tutorial, and also a common questions section at the end.

---

### [Dependency Injection with Flutter](<https://dev.to/devtronic/dependency-injection-with-flutter-54pl>)

**Dependency injection** is a well-known technique to achieve separation of concerns, make your code **reusable**, and **testable**. In Dart/Flutter you can apply it by architecting your code around it from the start (my preferred way), or you can use [`catalyst`](<https://pub.dev/packages/catalyst>) for Dart and `<a href="https://pub.dev/packages/flutter_catalyst">flutter_catalyst</a>` for Flutter. [Julian Finkler](<https://github.com/devtronic>), the developer behind those packages, created a new package to make the process of using them **easier**. From the repository of `<a href="https://pub.dev/packages/catalyst_builder">catalyst_builder</a>`:

> Catalyst Builder is a dependency injection provider builder for both, Dart and Flutter. It's easy to use and dependency injection is almost done automatically. You only have to decorate your services with @Service and the build\_runner will create a service provider for you.

---

## 🗄 Backend

### [Loading Cloud Storage Images in a Flutter Web App](<https://touchwonders.com/en/blog/loading-cloud-storage-images-in-a-flutter-web-app>)

Recently we adapted a Flutter mobile app we built for a client to the web. The app uses Firebase to host many images. In the mobile version, we **cache** the **images** in a folder on the device, using `<a href="https://pub.dev/packages/path_provider">path_provider</a>`, but on the **web,** this is not possible. My colleague [Toine Heuvelmans](<https://github.com/toineheuvelmans>) explains in this article how we used [**hive**](<https://pub.dev/packages/hive>) and **[CORS](<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS>) configurations** to achieve image **caching on the web**.

---

## 🤷‍♂️ Others

### [A Year as a Flutter Developer](<https://alistair.hashnode.dev/a-year-as-a-flutter-developer>)

Do you want to read the **journey of a Flutter developer**, from **learning** to getting their first **full-time contract**? [Alistair Holmes](<https://github.com/alistairholmes>), co-organizer of [Flutter Zimbabwe](<https://twitter.com/flutterzimbabwe>), shares how he learned Flutter, shared his work, and got a full-time contract (and then a Lead Mobile Dev position) in less than a year. Kudos!

---

### [10 Best Visual Studio Code Extensions for Flutter Development](<https://www.syncfusion.com/blogs/post/10-best-visual-studio-code-extensions-for-flutter-development.aspx>)

I do not know if these are actually the **best** extentions for Flutter development, but for sure they are useful. Suresh Mohan not only lists them, but he also shows **how they work** in this article.

---

### [Improving Platform Channel Performance in Flutter](<https://medium.com/flutter/improving-platform-channel-performance-in-flutter-e5b4e5df04af>)

The Flutter team has recently **improved performance** in communication between the **Flutter framework** and the **host platform**. In this article, they explain (in detail - you are warned) how they achieved that. Happy reading.