Flutter:Best tools and environment for Development

Topics covered in it

• Best UI UX tools for developing prototype or wireframe

• Best Ide to use

• Tools to deploy CI/CD (Continous Integration and Continous Development)

• Best blogs to follow and get content from

• Latest Tools used for setting up 2d Animation

I am a Flutter Developer like you and I understand how much time consuming it is to set up a workspace with perfect tools and plugin to make your development fast.

So here is a list of tools and practices I use when I develop projects using Flutter

UI, UX Designing tools

Supernova:

Bring mobile app UIs to life in minutes by converting Sketch and Adobe XD designs into native frontend code for Flutter, iOS, Android and React Native.

Presently supernova is only available for Mac OS, It helps in Production-ready code generation basically you just need to pass on your wireframe or design one in it and it will give you a flutter code for it.

Adobe Xd:

Adobe XD is a UI/UX design solution for website and mobile apps creation. Design, prototype, and share. So if you want to do wireframing or making prototypes with a good number of plugins for all sorts of functions starting from colors to fonts then Adobe xd is for you.

In general, Adobe xd is a good prototyping tool but what great it brings to support flutter is

XD to Flutter Plugin.

Using the Flutter plugin in XD is straightforward. You can either export an individual drawing or component or an artboard. Here’s how.

Start by installing the Flutter exporter plugin. From Adobe XD, choose Plugins > Discover Plugins, and search for Flutter. Once you’ve installed it, you can display the UI Panel shown in the screenshot above by choosing Plugins > Flutter > UI Panel.

Now add the adobe_xd package to your Flutter project by including it in your pubspec.yaml app manifest. This package provides helper functions to minimize boilerplate in the generated XD code.

To export a single element, simply select the individual widget you’d like to export to Flutter and choose the Copy Selected button from the UI panel. This copies the relevant Dart code to your clipboard, which you can use as the basis for a stateless or stateful widget:

IDE's

DartPad

If you need an ide to start learning dart then DartPad is the one for you

What it is

DartPad is a web-based tool that helps you to develop dart code online. It provides you with an opportunity to discover how strong dart is and why flutter uses it.

Android Studio:

It's basically an Ide for Android development.So if you are one who are using basically flutter to develop Android apps then it is for you.It supports most of the android app development specific languages starting from java, Kotlin for Android and then coming to dart for flutter.

Download it

Advantages

• Free

• Smart coding assistance for Dart — includes code completion, formatting, navigation, refactorings, and more

• Built-in debugger

• Suggests ways to automatically fix certain code issues with a red bulb indication.

IntelliJ IDEA

Its is a great ide for general as well it has support for many languages

What it is

A favorite IDE for many due to its plentiful plugins and just all-around built-in feature set, and it’s a prime leader if you’re going to develop with Dart. And all the basic features which a normal IDE has it is constantly in development and new features come very often in it.

CI/CD(Continuous Integration and Continous Development)

Codemagic is a tool that helps you to build and test your app after every commit, notifies selected team members, and releases to end-user. Automatically.

It is configurable with all the modern platforms such as

• Github

• Gitlab

• Bitbucket

Supporting Tools

Firebase App Distribution

Basically it comes handy if you want to give your app to testers at prerelease so that they can find bugs and tell developers if any issues are available in the application.

Firebase App Distribution gives a holistic view of your beta testing program across iOS and Android, providing you with valuable feedback before a new release is in production. You can send pre-release versions of your app using the console or your CI servers, and installing your app is easy for testers.

Fast and flexible

Getting started with App Distribution is a breeze. There are no SDKs to install, forms to fill out, or review processes to go through. Simply onboard your app to Firebase and start sending builds via the console or the command line.

check out the video on it for a complete explanation

Fastlane

Fastlane is a tool suite which you can connect with your existing CI workflow.

What problem does it solve

Fastlane has a tone of features but three major problems which it solves is

Screenshots

code Signing

Automation Deployment

For iOS: Screenshots

Screenshots generation for all the screen for all the different types of languages and it automatically makes a folder of those images which can be uploaded to iTunes for iOS and play store for Android

To do so Fastlane has a tool called snapshot and you tell the tool how to navigate through your app and take screenshots, It will go through all the devices and languages and generate Screenshots for you and it generates a folder which can be directly uploaded to iTunes directly using a tool called deliver.

For Android: Screengrab

Screengrab generates localized screenshots of your Android app for different device types and languages for Google Play and can be uploaded using supply.

Fledge

Fledge creates and manages your pipelines for Flutter apps, so you don’t have to. It takes care of the core tasks involved in getting the product of your latest code into users' hands automatically.

To make it easy to get started with automation, Fledge implements two simple workflows. The beta workflow and the release workflow.

These workflows can be customized and new workflows can be created as required.

Automatically build, test, sign and release your Flutter app to both Apple and Google stores.

Supports public and private build servers in both the cloud (Travis, Cirrus, etc…) and in-house (Jenkins, GitLab, etc…).

Check out the medium blog on it with a full explanation of how to set it up for flutter.

Online Blogs and resources for Flutter

• Fidev:

• https://fidev.io/

I use them to get Code and implementation of many cool features

• Managing UI state in Flutter with MobX and provider — Dissecting a Hacker News app

• Flutter Animated Series: Animated Containers

• When Firebase meets BLoC Pattern

• Developing for Multiple Screen Sizes and Orientations in Flutter (Fragments in Flutter) by Deven Joshi

• Flutter, what are Widgets, RenderObjects, and Elements? by Norbert

Developer Talks

• Pragmatic State Management in Flutter (Google I/O’19)

• Beyond Mobile: Material Design, Adaptable UIs, and Flutter (Google I/O’19)

• Flutter / AngularDart — Code sharing, better together (DartConf 2018) by Paolo Soares

Shortcuts for Android Studio, VS Code

• Flutter — Visual Studio Code Shortcuts for Fast and Efficient Development

• Visual Studio Code Tips and Tricks

• Key Bindings for Visual Studio Code

• Flutter — IDE Shortcuts for Faster Development (Android Studio/IntelliJ)

• HowToDoThisInFlutter.com

Flutter 2D Vector Animation

Flare

Flare is a product available from 2Dimensions that allows you to do vector design and animation and incorporate this within your Flutter application.

check out the package on pub.dev Flare_Flutter

So, You just design the vector image and using the timeline in flare tool we give animation to it after that we can export it and before that add the required dependency in pubspec.yml

It was updated and now its rive

This is where Rive comes in. You may have heard of them under different names, 2Dimensions and Flare. 2Dimensions was the old name for the company and Flare was the old name for the editor itself. Today, both are known as Rive.

check out different resources

Author

Prashant Sharma