DEV Community: Sagar Shende

How To Add Firebase To Flutter For Android, iOS, Web And Mac | Setup Firebase in Flutter App

Sagar Shende — Sun, 23 Jul 2023 18:12:25 +0000

In this Video, I show you How to Add Firebase To Flutter For Android, iOS, Web And Mac.

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the Tutorial, Please leave me a comment and I’ll do my best to answer it.

How to Add Firebase to Flutter App (ANDROID, IOS) 2023

Sagar Shende — Fri, 14 Jul 2023 13:51:28 +0000

In this Video, I show you How to Add Firebase Setup to Flutter app for Android & IOS 2023.

If you have any doubt Or FeedBack, Do let me know in the comments Section.

Thank You :-)

How to Use Shared Preferences to Stored Data in Flutter

Sagar Shende — Thu, 13 Aug 2020 12:37:24 +0000

Shared preferences flutter is for Storing simple data on Device for Reading & writing Simple Key-value pairs in iOS & Android.

In Simple Example, Let Just Say You Just Want to Stored Simple Data on Phone And Later You can refer that Data whenever You Launch that App then Shared preferences will help you to Stored data on the Phone.

Shared preferences in flutter NSUserDefaults on iOS & macOS, and SharedPreferences on Android.

Shared Preferences Flutter in Android & iOS Watch Video:-

For this project, we are will Need Shared_prefernces Package.

Let’s Start the Tutorial

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

💻 Installation

First, you will need to add the package name shared_preferencesinto Pubspec.yaml

In the dependencies: section of your pubspec.yaml, add the following lines as Shared preferences:

Now run Flutter package get in your terminal which we’ll install shared_preferencespackage.

import 'package:flutter/material.dart';
import 'package:shared_preferences_flutter/main.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: !isFirstScreen ? IntroScreen() : HomeScreen(),

    );
  }
}

In Above Code We Create MyApp StatefulWidget And in the home properties we have isFirsScreen.

to Stored Boolean Value we Need to Create Variable isFirstScreen as Below:

  bool isFirstScreen = false;

As Set As False because the First time it’s going to show me Introduction Screen.

After that We Need to Create Introduction Screen & Home Screen

Introduction Screen

class IntroScreen extends StatefulWidget {
  @override
  _IntroScreenState createState() => _IntroScreenState();
}

class _IntroScreenState extends State<IntroScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Intro Screen"),
          RaisedButton(
            onPressed: () {},
            child: Text("GO to HomeScreen"),
          )
        ],
      ),
    ));
  }
}

In Above Intro Screen we Implement Text widget & Raised Button After that you need to add OnPressed Functionality To Navigate from Intro Screen to Home Screen For that Create gotoHomeScreen()

  void gotoHomeScreen(context) async {
    ///Shared Preferences wiill stored types String , int , bool, double
    SharedPreferences pref = await SharedPreferences.getInstance();
    await pref.setBool('seen', true);
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (context) => HomeScreen(),
      ),
    );
  }

So in the above code, We Add Shared preferences get an instance of the & then using pref variable we are set bool value Key & Value As a ‘seen’ and true

Home Screen

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "Home Screen",
          style: TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

And then We need to get That Key in MyApp for that We need to create checkFirstScreen in the MyApp Widget.

with help of getBool method we Getting An Key as ‘seen’

  Future<void> checkFirstScreen() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    //if First statement is Null Or NO Value then it will give us Second Value
    bool seen = (pref.getBool('seen') ?? false);
    if (seen) {
      setState(() {
        isFirstScreen = true;
      });
    } else {
      setState(() {
        isFirstScreen = false;
      });
    }
  }

Full Code:-

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isFirstScreen = false;

  @override
  void initState() {
    super.initState();
    checkFirstScreen();
  }

  Future<void> checkFirstScreen() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    //if First statement is Null Or NO Value is returning then it will give us Second Value
    bool seen = (pref.getBool('seen') ?? false);
    if (seen) {
      setState(() {
        isFirstScreen = true;
      });
    } else {
      setState(() {
        isFirstScreen = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: !isFirstScreen ? IntroScreen() : HomeScreen(),
    );
  }
}

class IntroScreen extends StatefulWidget {
  @override
  _IntroScreenState createState() => _IntroScreenState();
}

class _IntroScreenState extends State<IntroScreen> {
  void gotoHomeScreen(context) async {
    ///SHare String , int , bool, double
    SharedPreferences pref = await SharedPreferences.getInstance();
    await pref.setBool('seen', true);
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (context) => HomeScreen(),
      ),
    );
  }
///Sagar shende
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Intro Screen"),
          RaisedButton(
            onPressed: () {
              gotoHomeScreen(context);
            },
            child: Text("GO to HomeScreen"),
          )
        ],
      ),
    ));
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "Home Screen",
          style: TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

You can see the full source code of the project ** here.**

https://github.com/sagarshende23/shared_preference_flutter

🤝 Show Some Support

If you liked the app, show some love Here⭐️

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the video, leave me a comment and I’ll do my best to answer it.

original post here

how to change App Package name Or Application ID in flutter

Sagar Shende — Thu, 04 Jun 2020 11:54:11 +0000

I will show you how to change the App Package name Or Application ID in Flutter with Easy Way. Every App has a Unique Application Id that Looks like com.example.yourappname.

Application Id is used to Identify your app in the Google PlayStore.

At the Time new version of your app, the Application Id Or Package name must be Same As an Original Apk.

Watch Full Video:- https://youtu.be/ycJ1VsOf8_Q

Official Documentation Set the Application ID:-
https://developer.android.com/studio/build/application-id

Package link(change_app_package_name):-
https://pub.dev/packages/change_app_package_name

Update The Following Files
[x] Update AndroidManifest.xml files for release, debug & profile
[x] Update build.gradle file
[x] Update MainActivity file. Both java & kotlin supported.
[x] Move MainActivity file to new package directory structure
[x] Delete old package name directory structure.

How to Create Liquid Swipe Animation in Flutter | Liquid Swipe Flutter

Sagar Shende — Wed, 08 Jan 2020 07:14:02 +0000

Today tutorial, I am going to show you how to create Liquid Swipe Animation in Flutter. liquid Swipe animation is amazing and its Created for iOS Platform and for React Native Platform. this animation Or Liquid Swipe Animation is Inspired by Cuberto.

For this animation, we are will Need liquid_swipe Package. Liquid Swipe is the Unveils a New Page like Liquid Animation Just like the Above animation.

📱 What we’re going to Build

flutter liquid Swipe

How to Create Liquid Swipe Animation in Flutter

Let’s Start the Tutorial

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

💻 Installation

First, you will need to add package name liquid_swipe into Pubspec.yaml

In the dependencies: section of your pubspec.yaml, add the following lines as :

liquid_swipe: ^1.3.1

Now run Flutter package get in your terminal which we’ll install liquid_swipe package.

import ‘package:liquid_swipe/Constants/Helpers.dart’;
import ‘package:liquid_swipe/liquid_swipe.dart’;

liquid_swipe.dart for LiquidSwipe() method and Helpers.dart for WaveType animation so you can either select circularReveal Or liquidRevel Animation.

Before We Start Coding, You Need to Download Assets For this App.

Download Assets

For that Create a Separate Folder and give a name ‘ assets’ to it & add Assets you can Download Assets File From Here

and Add this Below line into Pubspec.yaml file

assets:
  - assets/img/

fonts:
  - family: Product Sans
    fonts:
      - asset: assets/font/Product_Sans_Bold.ttf
      - asset: assets/font/Product_Sans_Regular.ttf

We need to Create a Simple main.dart file to contain our MyApp widget just like Below Snippet

import 'package:flutter/material.dart';
import 'package:liquid_swipe/Constants/Helpers.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LiquidSwipe(),
      ),
    );
  }
}

Okay, In the LiquidSwipe() method we need to Add _ pages, enbaleloop, fullTransitionValue, enableSlideIcon, waveType, positionSlideIcon. _

LiquidSwipe(
          pages: pages,
          enableLoop: true,
          fullTransitionValue: 300,
          enableSlideIcon: true,
          waveType: WaveType.liquidReveal,
          positionSlideIcon: 0.5,
        ),

After that Create three Container for 3 Pages where we will Create Container widget For Each Separate pages.

Before we Start Creating Pages we Need to create Textstyle For Text Widget Just Like Below Code Snippet in a MyApp widget.

static const TextStyle goldcoinGreyStyle = TextStyle(
     color: Colors.grey,
     fontSize: 20.0,
     fontWeight: FontWeight.bold,
     fontFamily: "Product Sans");

 static const TextStyle goldCoinWhiteStyle = TextStyle(
     color: Colors.white,
     fontSize: 20.0,
     fontWeight: FontWeight.bold,
     fontFamily: "Product Sans");

 static const TextStyle greyStyle =
     TextStyle(fontSize: 40.0, color: Colors.grey, fontFamily: "Product Sans");
       static const TextStyle whiteStyle =
     TextStyle(fontSize: 40.0, color: Colors.white, fontFamily: "Product Sans");

 static const TextStyle boldStyle = TextStyle(
   fontSize: 50.0,
   color: Colors.black,
   fontFamily: "Product Sans",
   fontWeight: FontWeight.bold,
 );

 static const TextStyle descriptionGreyStyle = TextStyle(
   color: Colors.grey,
   fontSize: 20.0,
   fontFamily: "Product Sans",
 );

 static const TextStyle descriptionWhiteStyle = TextStyle(
   color: Colors.white,
   fontSize: 20.0,
   fontFamily: "Product Sans",
 );

So this will be a Six TextStyle is Required for the creating a Pages text style.

final pages = [
  Container(),
  Container(),
  Container(),
];

#FirstScreen

Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldcoinGreyStyle,
                ),
                Text(
                  "Skip",
                  style: goldcoinGreyStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              // mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: greyStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionGreyStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),

#SecondScreen

Container(
      color: Color(0xFF55006c),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/secondImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gaming",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Excepteur sint occaecat cupidatat\n"
                  "non proident, sunt in\n"
                  "culpa qui officia",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),

#ThirdScreen

Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),

#Okay So this Our Final Code

import 'package:flutter/material.dart';
import 'package:liquid_swipe/Constants/Helpers.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const TextStyle goldcoinGreyStyle = TextStyle(
      color: Colors.grey,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
      fontFamily: "Product Sans");

  static const TextStyle goldCoinWhiteStyle = TextStyle(
      color: Colors.white,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
      fontFamily: "Product Sans");

  static const TextStyle greyStyle =
      TextStyle(fontSize: 40.0, color: Colors.grey, fontFamily: "Product Sans");
        static const TextStyle whiteStyle =
      TextStyle(fontSize: 40.0, color: Colors.white, fontFamily: "Product Sans");

  static const TextStyle boldStyle = TextStyle(
    fontSize: 50.0,
    color: Colors.black,
    fontFamily: "Product Sans",
    fontWeight: FontWeight.bold,
  );

  static const TextStyle descriptionGreyStyle = TextStyle(
    color: Colors.grey,
    fontSize: 20.0,
    fontFamily: "Product Sans",
  );

  static const TextStyle descriptionWhiteStyle = TextStyle(
    color: Colors.white,
    fontSize: 20.0,
    fontFamily: "Product Sans",
  );

  final pages = [
    Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldcoinGreyStyle,
                ),
                Text(
                  "Skip",
                  style: goldcoinGreyStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              // mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: greyStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionGreyStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
    Container(
      color: Color(0xFF55006c),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/secondImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gaming",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Excepteur sint occaecat cupidatat\n"
                  "non proident, sunt in\n"
                  "culpa qui officia",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
     Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "GoldCoin",
                  style: goldCoinWhiteStyle,
                ),
                Text(
                  "Skip",
                  style: goldCoinWhiteStyle,
                ),
              ],
            ),
          ),
          Image.asset("assets/img/firstImage.png"),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Online",
                  style: whiteStyle,
                ),
                Text(
                  "Gambling",
                  style: boldStyle,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  "Temporibus autem aut\n"
                  "officiis debitis aut rerum\n"
                  "necessitatibus",
                  style: descriptionWhiteStyle,
                ),
              ],
            ),
          )
        ],
      ),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LiquidSwipe(
          pages: pages,
          enableLoop: true,
          fullTransitionValue: 300,
          enableSlideIcon: true,
          waveType: WaveType.liquidReveal,
          positionSlideIcon: 0.5,
        ),
      ),
    );
  }
}

You can see the full source code of the project here .

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the Tutorial, Please leave me a comment and I’ll do my best to answer it.

How to Create Liquid Swipe Animation in Flutter

Sagar Shende — Wed, 01 Jan 2020 14:04:19 +0000

In this tutorial, how to Create liquid Swipe Animation in a flutter inspired by Cuberto. Liquid swipe is the revealing clipper to bring off an amazing liquid-like swipe to stacked Container.

📱flutter liquid Swipe:- https://alltechsavvy.com/liquid-swipe-animation-in-flutter/

⚡⚡Best Flutter Development Tools⚡⚡
https://alltechsavvy.com/best-flutter-development-tools/

How to Create Liquid Swipe Animation in Flutter | Liquid Swipe Flutter

🎯📢Github Profile: https://github.com/sagarshende23

AllTechsavvy - Website Promo 🤖🤖🤟🤟

Sagar Shende — Thu, 26 Dec 2019 17:32:52 +0000

👉👉👉Visit At:- https://alltechsavvy.com/👈👈👈

⚡⚡Best Flutter Development Tools⚡⚡
https://alltechsavvy.com/best-flutter-development-tools/

🔥Github Profile: https://github.com/sagarshende23

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Enjoyed the video? Please leave a LIKE 👍 to show your support and appreciation:
▶️ SUBSCRIBE: https://www.youtube.com/c/AllTechSavvy?sub_confirmation=1

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Social Media Links🎉🎉

► Twitter: https://twitter.com/sagarshende95
► Facebook: https://www.facebook.com/AllTechSavvyOfficial/

11 Best Flutter Development Tools you will need as a beginner

Sagar Shende — Sat, 14 Dec 2019 07:54:20 +0000

In this tutorial, I am going to show you some of the Best Flutter development tools available in the market which will help you to make Development Productivity Faster and Build Better Applications. Flutter is a Framework from google for Creating Cross-platform mobile apps.

Flutter is a Google UI Framework for Developers to Create Native applications for Mobile, Web, and Desktop Just in a Single Codebase. Flutter is Used by Millions of Developer Worldwide to create beautiful UI for their applications.we’ll look at some of the Best flutter development tools that can greatly improve your workflow and help you reduce development time.

Okay Without wasting any time. Let’s start in and Discover lots of New & awesome Flutter tools to develop your flutter apps like a legend.

Best Flutter Development Tool

#11. panache

Panache will help you to create beautiful themes for your flutter apps, you can customize colours & shapes in the apps.

Website: https://rxlabz.github.io/panache

10.Codemagic

Codemagic is another awesome tool that’ll boost your flutter app development process. Cinemagic will test and release your flutter apps without issue & with no configuration. with the help Codemagic, you can automate the whole build process, test and release process of your flutter apps

Website: codemagic.io

#9.Appetize

Appetize is an Online web-based android Emulator and iOS simulator. Appetize will run Native mobile Apps in the browser with HTML and Javascript. which is easy to maintain and tacks.

Website: appetize.io

#8.TestMagic

TestMagic is a Free Companion app just like Codmagic for Fast & Easy testing of your android and iOS builds. Testmagics helps to distribute your builds and Testing android and Ios Apps on real devices as well as provide Feedback to your projects.

Website: testmagic.io

#7. Screenshots

A screenshot is a command-line utility for capturing Screenshots into the status bar placed in the device frame. Screenshots can be integrated into flutter to work transparently into Android and iOS.

Website: https://github.com/mmcc007/screenshots

#6.Supernova

Supernova Recently Introduced Support For Flutter Platform in Flutter interact. Supernova is a tool that helps you to Generate UI Code for Flutter. it’s support for material Design widgets a style manage that can bring the concepts of token and style into a flutter, you can have flutter app running side by side with Supernova and Change happen real-time.

Supernova will save your time by importing your Sketch Or Adobe Xd file, Select flutter as your export platform which will convert UI design into Production-ready Code.

Website: supernova.io

#5. Adobe Plugins For Flutter

Adobe Recently Released Plugins for Adobe Xd in Flutter Interact, which will Generate Code for Creating apps with flutter which is based on UI design in Adobe XD. this is Collaboration Between Google and Adobe that will be Expected to Released Early 2020. So Plugins will be Open Source According to Adobe.

Website: theblog.adobe.com