. Wait is over, finally it has arrived. Google and the open source community has put a lot of hard works to Flutter 2.0 and now they have released Flutter 3.0 with much more exciting features. Today we look into the new features that Flutter has in this major changes!

A collection of tools is always necessary to have when building and launching applications. Data storage, cloud functions, authentication and app testing for different platform requires comprehensive third-party tools such as Firebase, AWS Amplify and AppWrite.

For example, Firebase is an amazing back-end platform backed by Google which accelerate app development process providing powerful backend infrastructure for the applications.

Flutter and Firebase work hand-in-hand to help you build web and mobile apps. This is not a surprise for any of us as we know both these products are belongs to one company, Google.

How to connect flutter with firebase backend

Majority of Flutter developers use Firebase in their apps. Over the last few releases Flutter team have been working with Firebase to expand and provide better integration for Flutter as a first-class integration. 

 helps to track real-time fatal errors with the same set of features through Firebase’s real-time crash reporting service. Firebase Crashlytics is a lightweight, realtime crash reporter that helps you track, prioritize and fix stability issues that erode your app quality.

According to a 2021 developer survey, Flutter is the most popular 

 mobile framework used by majority of global developers. Flutter desktop support is still far behind compared to mobile support specially in its early releases.

Flutter was stable for Windows in previous versions and now it supports both linux and macOS as well. Now you can build apps for all desktop platforms without ever worrying of breaking your code. You can build production ready applications for all platforms using flutter.

Flutter apps now contribute 120Hz refresh rates that were previously limited to only 60Hz on iOS devices. This increase helps to have a smoother experience on iOS devices specially during animations.

Finally the newest release supports for fordable mobile devices. The new widgets and its core features will bring more natural experiences to fordable devices.

Flutter web now automatically detects and uses the ImageDecoder API in browsers that support it. As of today, most common browsers have added this API. Because of ImageDecoder API the image rendering for web is more efficient and the speed is twice faster than the previous versions. In overall the performance is major improvement for new update.

The new lifecycle API provides you flexibility to control over the Flutter framework. Now you can run Flutter apps in headless mode on the web. This gives you the flexibility to control the bootstrap process of your app from hosting HTML page, and check Lighthouse analysis for the performance of your app. For example you could preload the content while showing a login screen or a progress bar! You can get more information, 

Material 3 is known as the next generation of Material Design. Flutter 3 does not have full support for material 3 yet, only certain widgets support material 3. Flutter 3 provides opt-in support for Material 3. Maybe in future release, all the widgets might have material 3 support and could be the standard default for flutter.

Theme extension feature enable themes more convenient. It enables customizing theme by adding custom colors and custom color names to the flutter theme. You are not stuck with default colors that comes with flutter anymore. It is now much easier than ever to add our own color to flutter apps.

The Flutter team has released an easy-to-use casual games tool kit for casual gamers. It is a specialized starter kit of various templates which mean you can write your 

Now you can deploy casual games much quickly on multiple platforms. 

 repo has pre-integrated modules for in-app purchases, Ads & more. However if you want to develop 3D games, then flutter is not the right choice rather you want to go for Unity 3D.

Dart 2.17 stable was announced along with Flutter 3.0 with many long-awaited features that developers have been waiting for. Dart is the secret sauce behind Flutter, and any improvements in Dart would help improve Flutter’s development.

According to Dart and Flutter team, Dart 2.17 adds major new support for members on enums, refines how you can use named arguments in constructors, and makes code for forwarding parameters to superclasses much less verbose and repetitive. We will look into the new features of Dart 2.17 in more details in the coming articles.

What’s new in Flutter 3

It is already halfway through 2022 and if you are still looking for any VSCode themes, then here is the list of some of the most popular VS Code themes for 2022 so far.

List of the top 5 VSCode themes – My choice:

One of the best dark theme port in the marketplace. Atom’s iconic One Dark theme for Visual Studio Code is so popular among developers who loves dark mode.

It has visually pleasing styles and well-blended color schemes, therefore it is considered as one of the most used themes, nearly 3.3 million download in the market place as of today.

It is popular theme for developers who prefer GitHub’s classic themes. It comes with various new styles, simply you need to select any available theme during installation process. You can choose one of these themes.

: They might not get updated frequently and are kept for legacy reasons:

This theme is fine-tuned for those of us who really like to code late at night. It comes with both dark (Night Owl) and light theme (Light Owl). The color choices, background, and styling are perfectly suitable for developers who are having difficulties in low-light circumstances.

It is also a beautiful theme. The font (Hermit) and colors used by the theme is easy on the eyes. The colors used by this theme for highlighting code are Aqua Blue, Purple, Dark Yellow, and Pinkish-Red.

This is simply a port to align the style of the theme with the default VSCode chrome that cannot be changed atm. It has both dark and light theme options, however it was last update long time ago, in 2016.

 and these are just few. Must have themes at least in my opinion. Maybe you have a better choice and if you have any let us know your favorite theme that make you more productive.

If you want to know about best VSCode extensions for 2022 then please read this article.

Top 11 Best VS Code Extensions you Need in 2022!

Best Free VS Code Themes 2022

We are all very aware of the fact that the internet has changed our lives in a number of ways. Nowadays, we live in a world where we constantly have to deal with distractions present on social media or messaging apps for hours at a time.

However, there are extensions which can help us with this problem by cutting down time spent on certain tasks and getting stuff done. If you love working on your computer and want to save some time, then this list of 

 is a perfect one for you. Installing these extensions can make your life a breeze as they are designed to save hours of work into minutes.

Here are 8 of the best Google Chrome extensions that help to save you hours of work into minutes.

This is an amazing extension that lets you turn any process into a step-by-step guide, instantly. With Scribe you can save Hundreds of thousands of valuable time. It works on almost all major browsers.

Turn on the Scribe recorder, go through your process, then turn off the recording. It automatically creates a how-to guide, complete with screenshots, instructions and clicks. You can easily add, edits and customization to your recorded screenshot and share with team members just wit a click.

The fastest bug reporting tool. Cut your bug reporting time by 20x. Report bugs in few seconds, without disrupting your workflow. Capture your screen plus developer logs in one click. It’s so easy and Integrates tightly with most of the issue trackers & tools. Jam auto-magically creates bug reports with all the info engineers need, including:

It is an open source web design debug tools built with JavaScript. It gives power to designers and content creators by bringing design tool interactions and hotkeys to the browser. Not only it gives powers to designers and content creators, It has more features such as:

Edit text, images or style any page in any state.

Inspect styles, spacing, distance, accessibility and alignment

Nitpick layouts & content, in the real end environment, at any device size

HyperWrite generates content and provide suggestions as you write. It has advanced AI algorithms help you write better and faster than ever before. With HyperWrite, you can focus on what’s really important. You can use HyperWrite to write blog posts, articles, emails, and more.

Record & Transcribe meetings & calls directly from the browser Record & transcribe your Google meet meetings directly from the browser. With this tool you do not have to worry about missing any important conversation ever again. You can stop taking manual notes and focus during the meeting because Fireflies automatically capture all your conversations on Google Meet and organizes them in your workspace. Get time-stamped notes with speaker detection and also audio playback.

This is a powerful tool which helps to find out the technology stack of any website. It creates lists of websites that use certain technologies, with company and contact details. Its APIs provide instant access to website technology stacks, company and contact details, social media profiles, email verification and more. Empower your sales and marketing teams:

This is a perfect tool for any web developer. You can use this tool for UX check, design and development review, user testing and more. One beautiful benefits of using this extension is to make a smooth collaboration with developers directly on any live website. You can leave notes, assign actionable change requests, do UX or copy reviews in a user-friendly and collaborative way. It has features such as:

Share the project link, invite team members or export your findings to PDF.

Motion DevTools is a browser extension useful for web developers like you. With this tool you can inspect, edit and export animations made with CSS and Motion One. Developers able to add, move and remove keyframes in single click. You can export any animation into CSS transitions, CSS animations in few clicks. The best part of this tool is your edits will be reflected on the page in real-time.

Thats it! Hope you find these information useful. Feel free to share more similar chrome extension.

8 Must Have Google Chrome Extensions that Save Hours of Work into Minutes 

In this short article, I will look at the best 6 free web hosting sites for developers options. These are my choices for 2022 to host websites quickly as possible. If you have any other hosting services on your list feel free to share with us.

Vercel is a platform for static sites and frontend frameworks, built to integrate with your headless content, commerce, or database. Vercel combines the best developer experience with an obsessive focus on end-user performance. Our platform enables frontend teams to do their best work. Vercel has rating of 9.3k stars on Github.

Netlify is a remote-first cloud computing company that offers a development platform. It provides various services including serverless backend services for web applications and dynamic websites. The platform is built on open web standards, making it possible to integrate build tools, web frameworks, APIs, and various web technologies into a unified developer workflow.

Netlify builds, deploys and hosts your front-end. It is one of the fastest method to combine your favorite tools and APIs to build the website sites, stores, and apps for the web. Netlify has 271 repositories available.

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. It supports several programming languages including Java, PHP, Scala and G. It provides services and tools to build, run, and scale web and mobile applications. Heroku has 842 repositories available on Github.

Render is a unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git. It has lightning-fast CDN and provides huge amount of bandwidth. It is the fast method to host all your web apps, static sites, APIs, containers, jobs and databases.

Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud. It is made for any language, for projects of any size. Railway is the cloud that takes the complexity out of shipping software. It provides huge amount of bandwidth.

You can use GitHub Pages to host a website about yourself, your organization, or your project directly from a repository on GitHub.com. It is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

There you go. One quick note, these service providers also have different paid services, in addition to free services. So if you want to upgrade, then it is highly recommended.

Top 6 FREE Web Hosting sites for Developers

In this article, we are going to take a look at 7 of the best web development websites that will change the way you do web development. This is helpful for people who are developing websites and have to test out each version of their website with different data, pages, and designs. Web development is constantly changing due to the rapid evolution of technologies. A website is never a one-man job, but there are many individuals that can help you with it. But with the help of these technology development process has become easier than ever. So lets begin to explore.

Report bugs in few seconds, without disrupting your workflow. Capture your screen plus developer logs in one click. It’s so easy and Integrates tightly with most of the issue trackers & tools. Jam auto-magically creates bug reports with all the info engineers need, including:

The AI powered tool extract Code from Any Video. Simply select the code you want to copy from any video you are watching and paste it in your text editor. You can extract codes from any video on Youtube, coursera, udemy or on a live coding session on zoom. It supports all programming languages, keeps the proper indentation of the code.

You can easily find the right code snippet to use without you having to jump from your environment, open multiple tabs, and scroll through pages of documentation and resources. It works with every Text Editor, IDE, Web Browser.

Another AI powered tool. Figstack is trained with billions of lines of code it will supercharges your ability to read and write code across languages. You can understand and document code lightning fast using this powerful tool.

If you need to convert Python to Go or Ruby to Javascript then this is the go for tool. The 

 function lets you reliably swap from one language to another. It can easily automate documentation for your functions.

With CodinGame, programmers able to improve coding skills by solving the challenging problems, learn new concepts, and get inspired by the best developers. It helps to build and strengthen your developer profile and prove your worth as a developer on most top companies in the industry.

Turn your Figma designs to production-ready frontend code for mobile and web apps. Develop and deploy your apps 3-4x faster with your existing design tools, tech stacks & workflows. Locofy integrates seamlessly to go from Designs to Code to Deploy. Export your code or push to Github in your preferred settings (CSS Modules, Tailwind, CSS, Typescript, JavaScript). You could also deploy with Netlify or Vercel.

SourceAI is a tool that can generate code for you in any language from a plain text description. Just describe what your application needs to do in plain text (English, French, German, Spanish, etc.) and start using it in a few seconds. You can generate code in any programming language. The underlying technology used by SourceAI is based on the GPT-3 language model. Development process is complex and time consuming, with SourceAI:

Find out the technology stack of any website. Create lists of websites that use certain technologies, with company and contact details. Its APIs provide instant access to website technology stacks, company and contact details, social media profiles, email verification and more. Empower your sales and marketing teams:

Thats it! Hope you find these information useful. Feel free to share more similar websites.

7 websites that will change the way you do web development

In this tutorial, we’ll be using Next.js and TailwindCSS to build a responsive global navigation bar for your next project. This tutorial will walk you through the steps to set up your project, create components and add a global navbar in Next.js project using TailwindCSS!

The goal of having a mobile navigation is to make sure that content is always at users’ fingertips as they browse your application regardless of the devices.

Next.js is a framework that makes the creation of React apps extremely easy and efficient.

Next.js is an open-source development framework built on top of React.js. It is React based framework which have various functionalities to power up both server-side rendering and generating client side static websites.

Next.js gives you the best developer experience with all the features it present for any production ready apps. Features such as hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching give developers a seamless development experience.

You can learn more about Nextjs and its newest features 

TailwindCSS is a utility-first CSS framework that helps you create responsive layouts and design systems with ease. TailwindCSS is utility-based low level CSS framework intended to ease building web applications much faster and more efficiently. 

 is so popular nowadays, because it helps build websites without ever leaving your HTML files.

The purpose of this post is to show how easy and intuitive it can be to make a responsive navbar in NextJS with the help of TailwindCSS. So let’s begin. Before we start writing some code, we need to do some initial configuration for tailwind and Nextjs.

To start with, we need to install NextJS with NextCli, using npm or yarn. In our case we prefer to use npm. Start by creating a new Next.js project if you don’t have one set up already. Follow this 

 for complete installation guide of Nextjs and TailwindCSS project.

Next, create few pages for the application. We are having home, about, projects and contact page. In the pages folder we are going to create all the pages so we can call them inside the navebar. In addition, create a component called MenuItems.js. Using props we will pass showMenu function and active status.

MY BLOG

What’s new in Flutter 3

Best Free VS Code Themes 2022

8 Must Have Google Chrome Extensions that Save Hours of Work into Minutes

Top 6 FREE Web Hosting sites for Developers

7 websites that will change the way you do web development

Responsive Mobile Navigation With NextJS and TailwindCSS