Best Flutter IDE for Front-End Development

https://medium.com/getpieces/best-flutter-ide-for-front-end-development-450bd449f543

Navigating the vast realm of app development, choosing the best Flutter IDE can be a game-changer. Integrated Development Environments (IDEs) are more than just tools; they are the backbone that streamlines the coding process, ensuring flawless execution and enhanced productivity.

Especially when it comes to Flutter, a leading framework in today’s digital ecosystem, having the best IDE for web development elevates the developer’s experience to new heights.

Understanding Flutter and Integrated Development Environments
Flutter, an open-source UI software development toolkit birthed by Google, has swiftly risen as a dominant force in mobile app development. With its unique ability to craft high-fidelity, natively compiled applications for multiple platforms from a single codebase, Flutter presents developers with unparalleled flexibility and efficiency. Its vibrant widget-centric approach, paired with the Dart language, promises robust and visually appealing applications, be it for mobile, web, or desktop.

Integrated Development Environments (IDEs) serve as the crucible where the magic of Flutter comes alive. These sophisticated platforms offer a consolidated workspace, combining essential tools like code editors, debuggers, and compilers. In the context of Flutter, the right IDE can simplify the coding process, provide real-time feedback, and automate repetitive tasks. By easing navigation, highlighting errors, and offering intelligent code completion suggestions, IDEs empower developers to harness the full potential of Flutter, ensuring smooth and efficient project outcomes.

Key Considerations When Choosing a Flutter IDE
Here are some key things that you need to consider before pitching for the best Flutter IDE:

1. Hardware and Software Compatibility:

Flutter IDE for Android: Ensure support for Android emulators and tools specific to the Android ecosystem.
Flutter IDE for Windows: Must be optimized for Windows with seamless integration of its features.
2. Performance and Speed of the IDE:

Opt for an IDE that is agile and responsive. The speed at which it can compile, run, and debug Flutter code is pivotal in enhancing development efficiency.

3. Availability of Support and Community Plugins/Extensions:

A robust library of plugins and extensions, backed by an active community, can be game-changing. These additions can introduce functionalities, streamline specific processes, or offer tools tailored to niche requirements.

4. Cost Factors and Licensing:

Sometimes, premium IDEs, despite an upfront cost, can offer unparalleled features, superior support, and regular updates. It’s also crucial to understand the licensing agreements. Some might be free for personal use but require payment for commercial projects.

Best Flutter IDEs For App Development
VS Code
Visual Studio, often dubbed the titan of IDEs, is Microsoft’s premier development environment, revered for its adaptability across various programming landscapes. For Flutter enthusiasts, it unfolds as a haven, integrating seamlessly with the framework and facilitating an optimized coding experience, ensuring rapid, efficient app development.

Features
Seamless integration with Git: No more hopping between platforms. Visual Studio embeds Git functionality within, streamlining version control and ensuring smooth code management.
Live Share: Elevate the collaborative experience with real-time coding sessions. Whether you’re mentoring a junior developer or debugging with a colleague across the globe, Live Share makes it effortless.
IntelliCode: Leveraging artificial intelligence, IntelliCode revolutionizes coding with predictive suggestions. It not only speeds up the development process but also reduces the chances of errors.
Extensive extensions marketplace: Personalize your Flutter web development experience. With a vast repository of extensions like the Pieces for Developers VS Code extension, you can add tools, themes, and languages tailored to your needs.
Integrated debugging tools: Dive deep into your code with precision. Visual Studio’s debugging suite is adept at swiftly identifying and rectifying anomalies, ensuring your Flutter apps run flawlessly.
Android Studio
Android Studio stands as the official IDE for Android development. Its stature is further elevated when it collaborates with Flutter, offering an ecosystem that is both intuitive and powerful. For developers diving into the Flutter world, Android Studio becomes a natural ally, bringing Google’s native Android expertise and fusing it with Flutter’s dynamic capabilities.

Features
Emulator with real-time preview: Say goodbye to guesswork. With its integrated emulator, developers can see changes in real time, ensuring the app looks and functions as intended.
Full suite of profiling tools: Dive deep into your app’s performance metrics. From memory usage to CPU cycles, Android Studio’s profilers provide insights to optimize and enhance app responsiveness.
Code completion and powerful debugging: Coding in Flutter becomes a breeze thanks to intelligent code suggestions and a robust debugger that quickly pinpoints and rectifies issues.
Flutter-specific widget inspector: Understand and modify your Flutter widgets effortlessly. This specialized inspector visualizes and debugs the widget tree, simplifying UI adjustments.
Fast build and deploy processes: Time is of the essence. Android Studio accelerates the build and deployment phases, ensuring swift transitions from coding to testing.
DartPad
Floating in the digital ether is DartPad, a minimalist yet potent online IDE tailored for the Flutter and Dart communities. It breaks down barriers by being accessible directly via a browser, making it an invaluable tool for quick coding experiments or when on the go. For those seeking a no-fuss, immediate Flutter coding environment, DartPad emerges as an impeccable choice.

Features
Web-based with no installation required: Website accessibility is its middle name. DartPad requires no downloads or setups, offering a hassle-free, instant coding platform anytime, anywhere.
Live preview feature: Witness your Flutter magic in real time. As you code, DartPad dynamically displays the results, aiding in immediate feedback and iterations.
Supports Dart and Flutter libraries: Despite its lightweight nature, DartPad doesn’t skimp on essentials. It offers comprehensive support for Dart and Flutter libraries, ensuring a rich coding experience.
Shareable code snippets: Collaboration is critical. Whether you want to share a piece of brilliance or seek feedback, DartPad’s shareable snippets make it effortless.
Simple and intuitive interface: DartPad prides itself on its clean design. With an uncluttered interface, developers can focus purely on coding, free from distractions.
IntelliJ IDEA
In the grand tapestry of development environments, IntelliJ IDEA by JetBrains stands out as a multifaceted gem. Its prowess extends seamlessly to Flutter development, offering intuitive features and advanced capabilities. For those who prioritize depth in their coding assistance without compromising on efficiency, IntelliJ IDEA proves to be an indispensable ally in the Flutter domain.

Features
Deep code understanding: Venture beyond the surface. IntelliJ IDEA delves into the semantics of your code, offering insights and suggestions that align with best practices and design patterns.
Smart code completion: Efficiency at your fingertips. As you type, the Intellij IDE proactively offers code suggestions, streamlining the coding process and minimizing potential errors.
Powerful code refactoring tools: Embrace change without fear. With robust refactoring capabilities, adapting and enhancing your Flutter codebase becomes a structured and error-free process.
Built-in tools for profiling: Gauge the pulse of your application. IntelliJ IDEA’s profiling tools shed light on performance metrics, enabling optimizations and fine-tuning.
Version control integration: Manage your code evolution with grace. Integrated version control ensures smooth transitions between code versions, collaborative coding, and well-maintained coding history.
Flutlab
In the dynamic arena of online IDEs, Flutlab emerges as a beacon for cloud-based Flutter development. Harnessing the power and flexibility of cloud technology, it reshapes the conventional boundaries of coding, offering a streamlined and accessible platform. For a Flutter developer seeking a seamless Flutter IDE online without the constraints of hardware or location, Flutlab unfolds as an impressive choice.

Features
Real-time collaboration: Teamwork made simple. Flutlab facilitates synchronized coding sessions, allowing multiple developers to collaborate on projects, ensuring seamless teamwork and immediate feedback.
Cloud-based simulator: Say goodbye to hefty local emulators. Test Flutter web applications directly within the browser using Flutlab’s efficient cloud simulator, saving time and system resources.
Integration with popular repositories: Seamlessly connect with platforms like GitHub or Bitbucket. This integration ensures fluid code pulls, pushes, and version management.
Direct APK download: Transition from development to testing in a snap. With Flutlab, developers can directly download the APK, facilitating swift app testing and deployment.
Code analysis and debugging: Navigate the maze of code with precision. Flutlab’s tools offer insightful code analysis and a potent debugger, ensuring your Flutter apps are robust and error-free.
XCode
Diving into Apple’s ecosystem, XCode stands tall as the definitive development environment for those keen on reaching the iOS audience through Flutter. Seamlessly merging the robustness of Apple’s software architecture with Flutter’s adaptability, it crafts an unparalleled development experience.

Features
Advanced debugging and profiling tools: With XCode, troubleshooting is elevated to an art form. Its suite of tools provides deep insights, ensuring your Flutter apps run optimally on iOS devices.
Interface Builder: Envision and create dynamic Flutter UI with ease. The XCode Interface Builder offers a visual canvas, making UI/UX design intuitive and efficient.
On-device testing support: Witness your creations in their natural habitat. Test directly on iOS devices to ensure performance and responsiveness.
Asset management: Organize and manage multimedia with finesse. XCode’s asset catalog aids in streamlined resource utilization.
Swift and C integration: While Flutter reigns supreme, the XCode IDE allows seamless integration with Swift and C, broadening developmental horizons.
FlutterFlow
Making its mark in the Flutter landscape is FlutterFlow, a revolutionary visual development platform. Eliminating traditional barriers, it provides a canvas where even non-coders can bring Flutter applications to life.

Features
Drag-and-drop UI builder: Designing made simple. Sculpt interfaces without diving into code, making development swift and accessible.
Firebase integration: Connect with Firebase effortlessly, enhancing functionalities like authentication, databases, and more.
Real-time previews: Iterate with confidence. See changes as you make them, ensuring design perfection.
Robust component library: A treasure trove of widgets and elements catering to diverse design needs.
Collaboration and versioning features: Team up and maintain code history with precision, streamlining project management.
Emacs Dart Mode
For purists who find solace in Emacs, the Dart Mode extension brings Flutter to their fingertips. Merging the efficiency of Emacs with Flutter’s dynamism it offers a refined coding experience.

Features
Syntax highlighting: Navigate code effortlessly with distinct color codes for better readability.
Code formatting: Maintain a pristine codebase with automatic formatting, ensuring consistency.
Integration with Dart SDK: Access Dart’s full potential seamlessly within the Emacs environment.
Quick documentation access: Answers are just a keystroke away. Dive into Dart and Flutter documentation on the fly.
Keyboard-centric commands: Embrace the power of keyboard shortcuts, enhancing coding speed and efficiency.
RevenueCat
While not a conventional IDE, RevenueCat is a vital tool for developers integrating in-app purchases and subscriptions in their Flutter apps. Simplifying the maze of monetization, it’s a catalyst for revenue generation.

Features
Simplifies in-app billing: Navigate the intricacies of billing with ease, enhancing user experience and purchase success rates.
Tracks revenue and metrics: Gauge your success. Monitor key metrics to strategize and optimize monetization.
Supports multiple platforms: Not just limited to Flutter, RevenueCat’s broad platform support ensures consistent monetization strategies.
Robust API: It offers ease and flexibility thanks to its robust API integration. Integrate with comfort and flexibility, leveraging RevenueCat’s powerful API.
Atom
Atom, an avant-garde text editor birthed by GitHub, extends its arms to Flutter developers through community-driven extensions. Marrying simplicity with adaptability, it emerges as a formidable environment for Flutter projects.

Features
Git integration: With its roots in GitHub, Atom offers seamless Git operations, streamlining code management.
Autocompletion for Flutter: Speed up your coding. Atom suggests code snippets, enhancing your Flutter coding rhythm.
Embedded terminal: Access the terminal within the editor, streamlining tasks without switching windows.
Smooth UI with themes: Personalize your workspace. With a vast array of themes, craft an environment that resonates with your aesthetic.
The Main Benefits of IDEs & Text Editors for App Development
Streamlined development cycle.
Comprehensive code management.
Integrated testing and debugging.
Enhancing collaboration and productivity.
Customization and extension support.
Conclusion
Choosing the best IDE for Flutter is pivotal, acting as the linchpin between ideas and execution. A Flutter IDE directly influences productivity, ensuring app development is both efficient and yields superior quality outcomes. Want to learn about how Pieces built their app? Read Pieces’ Flutter case study.

Flutter and Clean Architecture(I)

https://aderibigbejesutoni860.medium.com/flutter-and-clean-architecture-i-be75e13608d4

Flutter and Clean Architecture (II)

https://aderibigbejesutoni860.medium.com/flutter-and-clean-architecture-ii-bf39113df82b

Flutter vs React Native

https://medium.com/@vikranthsalian/flutter-vs-react-native-396216ad41d3

Developers often find it difficult to choose between Flutter vs React Native. Both have been created by the current tech giants of the world, Facebook and Google.

But the question of what to use to create these apps has been around for a while.

Flutter

is an open-source UI framework developed by Google in 2017 that aims to design cross-platform apps to run on mobile, Windows, macOS, and Linux as well as on the web. Flutter’s framework is built upon Dart. A lot of big companies like Alibaba, Philips Hue, Hamilton, etc., choose Flutter for development. Moreover, Google frequently provides updates for Flutter, improving its performance with each update.

Advantages of using Flutter

1. Great UI
2. Has a number of widgets
3. Apps are faster
4. Helps build web apps
5. Well-structured documentation and community
6. Helps replicate and create the same UI for different devices

Disadvantages of Flutter

1. Not native
2. Apps are larger
3. Has a limited set of tools

React Native

Facebook developed React Native in 2015. It is an open-source framework that is based on JavaScript. It also provides a similar feature, using the same codebase to create cross-platform apps, thus eliminating the need to compile other technologies for creating mobile apps. Skype, Instagram, Uber Eats, etc., depends upon React Native for development.

Advantages of using React Native

1. Uses JavaScript
2. Can create apps for multiple platforms using a single codebase
3. Understands the importance of code reusability and promotes it
4. Growing and active community
5. Helps in accelerating coding time

Disadvantages of using React Native

1. Not native
2. Does not provide innovative, out-of-the-box components
3. Limited choices
4. Abandoned libraries and packages
5. UI can be hampered easily and needs to undergo vigorous UI testing
6. Larger apps

Differences between Flutter vs React Native

React Native and Flutter are amazing choices for developing a cross-platform application, however, they share several differences which make them unique from each other.

• One major difference is the programming languages both frameworks use. React Native is based on JavaScript and uses JSX. However, Flutter uses Dart programming language.
• The architecture for both frameworks differs. Flutter uses a 2D graphic rendering library, Skia, whereas, React Native uses the Flux architecture, which also requires JavaScript bridging. Here, JavaScript bridging is necessary for React Native to allow JavaScript and Native code to interact with each other. However, there is no programming bridge in Flutter.
• Flutter and React Native documentation guides are very good. However, Flutter shares more organized and structured documentation. React Native documentation is poorly maintained because it depends heavily on third-party libraries.
• Installing Flutter requires you to download the binary from GitHub and also to set up the environment variables on your system. On the other hand, React Native is installed using node package manager (NPM) with one command on your terminal.
• Flutter relies on its developed widgets for customization, whereas React Native incorporates third-party customization components. Therefore, flutter offers more compatibility. Moreover, Flutter development is solely constructed upon Widgets, whereas React Native uses JSX.
• React Native has better support for 3D, whereas, Flutter does not support 3D.

Conclusion :

This blog explains the reasons behind the great popularity of the two emerging frameworks Flutter and React Native, for creating cross-platform applications. Flutter and Native solve the issue of creating separate code for native platforms like Android and iOS. Now, you can create an application for all the platforms using entirely the same code.

Moreover, picking the best framework for yourself depends upon your experience, requirements, and the business needs of your project. If you’re already aware of the JavaScript programming language, then there’s no doubt that React Native is a good choice. However, if you’re targeting a highly stable and fast performance, Flutter has several advantages over React Native.

Happy Coding!!!

What is Flutter Impeller?

https://blog.nonstopio.com/flutter-impellers-d18d47a809d9

Credits: wikiHow

Flutter 3.10 introduces Impeller in iOS apps by default. So these iOS apps will have less jank and better consistent performance. And for Android, Impeller is in the development phase. But we should know what Impeller is.

Impeller is a new renderer within Flutter’s engine. Until now, Flutter has been using Skia. Skia has built-in rendering features which can be used for various devices. But Skia is not always optimized solution for Flutter’s needs.

Before going further, let’s see

The basic Scenario of Impeller is that (check this issue)-

If we had a static set of shaders, we could asynchronously compile them on program startup, so that by the time the application runs an animation we can use this static set and not stutter while we prepare a new one.

Medium term we could also determine what specialized shaders we would want to use in each scene, and compile them in the background so that the next time, if all the specialized shaders we would want to use are ready, we could just use them. That way we get the long-term sustained performance benefits of specialized shaders and the short-term smooth start performance benefits of a static shader set.

Yes, our main goal is to eliminate jank or any stuttering that’s happening inside your app. But first, we should know what is Renderer.

Renderer software helps to translate the code into the pixels that are visible on the screen.

Whenever we build any widget into the Flutter that goes into some steps like Widget Tree -> Element Tree -> Render Object Tree.

But what happened after that? We will go step by step.

1. Display List — Render objects contain the instruction for how to actually layout and how that widget should be painted, in the form of instructions, and those instructions are given to the engine as a simple command, which is called Display List. Now an engine will decide whether the widget should be rendered either using Impeller or Skia.

2. Render Pipelines — Render Pipelines that can be used to render everything given in the Display List.

3. Shader — A Shader is nothing but a small piece of code that gets executed on the graphics device.

4. Rasterization — Shaders take the vertices (say for ex. Flutter Logo) and it will move them on the screen where exactly we want to draw it. This process will iterate through all the given triangles of this Flutter Logo(Ex. Fig.1). For each vertex into say triangle of any image, we figure out the specific pixels that are inside it, and this is called rasterization.

Fig. 1 (Ref)

But wait...

Those Shaders and Render Pipeline need compilation to get instructed by the GPU so that GPU can execute it.

AND THIS COMPILATION PROCESS IS VERY EXPENSIVE.

And that’s how Impeller comes into the picture. Let’s discuss this issue in detail.

Shader Compilation Jank Issue —We know that Shaders are the low-level code given to GPU to draw UI on screen.

Skia compiles and generates these shaders (at runtime) when running app for the first time. The generation of shaders requires quite a bit of time(approx. 200ms or more depending on the situation) and this causes the frame, which can’t be rendered within 16ms to jank. This jank is called shader-compilation-jank.

Impeller resolved this issue by pre-compiling a smaller, simpler set of shaders at build time.

First, we will see how exactly Impeller Architecture works,

Now let’s take this Display List and draw it using Impeller.

Impeller Architecture

1. Aiks — The Display List operations are dispatched to Aiks. Aiks is the topmost layer of Impeller and it mainly contains the canvas drawing API.

2. Entity — Aiks takes the higher level commands from the DisplayList and translates them into the simpler self-contained drawing operations called Entities.

3. Contents of Entity — These are the Content Objects of the Entity, and it contains the actual GPU instructions need to draw the Entity.

4. Hardware Abstraction Layer [HAL] — Impeller needs some kind of translation layer by which it can communicate with the GPU, which called as Hardware Abstraction Layer. Render Pipelines contain the Shaders, and each Content of Entity uses the HAL to draw itself by giving instructions to GPU to render these Shaders. This HAL talks to the graphics driver through various standard graphics APIs like Metal on iOS and Vulcan on Android. And then this is how the resulting texture gets displayed on the screen.

Impeller generates and compiles all necessary Shaders (ahead of time) when we build the Flutter Engine. Therefore apps running on Impeller will have a predefined set of Shaders they need, and the shaders can be used without introducing jank into animations. This operation can be done by using Impellerlc Shader Compiler.

Impellerlc Shader Compiler — Impeller has a set of handwritten shaders compiled in advance. Impeller precompiles a smaller, simpler set of shaders at Engine build time so they don’t compile at runtime.

After a preview period since January 2023, Impeller is now on-by-default on iOS in a stable branch. Android up next.

Impeller Architecture

How to Enable Impeller ?

Here, I have taken this example and tried to run it from the IDE (Android Studio).

Pre-Impeller build

Can you see that, the app got stuck at a very early stage of the app run.

Now as per this, to see what direction Android support will take, experiment with Impeller in the 3.7 or later stable release, I enabled Impeller for Android and tried to run the same app from scratch. And got the below observations.

Post-Impeller build

Here, the animation runs smoothly after enabling Impeller.

Hope you enjoyed this article!

Here to make the community stronger by sharing our knowledge. Follow me and my team to stay updated on the latest and greatest in the web & mobile tech world.

Ref:

1] Introducing Impeller

2] Impeller Rendering Engine

3] Shader compilation jank

4] Smaller, simpler set of shaders

What’s new in Flutter 3.10

https://nyonggodwill11.medium.com/whats-new-in-flutter-3-10-c54124eee63b

https://medium.com/@david_90860/flutter-web-in-2023-is-it-good-for-you-4c2d51129b80

My website developed with Flutter: https://keeplist.com/

Before we get started, some transparency about my experience with Flutter.

I am a web developer with 7 years experience in advanced java script + react. Before, I spent 10 years developing windows applications using c++. Yes, i’m a real computer nerd.

A year ago, I started working on a project that had to be cross platform (Android, iOS, Web)

As a JavaScript developer, I developed mobile apps in the past with Android Studio + JAVA that were based on a hybrid WebView. I wanted to get to the next level and build native mobile apps, and learning Kotlin + Swift seemed too complicated.

I started developing with Expo + React Native, but at a early stage I realized Expo has a glass ceiling when it comes to high level features.

I kept reading awesome things about Flutter, and one day while I was at the pool with my son, I decided to jump into the water. Not the pool water, the Flutter water!

With RN (React Native) it took me about 2 months to develop a cross platform sorted list (vertical re-orderable list with drag and drop)

So that’s the first thing I tried with flutter, and it worked pretty great out of the box!

So I decided to start the project with Flutter, and with very little experience in flutter and Dart, everything really ticked amazingly, and I was in love 💕with my new framework.

I can’t even begin to describe how great the Flutter framework is! You get tons of GUI widgets (Components if you are coming from React) That work great and are super easy to work with. Almost every customization you can think of, it’s there! And the documentation from the flutter team at https://flutter.dev/ is excellent. They have short videos for almost every widget in the framework. If you are looking for advanced tutorials, there are tons on youtube. The flutter community has grown very big, and you can find answers instantly on StackoverFlow and videos for every question you have.

My app, developed with Flutter

The developer experience is really top shelf, and the Flutter IDE for VS code is amazing, and you debug super fast with the “hot reload” feature that enables you see to see changes immediately without building again. Flutter is used with Dart, which was developed by Google, and I really love it. Everything in the language just seems so simple and intuitive, and things just make sense to me. I feel like I am using an advanced version of Javascript + TypeScript.

While Dart is a real smooth transition from JavaScript, the Flutter Widget tree takes a while to gets used to. When you see Flutter code for the first time, at least when coming from Javascript or React, you get really confused. There is definitely a learning curve, but as an experienced programmer after a few tutorials I was up and running. And when you get used to it, it’s super powerful and dynamic.

And, of-course, it’s cross platform! While I used it for the Web, Android, and iOS, it also supports Windows, Linux, and MAC! I think Flutter is a game changer in this aspect, because it means that much smaller teams can get apps to the market super fast, and reach a lot of users with support for nearly every device. There are other platforms that claim to do the same, but Flutter is the real deal.

But, things ticked a lot better on mobile than on web. That being said, I still have to say that flutter web is still great, but in my experience just not yet perfect. I am still using it now in production to run my website, and the website looks and feels awesome! But, I did find some difficulties with developing for the web, and I will share them with you at the article.

TEXT IN A FLUTTER WEBSITE IS NOT REAL TEXT 😰

You are reading through this article, and all of a sudden you remember of a sentence you want to copy and paste and send to a friend. What do you do? You simply click ctrl+f, you highlight the text, copy it, and paste on any app you desire. With Flutter web, none of these options are available, because what gets rendered on the screen is not really text, it’s actually an image. So you can’t search in it, you can’t highlight it, and you can’t copy it.

And you also don’t have a built-in browser spell check. Which means that users cannot see if the text they are typing has typos. This might seem as something small to some of you, but it’s actually what bothers me about Flutter web the most. Web users today feel free to type a lot because they know the browser has their back and will fix their typos and show them the nice red underline when they misspell. Also, developing a spell checker as a developer is very hard, especially when your users might type not only in English. There is an open Github Issue for this, but it’s on P4 which means it might take a while before it gets resolved. Regarding the text search feature, this is something that you can develop on your own, if your app has a search feature. But it won’t work for you out of the box.

https://github.com/flutter/flutter/issues/53585

The website takes a few seconds to load 🥱

Users today expect sites to load up immediately, especially on good internet connections. You see a link, you press on it, and you want to something in less than a second. If you don’t get it, you go to the next site. Everything happens super fast. But websites created with flutter, after optimization, take about 3–5 seconds to load, until you see the complete page. If you develop a nice loader (Which you can display using JAVASCRIPT / HTML before the Flutter widgets are loaded) it’s actually not that bad. This is what I did. But if your users use your app or website a lot, the slow loading time will be a bad user experience for them.

My website load

The website feels slow at times 😩

Well, my wife always claims I am super slow. So who am I to complain?

When developing for the web with Flutter, your web app feels high end, and almost all Flutter widgets that look great on the mobile, also look great on the web. They are animated, they are sharp, and generally look great. But, my website feels sluggish at times. Buttons can have delayed response, and also the animations can become slower. Overall, even though a website developed withFlutter can really look amazing, it feels less performant than pure HTML / JAVASCRIPT

UP and down Arrows don’t scroll the page

The keyboard is always faster than the mouse, and users press up and down all the time to scroll the page. Out of the box, this does not work with flutter. Pressing up and down has no effect on the scrollbar. I am assuming you can write code to fix it (Flutter has an awesome widget called GestureDetector) but it doesn’t work out of the box.

SEO

While i’m not an SEO expert, i’m not sure that web engines know how to parse content from Flutter web, espceially due to the fact that it’s not real text. Since Flutter is actually from GOOGLE which is a search company, it stands to reason that this will be solved in the near future, and Google will know how to parse Flutter content.

THE VERDICT

So, Flutter web is obviously not yet mature, and your web users won’t get the best experience out of the box if you use Flutter. While some of the things discussed here can be solved with some custom development, the investment might not be worth it.

So should you develop a website with Flutter in 2023? If you need only a website without mobile apps, the answer is obviously no. There are other Frameworks that are a lot more mature and advanced for the web than Flutter.

But if you are developing an app that needs to be cross platform, the amount of work you will save from using just one codebase is incredible and might be worth it. It really depends on what are your most important platforms and when is your release date. If most of your users will come from the web, I will definitely advise at this point to use some other framework for your website, and Flutter for your mobile apps.

If you are aiming mostly for Mobile users and you are at a stage where you want to get to the market fast, I would advise sticking with Flutter web. Some advanced users might complain and won’t like the user experience, but there is no doubt that the website design will look great and also the animations (Hoping your users have good computers).

Also, the Flutter team are working on improvements all the time, and there is a good chance that a year from now some of the issues mentioned here will be solved. Developing new apps and marketing them takes a while, so it might be worth to be patient. BUT at the same time, when marketing new apps, the user experience must be great out of the box so people will come back. And when they don’t have a spell check and can’t search text, they might be moving to the next alternative.

BIG THANKS TO THE FLUTTER TEAM!

Google really developed something amazing here, and in a few years from now, Flutter can become the most used frontend framework on all platforms, and startups will have their ideas out there super fast.

I can’t really explain how great Flutter is, you need to experience it for yourself to know what I am talking about. So, really, thank you for every person in the Flutter development team, you really developed something great here!

And also a big thank you to Johannes Milke from heyflutter.com, he has some great tutorials on youtube for Flutter! I really learned a lot from watching his videos. (Links are below)

To view my to do list app developed with Flutter, see:

WEB: https://keeplist.com/

Android: https://play.google.com/store/apps/details?id=com.keeplist

iPhone: https://apps.apple.com/app/keeplist/id1626699174