March 2024: Flutter Drag and Drop, JavaScript vs Dart, Useful Packages, Flutter UI Challenges

After the recent launch of Flutter 3.19, this month has been fairly quiet on the news front.

And you know what? Quiet works well for me, so I can focus on building stuff without worrying about API changes.

With that said, I still have a few things to share in this March newsletter. 🙂

Let’s dive in!

Quick announcement: I'm hiring Flutter content writers! For more information and how to apply, please read this.

Official Videos by the Flutter Team

The Flutter team continues to publish great educational content, including these recent livestreams about code generation and Serverpod.

But my favourite tutorials are short and sharp, such as this latest video about drag & drop.

📹 Drag and drop - Flutter Build Show

If you need to drag widgets from one place to another inside your app, the Flutter drag & drop APIs will suffice. But modern UIs support dragging things between different apps, and this requires some communication with the operating system.

That’s why the super_drag_and_drop package was created. And in the latest Flutter Build Show, Craig Labenz shows how to:

  • build a demo for dragging things between panels, updating the state as desired
  • drag & drop files from outside the app and show their contents in the UI

Watch this for all the details:

Articles from the Community

Here are my latest favourite articles from the community. 👇

📝 Mastering Responsive UIs in Flutter: The Full Guide

If you want to create responsive apps in Flutter, you’ll need to learn about single-child and multi-child layout widgets, as well as screen-based breakpoints, device segmentation, adapting to orientation changes, responsive navigation, and more.

This guide covers all the above, along with some tips about debugging and testing your layouts (an example app is also included):

📝 The One Trick Every Flutter Web Dev Needs to Know

Most Flutter web apps share a common drawback: slow initial page load.

In an effort to improve this, Abhishek Doshi tried adding a defer attribute to load all the Flutter scripts in parallel inside the index.html file and saw promising results:

This approach has also been discussed on GitHub, and according to this comment, Flutter itself is heading in a similar direction.

Read this thread for more info:

📝 The Cost of JIT: Smoking JavaScript with Dart

Despite its flaws, JavaScript is widely used as a server-side language.

Popular server runtimes like Node, Deno, and Bun are all powered by JavaScript, while Dart still hasn’t had much adoption.

But what about performance? Is Dart faster than JavaScript on the server?

To find out, read this article, which contains many interesting benchmarks and explains the fundamental differences between AOT and JIT compilation:

Useful Packages

There are now more than 50K packages on pub.dev. While far fewer are regularly maintained, I’m glad that there are many high-quality ones I can use for my day-to-day work.

In fact, I recently came across these useful packages. 👇

🧱 Talker

Talker is an advanced error handler and logger for Dart and Flutter apps. I discovered it while building a logging interceptor for my Flutter tips & tricks app, and I really like how customizable it is!

Try this web demo to learn what Talker can do, and check the official package for instructions:

🧱 Scroll To Index

Ever needed to open a new page with a ListView and immediately scroll to a given item by index?

This is hard to do if all the items can have different heights.

Luckily, the scroll_to_index package can help:

🧱 Custom Text

The Text and RichText widgets may be your go-to for basic text rendering needs.

But what if you need advanced customization options, such as syntax highlighting, custom gestures for URLs and email links, custom pattern matching, custom mouse cursors, and so on?

To meet these needs, check out the custom_text package:

Latest from Code with Andrea

Over the last month, I’ve been busy:

  • Launched a new Flutter UI challenges mode on Code with Andrea Pro.
  • Shared a bunch of new Flutter tips on this GitHub repo.
  • Started working on a new Flutter app that I’ll publish on the app stores (follow my updates on X and LinkedIn for more info).

I’ve also published two new articles. 👇

📝 How I Built a Modern Course Platform in 2024

This article offers an overview of the technologies I used, challenges I faced, and insights I gained from shipping Code With Andrea Pro, my new course platform.

Inside, I also talk about SSR, edge computing, DB migrations, and share a breakdown of my running and outsourcing costs. 👇

📝 How to Publish your Flutter Web Apps on GitHub Pages for Free

Flutter web is great if you want to:

  • Quickly share previews with testers and clients
  • Make a showcase of apps for your portfolio
  • Embed a demo app inside your tutorials or documentation

And in this step-by-step guide, I share my workflow for deploying any Flutter web app using GitHub pages:

💻 Flutter UI Challenges

If you enjoy building UIs in Flutter, you may like this new, free learning mode on Code With Andrea Pro.

As of today, five challenges are included, and each of them comes with:

  • Flutter web demo: showing what the completed UI looks like
  • Starter project: all the initial assets and code you need to hit the ground running
  • Primary goals: what you need to do to complete the challenge
  • Stretch goals: take these if you want to go further
  • Useful links and resources: these will help you along the way
  • Completed project: built following best practices - so you can compare your solution with mine

If you want to try them, head over here:

Until Next Time

That’s all I have for today.

More articles are coming (spoiler: server-side Dart), and I’ll be posting more updates on X and LinkedIn, too!

Thanks for reading, and happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter In Production

Flutter In Production

Learn about flavors, environments, error monitoring, analytics, release management, CI/CD, and finally ship your Flutter apps to the stores. 🚀

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Last updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.