<![CDATA[I should go to sleep]]>https://ishouldgotosleep.com/https://ishouldgotosleep.com/favicon.pngI should go to sleephttps://ishouldgotosleep.com/Ghost 4.1Sat, 27 Nov 2021 12:35:03 GMT60<![CDATA[This week in Flutter #31]]>https://ishouldgotosleep.com/this-week-in-flutter-31/61a119ad3e3f120001b06912Sat, 27 Nov 2021 11:22:16 GMTIt's Black Friday this week, and there are some nice sales for developers. Check some for macOS/iOS, some for web/software engineers, and some for developers and entrepreneurs.

In particular, raywenderlich.com has some nice Black Friday deals: 50% off on all books, and Pro Subscriptions + Monthly Pro Seminars. Full disclosure: I am a tech editor for raywenderlich.com, but I do not get any percentage from these offers.

- Michele Volpato

Development 🧑‍💻

In this article by Harsh Bhalala, you'll learn how to set up dynamic links to be able to share content between two users of your Flutter app, regardless of their platform. With a link generated from the app, another user will be able to reach the same content on their device, even if they are on a different platform, and even if they do not have the app installed yet.

🔗 Native Animated Splash Screen with Lottie in Flutter

I always tell myself to have a look at the integration between Flutter and Lottie, but  it is always pushed down my prioritised list. In the meanwhile, I can read tutorials like this one, by Türker Gürel.

🔗 Flutter Web vs HTML, CSS & JS: Performance Comparison

I already gave my opinion about using Flutter for a marketing website in this newsletter. Andrea Bizzotto even implemented the home page of his website in Flutter and compared, using numbers, the two. The result is not a surprise, but now you know what link to send to your colleague when they hint to make the company website using Flutter.

In this article by Ishan Fernando, you'll learn how to implement an image carousel from scratch. They also provide sample code if you want to use carousel_slider instead of implementing everything by yourself.

🔗 Understanding RenderObjects in Flutter

This is an interesting article, by David Adegoke, that explains what happens behind the scenes when Flutter renders. A must-read.

🔗 How to create a Flutter GridView with content-sized items

Sometimes the basic widgets that Flutter gives us are not enough to implement the design we want. For instance, using a GridView in combination with childAspectRatio does not always end up like we would like to. Andrea Bizzotto encountered exactly this problem while working on the Flutter version of his website. How do you solve this problem? Read his article to find out.

🔗 Actions, Intents, and Shortcuts in Flutter

With Flutter for desktop getting closer to being stable, it is important to consider the keyboard as valid input in your Flutter app. How do you link shortcuts from your keyboard to real functionalities in the app? Read more in this article, by Om Londhe.

🔗 Answering The Frequently Asked Questions in Flutter Development #2

Learn some valuable tips and tricks to get your Flutter development easier, by Dhruv Nakum.

Others 🤷‍♂️

🔗 GestureDetector (Widget of the Week) 🎦

You can transform any widget into a button by using GestureDetector. Learn more in this video by Khanh Nguyen, from the Flutter team.

🔗 Another app migrated to Flutter

Read how Kirill Bubochkin managed to lead a team of developers into migrating an existing app from Android to Flutter. We are doing something similar, and this article has been a good read for me. We are taking a different approach. While Kirill wanted to first bring the Flutter app at the same level in Android, and only then concentrate on iOS, we are doing the opposite. First, we want to bring the code for the missing platform at the same level as the existing code, and only then replace the existing app with the Flutter version.

<![CDATA[This week in Flutter #30]]>https://ishouldgotosleep.com/this-week-in-flutter-30/6197e7fcefafbd00010aa12fFri, 19 Nov 2021 19:33:34 GMTDid you know that using DartPad you could easily show a running Dart code example on a web page? You can see it in action here. The Flutter team announced that now you can also add packages to your Dart code example. It is disappointing that many content creators are not using DartPad in their articles. I am gonna guess that the reason is that many of them use a platform that is absolutely not built for developers who blog. I hope that with this update, more bloggers will start using it.

The Flutter team also released a video about app monetization. You can load and display Google Ads in your Flutter app, or you can use in-app purchases or Google/Apple pay.

- Michele Volpato

Development 🧑‍💻

🔗 Flutter Canvas API: Getting Started

Learn how to create custom widgets and shapes in this awesome tutorial by Wilberforce Uwadiegwu.

🔗 Introduction to FFmpeg Kit API

FFmpeg is an open source suite of libraries that helps with handling video and audio. You can convert a file from a format to another, for instance. With ffmpeg_kit_flutter you can use it in your Flutter application. Learn how it works in this article, by Taner Sener.

🔗 Flutter: Building a custom video trimmer with stack and FFmpeg

And now that you know about FFmpeg, practice your video editing skills with this article by kibzrael.

🔗 Flutter State Management with Riverpod: The Essential Guide

I might have already linked this article written by Andrea Bizzotto, on state management with Riverpod. But Riverpod was recently promoted to 1.0.0, so Andrea updated the article. It is a good idea to read it, again.

Backend 🗄

🔗 Deploy a Dart Shelf server to Google Run

Cloud Run is a serverless execution environment that you can use to run stateless containers. When you use Cloud Run, you abstract away from infrastructure, which makes it ideal for engineers more on the dev side of DevOps. In this article by Filipe Barroso, you'll learn how to deploy a Dart server using Cloud Run.

Architecture 🏛

🔗 Flutter MVVM and Clean Architecture - Part 1

I am always looking for comprehensive Flutter architecture articles. In this one, Cassius Pacheco shows how to implement MVVM in a simple Flutter app. I am still not convinced this will be my go-to architecture paradigm.

Others 🤷‍♂️

🔗 Choosing the right gestures for your Flutter project

This is a very nice article about user experience with gestures in Flutter. No code, just examples and explanations. Go read it, really. By Murtaza Sulaihi.

🔗 ShrinkWrap vs Slivers | Decoding Flutter 🎦

Learn about nested lists in Flutter, how the shrinkWrap parameter works, and why sometimes Slivers are the best tool for the job. By the Flutter team.

<![CDATA[This week in Flutter #29]]>https://ishouldgotosleep.com/this-week-in-flutter-29/618f7dd9ac24020001aa6a50Sat, 13 Nov 2021 10:34:25 GMTThe results from the latest quarterly Flutter survey are out. They mainly asked for opinions over Flutter for web. 38% of developers worked on a web app using Flutter in the month prior to the survey. That is way more than I expected.

And I do agree that "initial page load" is one of the worst experiences in Flutter web apps.

I am also surprised to see that 36% of developers think that SEO capabilities should be improved, completely missing that a Flutter web app should not be used as a marketing website 😑.

- Michele Volpato

Development 🧑‍💻

🔗 Flutter Databases: a look at the options from sqflite to ObjectBox

Which database is best for your app? That depends on how you are going to use it and what data you are going to store. Learn more about different databases available for your Flutter project in this article by Anna Ivahnenko.

🔗 Precache Images In Flutter

In this article by Shaiq khan, you'll learn how to improve the user experience of your Flutter app by pre-caching the images that sometimes take too long to load, especially on web.

🔗 Flutter: Keyboard Shortcuts, the easy way!

I did not know it was so simple to implement keyboard shortcuts in a Flutter app. Read more in this article by Shawn Blais.

🔗 Read shared preferences from native apps

I have been thinking about the problem described in this article in the past. If you migrate your app from native to Flutter, you do want to keep the current state when a user downloads the update that migrates to Flutter. You do not want users to be logged out, or data saved in shared preferences to be lost. Marc Gerken describes how you can access the data saved in shared preferences by the native version of your app, from the Flutter version.

🔗 Flutter In-app education plugin

Interesting plugin from the team at Apparence.io. It gives you an easy way to teach your users about new features in the app, after an update.

🔗 Building my first Flutter app | Learning to fly 🎦

There is this new video series from the Flutter team, tailored to new developers starting with Flutter. In this first episode, Khanh Nguyen, a new addition to the Flutter team, explains the video series and asks what you want to see in the coming videos. So click the link and comment on the video with your expectations.

🔗 Indicate Website Loading for Flutter Web Apps 🤖

I can definitely use this article by Paras Jain. The initial loading time of the web apps I am working on does not make me happy at all.

Backend 🗄

🔗 Flutter Tutorial: How to use the Firebase Local Emulator with Cloud Functions

Are you learning how to integrate Firebase in your Flutter app? It is a good idea to use emulators while developing. It will save you time and money. Read how to use the Cloud Functions emulator while working on your Flutter app in this article by Andrea Bizzotto.

Others 🤷‍♂️

🔗 CachedNetworkImage (Package of the Week) 🎦

Aren't you tired of downloading the same image over and over again? In this episode of Widget of the Week, you'll learn how to cache an image in your Flutter app, so that you download it only once and it works every time.

<![CDATA[This week in Flutter #28]]>https://ishouldgotosleep.com/this-week-in-flutter-28/6183d0bf80ce500001783620Fri, 05 Nov 2021 12:19:01 GMTThis week the Flutter team pushed Flutter developers to help improve the project. How can you help improve Flutter? The easiest way is to give your opinion via a survey.

Another way is to contribute to the project. You can do that by either improving the code, fixing a bug, or writing (better) documentation.

Have a look at those links: all contributions are welcomed.

- Michele Volpato

Development 🧑‍💻

🔗 Creating “.dmg” file for Flutter macOS Apps💻

Desktop support in Flutter is closer to being fully moved to the stable channel. When that is done, you will need a way to create a dmg file to share with your user. You can follow this tutorial by Paras Jain.

🔗 Running Flutter Integration Test in the Cloud 🎦

Majid Hajian gave a talk at the Firebase Global Summit on writing efficient Flutter integration tests, and running them on Firebase test lab for both Android and iOS. He shares tips and tricks to manage your code and tests and leverage performance result in your CD/CI and deployment pipeline.

🔗 Wireless debugging Flutter application on Github Codespaces

One of the workflows I would love to try in the future is remote development. Using my iPad to connect to a remote machine and code on that machine. GitHub Codespaces can help with that. But how do you debug a Flutter application on your device while using Codespaces? Read this article by ralphilius to find out.

🔗 How to use custom fonts in Flutter

Fonts are often overlooked during the design process of an app, but they can change the overall feeling your app gives. In this article by Shubham Soni you'll learn how to add custom fonts to your Flutter application.

🔗 Learn Flutter Free

Are you just getting started with Flutter? Tomic Riedel shared a long list of resources to help you learn Flutter. All resources are free to use and a first version of the list has been reviewed by a Google developer expert.

Architecture 🏛

🔗 Using Stacked Architecture in Flutter App

I was not aware of the stacked package and the Stacked architecture. In this article by Adegoke David you'll learn the concepts behind this architecture and how to implement it in your own project. I am always curious about architecture in Flutter apps because I still haven't found the perfect approach that works for me.

🔗 Using Services in Flutter

From the same author of the article above, Adegoke David. In this article, you'll learn how to fit services in the Stacked architecture for Flutter apps. Read the previous article first.

Backend 🗄

🔗 Dart on AWS Lambda

Did you know you can write your AWS Lambda functions using Dart? Learn how in this article by Aseem Wangoo.

Tools 🛠

🔗 CLI applications made easy with Dart & dcli

As I wrote in the previous issue, I am a big fan of Makefiles. But what if you could write your scripts directly in Dart, the language you use also for your app? In this article by Olivier Revial, you'll learn how to do exactly that.

<![CDATA[This week in Flutter #27]]>https://ishouldgotosleep.com/this-week-in-flutter-27/617c532a0c172900013f2570Sat, 30 Oct 2021 11:52:36 GMTInvertase, the company bringing Firebase integration to Flutter,  is working on FlutterFire for desktop. More specifically they are adding Linux and Windows support. MacOS is already (partially) supported. The interesting part is that they are building a universal SDK using Dart, which means that they could also move the existing platforms to use the same Dart SDK, while they are now using the existing SDKs available for each platform. They can keep to code separated by using federated plugins. It is still unknown when all the different services from Firebase will be ready for desktop, but it is good to know that they are working on it. The code is open source, so, if you like, you can contribute via the official repository.

In the meanwhile, Google announced Android 12L, a version of Android that works well on larger and foldable devices. We, Flutter developers, already design our apps with larger devices in mind (right?), so I am not sure if and how this version will influence Flutter. Reading the official guide on how to migrate your app UI for Android, it looks to me that, if you designed your Flutter app for web or desktop, you do not need to do anything else. Let me know what you think.

- Michele Volpato

Development 🧑‍💻

🔗 Facebook reaction animation

This is Bảo Trương attempt to recreate the animation used in Facebook when you react to a post. It is a good exercise, with explanations of the process he went through to reverse engineer it.

🔗 Take a screenshot during Flutter integration tests

I never tried, but you can take a screenshot while testing in Flutter. Have a look at this article by Martin Jablečník to get started and let me know if you manage to add this feature in your development process.

🔗 Geolocation and geocoding in Flutter

One thing I love about Flutter is that, sometimes, complex code implementation is hidden behind the native code used in the packages you import in your project. Like in this article, by Bhavya Mishra, where the boilerplate code is hidden in the implementation of the location package.

🔗 Explore AbsorbPointer In Flutter

Let's say you want to temporarily disable all controls in a widget. For instance, you have a settings screen with an "enable settings" toggle at the top. You can rebuild the subtree by passing an "enabled" parameter. Or you can absorb the user input for the entire subtree! Learn how with this article, by Shaiq khan.

🔗 How to persist data in Flutter using SQLite

Sooner or later you will need to persist data in your Flutter app. One of the ways to do it is by using sqflite. If you are familiar with relational databases but need help to get them to work in a Flutter project, follow this article, by Vijit Ail.

Architecture 🏛

🔗 Flutter Redux: Complete tutorial with examples

Redux is a state container for apps written in JavaScript. The idea behind Redux can be applied to apps written in any programming language. For instance, Damilare Jolayemi wrote a nice tutorial to apply it to Flutter apps. Should you use it in your apps? If you moved from JavaScript to Flutter, and you already have experience with it, then you can easily use your existing knowledge. Otherwise, I would prefer a more minimalistic approach.

Backend 🗄

🔗 Learning how to use AWS Amplify in Flutter

I already linked articles about Amplify in previous issues of this newsletter. But this one, by Himanshu Sharma, is on another level. Mute your phone and desktop notifications, and learn how to get started with Amplify and with your Flutter project.

Tools 🛠

🔗 Using derry to manage scripts on your Flutter project

I am a big fan of Makefiles. I use them extensively in my Flutter projects. Another approach is using derry, like in this article by Rodrigo Bastos. You can also achieve the same by using grinder, although it is a bit more complicated.

🔗 Code Generation In Flutter

Learn more about code generation for Flutter apps in this article, by Dhruv Nakum. Often, when you follow a tutorial, the author just shows you how to automatically generate code for your app. Dhruv also explains why code generation is helpful and when you should avoid it, instead.  

Others 🤷‍♂️

🔗 Theme (Flutter Hallowidget of the Week)

In this episode of Widget of the Week, Craig Labenz introduces you to the Theme widget. Normally, I wouldn't link this episode, because of how general and easy the subject is. But the Flutter team made a special episode for Halloween. Spooky!

<![CDATA[This week in Flutter #26]]>https://ishouldgotosleep.com/this-week-in-flutter-26/616ef86ae625cb0001426226Sat, 23 Oct 2021 10:34:43 GMTThis week Google cut their cut for subscriptions on Android. They already reduced to 15% the fee for non-subscription purchases earlier this year. This is good news for indie developers who can make a bit more money out of their app and hopefully reinvest it in the app itself.

This week I discovered some new and old packages and projects and I thought to share them with you. Which is the idea behind this newsletter, duh!

Boxy is a package that can help you with more complex layouts in your Flutter app. For instance, it makes it easier to layout children of a Column such that they have the same width as the largest child.

Dashboy is a Gameboy emulator. Its development is in a very early stage and some features are still missing.

Snap Scroll Physics adds a snap behavior to scroll views. See the example in the repository to learn when they are useful.

Flash provides easily customizable messages and alerts for your Flutter app. In the sample project, there are a lot of examples of how you can use this package.

- Michele Volpato

Development 🧑‍💻

🔗 Two-way communication between a WebView and a web page

I have been working with web views inside Flutter apps for some time already, and my suggestion to you all is to avoid them if it is possible. This is not a Flutter-specific topic, I would avoid them also for native mobile projects. But if you must use them, then you should know how to use JavaScript to pass data between the app and the web page, without the necessity to reload. Ioannis Diamantidis tells you how.

🔗 Handling gestures in Flutter

Gestures are one of the basic functionalities of all mobile apps. You need gestures to interact with the app via the touchscreen. In Flutter, gestures are so deeply intertwined with widgets that you do not even realize you are using them, for instance when you code the onPressed parameter of a button. In this article by Ivy Walobwa, you'll learn all about gestures in Flutter, in case you need to use them outside of a standard widget.

🔗 Flutter TabBar Tutorial: How to Navigate Programmatically Between Tabs

How do you navigate programmatically between tabs in Flutter? Learn it with this article by Andrea Bizzotto.

🔗 Giving superpowers to generics

This is a nice reading from Kilian Schulte. It will give you a headache, but this is so different from the usual articles. In Dart, can you decompose a generic type into its components? And how? To get the answer, read the article and get your deserved headache.

🔗 Flutter Slider widgets: A deep dive with examples

In this article by Souvik Biswas, you'll learn everything there is to know about sliders in Flutter. At the end of the article, you'll also see how to create your own slider using custom painters. I worked on a custom slider a couple of years ago, ad that time this article would have helped me a lot.

🔗 Building Games in Flutter with Flame: Getting Started

As I said in the previous issue, "the best way to learn is to make a game out of it". In this tutorial, written by Vincenzo Guzzi, you'll learn how to use Flame to create a game in Flutter. The example used in the article is a cute early Pokemon-like game.

Backend 🗄

🔗 Cloud Functions with Dart and Appwrite

If you use Appwrite as your backend system, you will be happy to know that you do not need to know JavaScript or TypeScript to write backend code. You can use Dart as the programming language for your backend functions. In a world where JavaScript enthusiasts try to fit their favorite programming language everywhere, it is nice to see a different trend. Learn more about using Dart for backend functions in this article by Nehansh Jain.

🔗 Building a Social Media App with AWS Amplify and Flutter

Rosius Ndimofor wrote a four-part series of articles on creating a full app using Flutter and Amplify. It's a good starting point if you want to learn how to use Amplify as a backend for your Flutter app. Go give them a thump-up.

Tools 🛠

🔗 How to configure a pre-commit for a flutter application

You use linters and code analyzers before pushing your code to the repository, right? You spend time making sure that the code you write follows the coding guidelines of your company, both manually and by using automated tools. Then Friday comes. Your colleagues are waiting for you to go get a drink and you still need to commit your latest changes, so you quickly run git commit -am 'fixed nasty bug' && git push and you can finally leave.

Not so fast: you forgot to format the code, analyze it, and regression test it. Avoid this dreadful situation by configuring pre-commits with this article by Kevin Gamboa.

🔗 Nowa: a free platform to build Flutter apps without writing code

I am not a big fan of low-code/no-code platforms: they make managers think they can easily create an app, but when something does not work, it's the developer's responsibility to fix it. Nevertheless, they are great for prototyping, or as a starting point for a real project. Nowa is the new kid on the block. You can sign up for early access to test it out.

Others 🤷‍♂️

🔗 Flutter Vikings

Flutter Vikings announced the next Flutter conference: 2-3 February 2022. The conference is available both online and in-person in Oslo, Norway. The list of talks is not known yet.

🔗 Dart Flash Cards

Vandad Nahavandipoor created these flashcards to help you study Dart. You can print them if you like.

<![CDATA[This week in Flutter #25]]>https://ishouldgotosleep.com/this-week-in-flutter-25/616a8deb335e45000168487dSat, 16 Oct 2021 11:16:30 GMTFlutter for desktop vs Electron. Which one performs better? Read more to get to the answer.

- Michele Volpato

Development 🧑‍💻

🔗 Mocking and Testing The File System In Dart/Flutter Unit Tests

Testing a function that creates a new file by checking if the file is present in the file system is not ideal. It can be slower than necessary, and it creates spurious files on your testing machine. Victor Eronmosele shows you how to solve these problems by mocking the file system. Clever.

🔗 Explore IntrinsicWidth In Flutter

The IntrinsicWidth widget helps when you want a child widget to size itself to a reasonable width instead of expanding infinitely. Shaiq khan explains it with examples.

🔗 Working with WebView in Flutter

In this article, Ashish Garg teaches you how to use webview_flutter to show webpages in your app. You can show the about page of your company in your app, instead of opening an external browser. Use it carefully, because it has some user experience limitations.

🔗 Integration Testing in Flutter

Start integration testing your app with this tutorial by Aseem Wangoo. He uses the integration_test package from Flutter. Read more about integration testing in Flutter.

🔗 Starting a new app from the Skeleton template (The Boring Flutter Development Show, Ep. 52)

Finally, the Boring Flutter Development Show started over with a new app, using the new skeleton template, available since the latest Flutter version. Follow Craig and Fitz while they investigate the new skeleton template, and prepare tests for the new app.

🔗 Creating a Game Like Minesweeper in Flutter

The best way to learn is to make a game out of it. And when learning programming, "make" a game out of it. In this tutorial, written by Samarth Agarwal, you'll learn how to create a game similar to Minesweeper.

Backend 🗄

🔗 Announcing Version 2.0 of the Flutter SDK for Appwrite!

The Flutter SDK for Appwrite is in version 2.0. Read in this article by Damodar Lohani what you can achieve with it.

Others 🤷‍♂️

🔗 DartUP conference

DartUP announced a new free conference on the 3rd and 4th December 2021. As usual, there are talks in English and Russian. They also upload the talks online after the event, so if you cannot attend, you can still watch the videos afterward. I like that.

🔗 macOS Performance Comparison: Flutter Desktop vs. Electron

This is an article I wanted to read for a long time. I use Electron apps. Some are user-friendly and performing well, like VS Code, some others are just very slow, and they feel "off". If you are not concerned about performance (you should), read the article anyway. It will give you some topics to talk about during the next Flutter meetup. I am impressed by the difference in the size of the final executable and the difference in memory usage. Thanks, Gordon Hayes.

🔗 Let me help you with your readme!

Are you in the market for new Dart or Flutter packages? From his own experience, Felix Blaschke tells you how to use a simple script to create better readme files for your packages, with better code examples too.

🔗 Rendering?! | Decoding Flutter

New episode of Decoding Flutter. Learn how objects are rendered in Flutter with John Ryan.

<![CDATA[This week in Flutter #24]]>https://ishouldgotosleep.com/this-week-in-flutter-24/615ec0682407210001ef55acSat, 09 Oct 2021 08:56:57 GMTThis week raywenderlich.com, in a collaboration with the Flutter team at Google, made available a new version of Flutter apprentice for free. Even if you are an experienced Flutter developer, you should have a look at the book.

In other news, Paddle is planning an alternative to Apple's In-App purchase. I am looking forward to seeing if it will work, making developers some more money.

- Michele Volpato

Development 🧑‍💻

🔗 Flutter 2.0 Button Cheat Sheet

In Flutter 2.0 the API for buttons has changed. In this article, Apoorv Wadhwa shows the new API.

🔗 Flutter Authentication and Authorization with Auth0

Majid Hajian published a series of four articles about integrating Auth0 in your Flutter app. This is a massive amount of information from a well-known Google Developer Expert. Here are parts 2, 3, and 4.

🔗 Making Flutter Web SEO friendly

We know that a web app built using Flutter is not optimized for SEO. For most developers that is not a problem, but if you want to improve SEO for your Flutter web application, read this article by Rahil Badshah.

🔗 Flutter FloatingActionButton: A complete tutorial with examples

Master FloatingActionButton in Flutter with this tutorial by Aachman Garg.

🔗 Create a piano app from scratch

Are you bored with the usual "Build a to-do list with Flutter" tutorial? Do you want to learn how to build something more interesting? In this article, Nicolas Salleron creates a piano app using Flutter. The implementation can be improved, but the idea is nice.

Design 🧑‍🎨

🔗 Flutter app with a touch of Material You colors, please

The Flutter team announced that they started to support Material You, but it is not clear what they did exactly. I hope to see more about this from the team in the future. In the meanwhile, read this article to learn how to use a color palette provided by an Android system call, published by Alexander.

Backend 🗄

🔗 Building Full Stack Serverless Application With Amplify, Flutter, GraphQL, AWS CDK, and Typescript

I usually write about Firebase in the backend section of this newsletter, but many other backend services play well with mobile application. One of them is Amazon Amplify. In this series of tutorials, Rosius Ndimofor teaches you how to implement a small app using an entire full stack of technologies, including Amplify, from writing the APIs, to expose them, to implementing the frontend code using Flutter. Here are part 2, part 3, and part 4.

Tools 🛠

🔗 🔁 asdf Flutter version manager (macOS/ Linux)

I wrote about Flutter Version Manager in issue #19. In this article, Elian Ortega explains how to use asdf, a more general tool version manager, to keep multiple versions of Flutter on your machine.

Others 🤷‍♂️

🔗 The Zen of CI

I am an advocate for continuous integration in software development. This story by Chris Swan is a perfect example of how it can help speed up development and decision-making.

<![CDATA[This week in Flutter #23]]>https://ishouldgotosleep.com/this-week-in-flutter-23/61576756aa6e5f00019180b7Sat, 02 Oct 2021 09:18:02 GMTIs Flutter ready for web apps? Is Dart ready for backend code? Find out in this issue who is using both in a production app and what they think about them.

- Michele Volpato

Development 🧑‍💻

🔗 Building a production ready Flutter Web App

Many people claim that Flutter for web is not good enough for a production web app. While I agree to some degree, I also know that with the right project and the right team, a performing and engaging Flutter web app can be made. This is exactly what the guys at Dropzone did. Read from the founder Matias Meno about their experience with Flutter for web in production.

🔗 How to use google_ml_kit package in flutter for text recognition

You've already read about Firebase ML in a previous issue of this newsletter. But how do you use Google ML in your Flutter app? Read this article, by Aaqil Shihab.

🔗 Flutter web app for newsletter sign up using Firebase functions

Neha M published a tutorial about using Flutter for web and Firebase to create a newsletter signup form. It is a simple tutorial but it has everything you need to learn how to combine the two technologies.

🔗 Explore BlockSemantics In Flutter

Most apps you write should have accessibility in mind. All users should be able to experience your app regardless of their disabilities. One way to ensure that is by using semantics for the widgets that compose your app. Shaiq khan shows you how to use BlockSemantics to hide widgets from accessibility tools so that when a dialog is shown, the accessibility tool is not able to interact with widgets behind it.

🔗 Building a 2D game with Flutter

Learn how to create a simple version of the Pong game in Flutter, with this tutorial by Chinedu Imoh.

🔗 Flutter TextField validation made easy with TextEditingController and AnimatedBuilder

You don't need a Form, a TextFormField, and a GlobalKey to show an error and enable/disable a button on the validation of a text field. You can use TextEditingController, as Andrea Bizzotto did in this article.

🔗 Animation In Flutter: Animation Class, Tween & CurvedAnimation

Learn more about animations in this article by Dhruv Nakum.

🔗 Flutter styling explained in CSS

I am not an expert in HTML and CSS, but this way of explaining Flutter layout and UI styling by Manolo Edge can be very helpful to those who are learning Flutter and has a CSS background.

Design 🧑‍🎨

🔗 Demystifying application alerts and why you should build your own Alert component

Quan Nguyen talks about alerts in Flutter, what they are, and how to use them. This is just an overview of the concept, no code, just theory you should know before designing/implementing them.

🔗 Supernova: a design system platform

Mariam Hasnany from the Flutter team publishes an interview with Supernova’s CEO Jiří Třečák and CTO Artem Ufimtcev about their design system platform built with and for Flutter. I find interesting their opinion about the CanvasKit renderer.

Tools 🛠

🔗 How to Safely Build Assigned Flutter App with GitHub Actions

A couple of weeks ago I linked an article about automated unit testing with GitHub actions. This article, by Wendreo Fernandes, provides a more complete explanation.

Backend 🗄

🔗 Writing server side Dart code

Are you interest in server-side Dart? I am. In the past, I looked into server-side Swift, but at the time there was no async/await. The next time I need to write some simple server code, I will certainly look into Dart. At Dropzone they not only used Flutter for the frontend application (see the first link in this newsletter) they also used Dart for the backend part. Matias Meno shares the experience they had with server-side Dart.

<![CDATA[This week in Flutter #22]]>https://ishouldgotosleep.com/this-week-in-flutter-22/6148e3d6164be80001739242Fri, 24 Sep 2021 16:03:54 GMTGeekle is organizing the second Flutter Global Summit after they delivered the first one in July this year. As usual, they have a free junior track and a senior track with "deep tech content". Did you attend the first event? How was it? I would love to know your opinion.

Remember that you can always find free meetups about Flutter in your area. I was at one of them in the Netherlands yesterday and I met new Flutter developers who helped me with a problem I was having in one of my apps.

- Michele Volpato

Development 🧑‍💻

🔗 Glassmorphism in Flutter

I did not know that glassmorphism was one of the trends of 2021. I was still stuck with neumorphism. Look how easy it is to implement in this article by Felipe Santos.

🔗 Art with Dart 🎯

If you do not have your own plushy Dash, you can create a digital version by following this funny tutorial by Yash Paneliya. And if you want a more minimalistic one, Vandad Nahavandipoor also created his own Dash from scratch.

🔗 Flutter and AdMob: A blog around monetizing your Flutter app with AdMob

There are different ways to monetize with your Flutter app. You can make users pay to download it, you can have in-app purchase plans, you can let users subscribe using recurring payments to use all the features, or you can show ads to your users. In this article, Dhruv Nakum teaches you how to integrate AdMob into your app.

🔗 Best practices for laying out your Flutter app

Majid Hajian shares some interesting tips you should consider when building widgets. Some of them will make your app performing better, some others are must-known facts.

🔗 How to build a Chat Messaging UI in Flutter

Many apps include a chat feature. Andrea Bizzotto attempted to re-create the typical chat bubbles as simply as possible. And kind of failed 😅. But then he tried again and this article came out. Do not give up easily, and, like for Andrea, the solution will arrive, sooner or later.

🔗 Getting to know Flutter: Easy notifications with MBMessages

MBurger is a platform that helps you publishing meaningful content to your users. As a developer, you integrate it with your app, and then, as a marketer, you just push content to the app for your users to see. In this article, you'll learn from TheOtherDev/s how to easily send push notifications to your users in Flutter with MBurger.

🔗 Creating a Flutter onboarding screen

If the user experience of your app is not trivial, you might need to add an onboarding screen to be shown when the user launches the app for the first time. This is exactly the content of this tutorial by Lewis Cianci.

🔗 Explore Autocomplete Widget In Flutter

In this article, Shaiq Khan implements autocomplete search in a sample app. I did not know it was that simple.

Design 🧑‍🎨

🔗 The Best Libraries For Easy Chart In Flutter

Do you need to add graphs in your Flutter app? Have a look at the examples in this article by Kazeem Ibrahim, check if there is something you like, and go grab the package.

Tools 🛠

🔗 Automating Flutter driver tests with Jenkins pipelines

Jenkins is an automation server that can help with continuous integration and continuous deployment. There are other more specific tools for mobile development, but if you want to use Jenkins to automate integration testing for your Flutter app, read this article by Swati Bovi.

Backend 🗄

🔗 Using Appwrite with Flutter: A tutorial with examples

I already talked about Appwrite, the self-hosted open-source alternative to Firebase, in this newsletter in the past. But this tutorial by Pinkesh Darji is too good and detailed to not mention it. If you are familiar with Firebase you should really give it a try.

<![CDATA[This week in Flutter #21]]>https://ishouldgotosleep.com/this-week-in-flutter-21/614381698268dd0001657f62Sat, 18 Sep 2021 09:27:50 GMTHave you seen the universal_widget by Goon Nguyen? The amount of code you save to create interesting animations is promising, but I wonder if your code will become too difficult to understand when a new developer joins your team.

In other news, Microsoft now lets you login into online services without a password. I'd love to see this become the standard and I wonder when all the services we use for authentication in Flutter apps will implement something similar. What do you think?

- Michele Volpato

Development 🧑‍💻

🔗 Slivers in Flutter - Part (2), Part (3), and Part (4)

Dhruv Nakum continues the series on Slivers in Flutter with three more articles! As in the first article in the series, there are many examples and animated images. Bookmark these pages because you will need them sooner or later.

🔗 Automated Unit Testing with GitHub Actions

Being able to run tests automatically when you push to your codebase, or when you open a pull request in GitHub, will help you spot regression bugs early in the development process. It also ensures that code written by others does not break existing functionalities (if you wrote tests for them). How do you automatically run tests on your Flutter project using GitHub Actions? Read this short article by Reme Le Hane.

🔗 Building an app to view and share satellite imagery 🛰

Sometimes you build an app just because you are learning something new. Sometimes you build it because a client requested it from you. And sometimes you just create a tool that you need. Like Emery Silberman, who made an app that shows images taken by satellites and shares them with friends. The article explains the initial problem Emery had, and how he tackled several challenges he encountered while coding the app.

🔗 Creating an end-to-end project, from Node.js backend to Flutter app

Learn how to implement both the backend and the frontend of a Flutter project in this tutorial by Thiago Evoá.

🔗 Flutter camera plugin: A deep dive with examples

Souvik Biswas takes you on a journey into all the nooks and crannies of the camera plugin.

🔗 Flutter — Why you should use small widgets

You should always aim to have small components in your app code. It makes the code more readable and maintainable. As Valentin Vignal shows in this article, it can also help with build performance. Adding on Valentin's article, you should not perform complex computation in the build method.

Tools 🛠

🔗 Automating Flutter Apps using Appium

It is a common case to write automated testing only for your business logic. UI testing can become so complicated that it is much easier to use exploratory testing on the app running on a real device. But as the app grows in functionalities, having automated UI testing will help fighting regression bugs. Not all testers in your team might have a good grasp on Dart, and if they prefer python, they can use Appium to write tests for the Flutter app. If you are curious about the process, read this article by Ranvir Chhina.

Backend 🗄

🔗 Using Firebase Cloud Functions to Generate URL Preview

Do you want to show URL previews in your Flutter app? If you use Firebase as your backend system, then you can follow this easy tutorial by Paurakh Sharma Humagain.

Others 🤷‍♂️

🔗 Flutter: What’s next on the Web?

Mariam Hasnany from the Flutter team tells you more about Flutter for web, from the fact that over 10% 😱 of Flutter projects target the web, to the priorities and what to expect in the coming releases.

<![CDATA[This week in Flutter #20]]>Big news this week! Google announced Dart 2.14 and Flutter 2.5: Apple Silicon support and standard lints are the prominent updates for Dart.

For Flutter there are performance improvements, Material You support, camera and image picker updates, Widget Inspector improvements, and a new starter project.

Read these recap

https://ishouldgotosleep.com/this-week-in-flutter-20/613c5e2d2b4564000115228aSat, 11 Sep 2021 10:11:17 GMTBig news this week! Google announced Dart 2.14 and Flutter 2.5: Apple Silicon support and standard lints are the prominent updates for Dart.

For Flutter there are performance improvements, Material You support, camera and image picker updates, Widget Inspector improvements, and a new starter project.

Read these recap by Motabar Javaid, Ozan Taskiran.

- Michele Volpato

Development 🧑‍💻

🔗 Flutter Performance Tips

Here is a short list of tips to improve the performance of your Flutter app. Each tip has a link to a longer explanation if you want more information about it. A nice list by Hasan Basri Bayat.

🔗 Clean Network Layer in Flutter [Dio + Freezed + Json_Annotation]

Create your network layer once and use it in all your projects, with this easy-to-follow tutorial by Ercan Garip.

🔗 Flutter Bloc: A Complete Guide

I stopped using the original BLoC some time ago, I find it too complicated to understand for new developers when they join the team. But if you want to learn more about it, Dhruv Nakum published a nice article where he creates a simple weather app.

🔗 Using GraphQL with Flutter: A tutorial with examples

GraphQL is getting used more and more by API providers. There are some packages in Flutter/Dart that help you with using it in your app. I believe that graphql_flutter is one of the best and in this article, Chidume Nnamdi shows you how to use it with a tutorial.

🔗 Cubit 101: What is It, How to Use it and More

And after the article about BLoC above, here is an article about Cubit, an evolution of BLoC. I always say that I stopped using BLoC, but I can see myself starting to use Cubit in the future. This is a well-written article, I suggest you read it even if you already know Cubit. Via Gianfranco Pigatto.

🔗 Exploring the Stripe Flutter SDK

Stripe is a payment service system with good APIs. Emmanuel Etukudo shows you how you can integrate it into a Flutter app, with support with Apple Pay and Google Pay.

🔗 Getting to know Flutter: Pull to refresh with online data

The pull to refresh is a common UX feature of apps with lists. Learn how to implement it with this article by TheOtherDev/s. This article uses an external package: pull_to_refresh, but...

🔗 RefreshIndicator (Flutter Widget of the Week)

...you can also use the standard RefreshIndicator.

🔗 Implementing SVG in Flutter with flutter_svg

Did you know you can easily use SVG in your Flutter app? Majid Hajian knows that, and he wrote an article about it.

🔗 Slivers in Flutter - Part (1)

An extensive article about scrolling in Flutter, with examples and GIFs, so that you do not have to implement everything yourself to test it. By Dhruv Nakum.

Architecture 🏛

🔗 Flutter: MVVM architecture best practice using Provide & HTTP

MVVM, MVC, MVA, MVP, DDD, BYOB: there are many architectures you can follow when working on a mobile app. The best one is the one you feel most comfortable with. In this article, Maraj Hussain shows you an example of using MVVM in a Flutter project.

Tools 🛠

🔗 Simplify test new features in Flutter app with debug_friend

Stanislav Ilin published a package to help you during the development of a Flutter app. The package is called debug_friend and it adds some views to your app giving information like device info, the possibility to delete app data, and viewing detail UI values, like sizes and borders. A real debug friend, indeed.

Backend 🗄

🔗 Magic URL authentication with Flutter + Appwrite

Appwrite recently added Magic URL as a password-less authentication method. Learn how to implement it in your Flutter app with this tutorial by Damodar Lohani.

Others 🤷‍♂️

🔗 Add CarPlay to your Flutter App 🚗

My first Flutter app was a simple screen showing whether there was an available parking spot in the company parking lot. If you were too late and all spots were taken, you had to park in a public parking lot down the street and walk back. The app saved you the time to check at the company facilities whether there was room for your car or not: if the app told you there was no room, you just went directly to the public parking space. A colleague asked me if we could have the app on CarPlay, but that was not possible at the time. Now, with the flutter_carplay package published by Oguzhan Atalay, we can try it again, once we are all back to the office.

<![CDATA[This week in Flutter #19]]>https://ishouldgotosleep.com/this-week-in-flutter-19/61332215522680000161fdb4Sat, 04 Sep 2021 08:00:10 GMTSome weeks there is not a lot of Flutter content published by the community. Some other weeks there is a lot of content out there. This week is one of the latter. My job is to select the best content for you, so let's get started right away: there is a lot to cover today.

- Michele Volpato

Development 🧑‍💻

🔗 Using the Flutter BLoC Pattern with AWS Amplify Datastore

You might not know it, but AWS has a tool that helps mobile developers creating backends for their app: Amplify. It comes with (beta) Flutter packages. In this article, Derek Bingham shows a simple implementation of the BLoC pattern that handles the state from Amplify DataStore.

🔗 Building a Drawing App in Flutter

Learn about CustomPaint widgets and how to render and control a custom UI in Flutter with this well-written tutorial by Samarth Agarwal.

🔗 Explore Animation in Flutter - PART 1

Adam Kif started a series of articles about animations in SwiftUI and Flutter. This is the Flutter one. If you are just getting started with animation, this is a good starting point.

🔗 Flutter with the TomTom Maps APIs: Part 1

Developers at TomTom try to use Flutter with their Maps API. The result is this video and this article. It's nice to see bigger companies experimenting with Flutter.

🔗 How to create Flutter charts with charts_flutter

There is a simple package, developed by Google, to draw charts in your Flutter app: charts_flutter. Learn how to use it with this article by Samson Omojola.
One of the projects I am working on will need charts and I am looking forward to applying what I learned from this article.

🔗 How To Integrate Customized Google Map in Flutter

You can add Google Maps to your Flutter app, and it is quite easy. But what if you want to have a custom map in your app? In this detailed article, Jaimil Patel deep dives into customizing your Google Map in Flutter. There is a lot to read, so grab a snack before you start.

🔗 Flutter Navigator 2.0 with BLoC: The Ultimate Guide

I still have problems with Navigation 2.0 in Flutter. More in detail, the interaction between the state of the app and removing/adding pages to the page stack. In this article, Jalal Addin Okbi integrates Navigator 2.0 and the BLoC pattern. I have abandoned BLoC more than a year ago, but if you are into it, then enjoy it.

Tools 🛠

🔗 Flutter Version individual for every project - Flutter Version Manager

I am working on many Flutter projects. Most of them get updated to the latest stable Flutter version fairly soon after its release. One of them is still on Flutter 1, and, for many reasons, I don't see my team migrating it soon. This means I need at least two versions of Flutter on the same machine. I use aliases because I only need two versions. Aditya Agarwal explains how to use aliases or Flutter Version Manager.

🔗 Flutter Integration Test for Android and IOS on Firebase Test Lab

When you work on a mobile app, testing can become a difficult task. In the office we have half a dozen devices, Android and iOS, we use to do exploratory testing, but in the last year and a half, we have been working from home most of the time. That is where cloud-based app testing services come in handy. Get started with Firebase Test Lab with this article by Benson Thew.

🔗 Raster thread performance optimization tips

So you have a Flutter app that works. Its performance is fine, but it could be better. What do you do? You buy a faster smartphone. Or you follow this article by Filip Hracek from the Flutter team to learn how to find where the app is not performing well.

Backend 🗄

🔗 It’s Here! Announcing Appwrite 0.10 and the new Realtime API!

Appwrite, the open-source backend server that winks at Firebase, added the Realtime API: a way to subscribe to your data to get updates as they happen. The Appwrite team treats Flutter as a first-class citizen, they release the Flutter SDK and documentation as fast as any other platform. Well done!

🔗 Getting Started with Appwrite Realtime for Flutter

And after the announcement, a new tutorial popped up, by Damodar Lohani.

Others 🤷‍♂️

🔗 How to create Dart packages for Flutter

Have you ever published a Dart package? No? Me neither. If you want to know how to do it, check this article by Chidume Nnamdi.

🔗 Increment - Mobile

Increment is a publication by Stripe, with issues touching topics like DevOps, Remote working, testing, etc. The latest issue is about mobile, with the article "How can mobile teams best use feature flags?" by Pooja Bhaumik, who is very active in the Flutter content creator community.

🔗 When We Went to the DART Side

If you are an Android developer and you are worried about moving to Flutter, read this article by Shivarpit Sharma.

🔗 Updating theming on an old app (The Boring Flutter Development Show, Ep. 51)

A new episode of The Boring Show is out. Do you ever go back to an old project and say "what was I even thinking when I wrote this?" This is exactly what happens all over again in this episode 😅. My favorite quote: "I am starting to think this app is not production-ready."

<![CDATA[This week in Flutter #18]]>https://ishouldgotosleep.com/this-week-in-flutter-18/6129e630e80f9f0001f7b015Sat, 28 Aug 2021 08:55:50 GMTGoogle Summer of Code is a way to help students get started with open source development. This year there were three Dart projects. One of them is a Flutter desktop app that helps developers choosing lint rules to apply to their projects.

Abdullah Deshmukh, the student working on the project, published an article about the project and his experience in the Summer of Code program.

I never attended a program like Summer of Code when I was a student. It looks like an amazing opportunity to learn from experienced people: you get assigned a mentor who will guide you during the process.

- Michele Volpato

🧑‍💻 Development

Flutter: How to draw a task completion ring with CustomPainter

Andrea Bizzotto publishes (another) lesson from his Flutter Animation Masterclass. In this one, he uses CustomerPainter to draw a "task completion" widget that looks a lot like a progress indicator.

Flutter: Animated Task Completion Ring with AnimationController and AnimatedBuilder

And right after the "task completion" widget, learn how to animate it with this related article.

How to create a custom Scrollbar using RenderShiftedBox

In the latest project I worked on, I had to implement a custom ScrollBar, but it wasn't as cool as the one Elina Safaryanova implemented in this article.

Flutter state management for purists

We are always eager to try new packages, and there are plenty of them that help us with state management. But what if we do not need them? Certainly for a small app or some sample code, using what is already available in the Flutter framework is enough. Inclu Cat on the Gentle Trail elaborates more on this subject in this article. He also mentions another article, from Suragch, called "Flutter state management for minimalists" which I also recommend reading.

🤷‍♂️ Others

Introducing package:flutter_lints

The next major release of Flutter (2.3.0) ships with a new package called flutter_lints. New projects will use it by default, deprecating the old linting rules which are "heavily outdated".

package:html (Flutter Package of the Week)

"Are you tired of Flutter's widget tree?"
"Are you feeling nostalgic for an HTML DOM?"

- YouTube comment

Still package:html can be useful in many ways in your app. Learn more about it from the Flutter team.

<![CDATA[This week in Flutter #17]]>https://ishouldgotosleep.com/this-week-in-flutter-17/6120afa5c956270001fae1f5Sat, 21 Aug 2021 10:39:53 GMTI am not a big fan of Medium for tech articles. It is a closed platform, with a horrible user experience - try to copy and paste some terminal command in a medium article and let me know.

So I was pleased when I learned that Hashnode got (more) funding. Hashnode is a blogging platform for developers, like Dev.to. If you are starting a tech blog, and you do not want to host your own website then look at those two before going to Medium.

- Michele Volpato

🧑‍💻 Development

An approach to error handling on Flutter

Rafael Áquila shows a couple of ways to handle errors in a Dart program. He starts with the usual "print on catch" code, and then he provides the ResultWrapper<T> class that you can use to hold the error or the expected result. Finally, he also shows a functional approach using Dartz, a functional programming package for Dart.

How to Parse JSON in Dart/Flutter with Code Generation using Freezed

As a continuation of the article from last week, Andrea Bizzotto pushes JSON parsing to the limit with code generation. I am all for automating repetitive tasks, but I do not use code generation intensively. I find the needed annotations annoying, and not easy to understand for a new member of the team. I still use it sometimes, and when I use it I commit the generated files to the repository. Andrea argues that the code reviews become harder to perform, but you can easily exclude generated files from the merge diff.

The Ultimate Flutter Layout Guide

Ok, I am not sure this is the "ultimate" guide, but it is a good idea to keep it next to you when you really cannot understand why that container is not properly aligned/sized/visible. Thanks, Aditya Sharma.

Keys In Flutter - UniqueKey, ValueKey, ObjectKey, PageStorageKey, GlobalKey

In this comprehensive article, Dhruv Nakum talks about Keys in Flutter. We have seen keys in a previous issue, but Dhruv goes straight to the point in this article.

Creating a custom progress indicator

Get your hands dirty with some CustomPaint and create a new progress indicator with this article by Daniel Ko. Warning: there is math in there.

Flutter Timer vs Ticker: A Case Study

Andrea Bizzotto publishes a lesson from his Flutter Animation Masterclass, where he explains why you should use Ticker instead of Timer when building a stopwatch. I bought the course, and I must say that it is well done. If you are learning Flutter, and want to know more about animations, you should consider it. Just to be clear: I am not affiliated with Andrea and I paid full price for the course.

A guide to theming your app in Flutter

A quick and easy article about getting started with adaptive_theme and Riverpod to handle themes in your app, by Chinedu Imoh.

Master The Art of Dependency Injection 🐱‍👤

Dependency injection is important to keep your code loosely coupled and highly testable. Are there special considerations about dependency injection when working on a Flutter app? We could have a very deep widget tree, forcing us to inject the dependency from the root to the leaf. Read more about dependency injection in Flutter from Dhruv Nakum.

🛠 Tools


A tool like Crashlytics but for threats. You deploy it with your app, and it notifies you about attempts to clone it or reverse engineer it. I am not sure about what you can do after being notified. I consider the apps I distribute as at risk of being studied and cloned. You should not have secrets in the app, because it runs on a device you have no control of. Secrets should be managed only on platforms you fully control, like a backend server.

🤷‍♂️ Others

Flutter Hot Reload

If you want to know how Hot Reload works, and how it has been improved in Flutter 2.2, read this article by Jens Johansen.

Yellow underline text | Decoding Flutter

It happened to everybody. In your app, often in a text hero widget, your text has two yellow underlines. It happens when a Text widget does not have a TextStyle. Filip Hráček explains it to you and gives you a solution in this short video.