Flutter Course 3.0: A Browser IDE

What would it look like if we continued to improve the best Flutter Course? Version 3.0 is our next big step, and this update is focused on improving the coding experience.

The best way to learn is by doing, and that has been the focus since our first release of the in-browser editor.

• You learn
• You write code
• We test your code

This update makes that experience even closer to an IDE.

🖼️ Floating Preview

Our goal is to be as close to an IDE as possible in the browser. However, the most common workflow when developing Flutter locally is to have both an IDE and an emulator running. These are two separate windows.

To make it feel more like a native experience we moved the preview from taking up 1/4 of the IDE real estate to a floating window that feels a lot closer to an emulator.

You can move this emulator to any 4 corners of your window (similar to iPhone PiP).

💻 Terminal

We had something that looked like a terminal before, but it wasn’t the true terminal output. Previously, we filtered the terminal messages for test results, which missed a very key part of the development experience: code errors.

Now you get the full terminal output, to give you more real resources to complete the lesson challenges.

📊 Test Result Visualization

The test result is the most important part of our platform, since this guides you to getting the correct answer, and gives you a description of what went wrong.

There is a lot more focus on displaying them nicely to help work through what you got correct, and what needs fixing.

⚡ Faster Platform (Format, Startup, Preview)

Speed will always be important. In this update, we take another step towards getting closer to native speed.

✨ Improved Highlighting

This course covers everything you need to know for Flutter, so by definition, you will spend a lot of time on this platform. To be an enjoyable experience, it needs to look beautiful as well. Our favorite theme is Catppuccin for its soothing pastel theme.

And Much More

All the things we mentioned are the “big changes”, but there are plenty of little tweaks as well, including a 2x larger code editor area and key binding support (ctrl+enter to rebuild, ctrl+shift+i to format).

Most of these changes have been driven by community feedback. You can try a free demo right now by clicking this link. And consider joining the membership, where you get access to this course and Flutter Kit (boilerplate for building production-ready apps).