The road to cross-platform app development has been jam-packed lately, the main reason being its alluring nature of single codebase where developers have to write code once and that code can be used to develop apps for different platforms. I know! This is fun as,

1. Single Codebase
2. Reduced Development time
3. Reduced Development Cost

and of course, there are disadvantages too, no doubt.

Flutter is the latest entry to the cross-platform app development, developed by Google and it’s gaining popularity day by day standing strong against its other competitors because of certain factors:

1. Development Time
2. Runtime performance
3. Good tooling support

However, apart from the various merits that it had established there are few demerits, one being Limited set of libraries.
Even though Flutter is backed by Google but being a relatively new framework it lacks support for 3rd party frameworks and any cross-platform environment depends on the native platform features such as Camera, Bluetooth, Location, etc. which can be accessed using Plugins.

Plugins?

Plugins are the wrapper of the native code like android(java or kotlin) and iOS(swift or Objective C). Plugins are written in platform-specific code to access the platform-specific features.

Flutter does support using packages and plugins contributed by other developers to its ecosystem. You can access Flutter packages and plugins from here.

How do things work underneath the hood?

Flutter’s platform specific API depends on message passing technique, this takes place in two steps. Firstly, Flutter uses the Platform channel as the medium to communicate between the Flutter app and host, the host being the iOS or Android part of the app. Secondly, the host receives the messages through the Platform channel and then it invokes the platform-specific APIs using the native programming language of the platform and sends back the feedback to the Flutter app asynchronously.

In detail, on the client side, the MethodChannel is used to send the messages and on the host side, MethodChannel on Android and FlutterMethodChannel on iOS is used to receive and send messages. All of this is done to make sure that the least amount of boilerplate code is used.

Plugins developed by FlutterDevs team:

The team at FlutterDevs had developed their own plugins of basic day to day needs like an image plugin which picks the images from the storage called image_galley, a QR plugin which scans and generates qr code, a camera plugin, and a location plugin, let’s see about them in detail:

image_gallery:

A flutter plugin to show all your images from the storage. You can get the plugin from here.

usage:

Future<void> loadImageList() async {
    List allImageTemp;
      allImageTemp = await FlutterGallaryPlugin.getAllImages;


    setState(() {
      this.allImage = allImageTemp;
    });
  }

qr_utils:

A flutter plugin to generate and scan QR codes. This plugin can be used to scan 1D barcode and 2D QR code. You can get the plugin from here.

usages:

1. Scan QR

final content = await QrUtils.scanQR;

2. Generate QR

Image image = await QrUtils.generateQR(content);

camera_utils:

A flutter plugin which does various works for you, it helps capture an image, pick an image, capture a video, pick a video and pick thumbnail from a video. You can get the plugin from here.

usages:

1. Capture an Image

final path = await CameraUtils.captureImage;

2. Pick an Image

final path = await CameraUtils.pickImage;

3. Capture a Video

final path = await CameraUtils.captureVideo;

4. Pick a Video

final path = await CameraUtils.pickVideo;

5. Pick a thumbnail from a video

Future<String> thumbPath = CameraUtils.getThumbnail(path);
   thumbPath.then((path) {
     setState(() {
       _thumbPath = path;
       print(path);
     });
   });

geo_location_finder:

A flutter plugin to get an accurate location on Android and iOS devices. You can get the plugin from here.

usages:

Future<void> _getLocation() async {
      Map<dynamic, dynamic> locationMap;

      String result;

      try {
        locationMap = await GeoLocation.getLocation;
        var status = locationMap["status"];
        if ((status is String && status == "true") ||
            (status is bool) && status) {
          var lat = locationMap["latitude"];
          var lng = locationMap["longitude"];

          if (lat is String) {
            result = "Location: ($lat, $lng)";
          } else {

// lat and lng are not string, you need to check the data type and use accordingly.
// it might possible that else will be called in Android as we are getting double from it.

            result = "Location: ($lat, $lng)";
          }
        } else {
          result = locationMap["message"];
        }
      } on PlatformException {
        result = 'Failed to get location';
      }

      if (!mounted) return;

      setState(() {
        _result = result;
      });
    }

These are some of the plugins generated by FlutterDevs. If you wanna create a plugin by yourself then you might want to read this article to walk you through the process of creating a plugin.

Creating a Flutter Plugin for Android and iOS | Image Gallery
Flutter plugin is the wrapper of the native code like android( Kotlin or java) and iOS(swift or objective c)…flutterdevs.com

I hope you liked the article and if you wanna convey something, be it a mistake then feel free to send the feedback in the comments.

Read other articles:

Developing Web Apps Using Flutter | Flutter for Web
Flutter was introduced back in May 2017 with the general idea of Cross-Platform app development initially for Android…medium.com

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.

Introduction

In this blog, I’m going to show you how to develop a package in Flutter and upload it to pub.dev

Let’s Start

Open up the Android Studio and select Start a new Flutter project and then, a dialogue will open. In this dialogue, select Flutter package option as shown in the below images

Now, enter all the details of your package such as package name, project location, and package description. In this blog, we’re gonna create a custom switch, so give the package name as “custom_switch”

Now, your project is created. Delete the boilerplate code that is created as part of the project

Create a stateful widget class and name it CustomSwitch and include the SingleTickerProviderStateMixin in this class as shown below.

https://gist.github.com/flutter-devs/d2d21e3911c40cb624e48ba5f8fb21a2#file-custom_switch-dart

In the above code, we’re also declaring 3 member variables —

• value — This is the value of our switch. If switch is ON then value will be true else value will be false
• onChanged — This is the void callback which is used to change the value of switch from true to false and vice-versa
• activeColor — This is the color shown when the switch is ON

Now, add the following code inside _CustomSwitchState class

https://gist.github.com/flutter-devs/e585ff4ae3f76881345795b25c7cc53c#file-custom_switch-dart

_circleAnimation and _animationController objects are created of type Animation and AnimationController respectively.

In initState() method, the _animationController object is initialized with a duration of 60 milliseconds. After that, _circleAnimation is initialized with AlignmentTween, because as shown in the thumbnail image, alignment of a white circle inside the switch is changing on every change in the value of the switch

In the begin value of AlignmentTween, we’re checking, if the value of the switch is true, then the Alignment will be centerRight else the Alignment will be centerLeft and at last, we’re attaching the animationController with this animation with Linear curve.

Now, paste the following code inside build() method —

https://gist.github.com/flutter-devs/9b235f7597f595c91b41953574cefa30#file-custom_switch-dart

In the following code, AnimatedBuilder widget is returned which means that it helps to animate its descendant widgets. Inside this, Container of width 70.0 & height 35.0 is returned. In the color property of Container, we’re checking if the alignment of white circular container is centerLeft(Switch OFF), then the color would be grey else color would be activeColor.

Now, in the child of Container, Row widget is returned. In the case of first children of Row, we’re checking if the alignment of a white circular container is centerRight (Switch ON) then, “ON” text will be displayed else an empty Container.

In the case of second children of Row, we’re adding the white circular Container and wrapping it with Align widget and in the alignment property, the value of _circleAnimation is given which means as soon as the value of _circleAnimation changes, alignment of white container changes.

In the case of third children of Row, we’re checking if the alignment of the white circular container is centerLeft (Switch OFF) then, “OFF” text will be displayed else an empty Container.

Now, the last step is to apply gestures on Switch. Wrap the root Container with GestureDetector widget and in the onTap() method paste the following code

https://gist.github.com/flutter-devs/85ebd7bd8da22b8f7e6e2bfca62b1474#file-custom_switch-dart

In this, we’re checking if the current playing animation is completed, then, simply reverse it else, forward it. And, if the value of switch is false, then we’re changing it’s value to true using onChanged() VoidCallback which we’ve defined in above steps else, we’re changing the value to false.

That’s all, now the CustomSwitch class is completed. Now, let’s create an example app which will use this package to display a switch in the app.

Create a new flutter project and name it “example” and to use “custom_switch” package in this project before uploading it to pub.dev, add the following code inside pubspec.yaml file —

https://gist.github.com/flutter-devs/0936c24a24fbdd4d62e6353085603804#file-pubspec-yaml

Now, go to main.dart file, and paste the following code inside it —

https://gist.github.com/flutter-devs/d90d25721a9e8e53d65d5f69ddd58b2c#file-main-dart

• In line 1, we’re importing the custom_switch package.
• In line 27, bool variable is initialised with the initial value of false, so that initially switch remains off
• In line 39, CustomSwitch widget is added. Active color of switch is given as pinkAccent, value property is given the value of status variable and in onChanged() callback, value of status variable is changed with the value parameter of onChanged() callback
• In line 50, Text widget is added and value of status variable is given as it’s text.

Now, run the app and you’ll see the following output —

Now, we’ve successfully added the code for CustomSwitch package. Now, let’s see what all other details are required to be added to publish the package to official packages directory.

In the pubspec.yaml file, you are required to add following details — name, description, version, author & homepage

https://gist.github.com/flutter-devs/34d524043698eec1657b6269911e9d76#file-pubspec-yaml

At last, you have to run one command that is used to check if our package has any warnings or not, whether it can be published or not? So, paste the following code inside the terminal window —

Now, press Enter and it will tell if there is any warnings in our package or not. In our case, it has 0 warnings —

Finally, upload the package using the following command and your package will display on the official packages directory (It will take some time to display your package on the official packages directory)

Package Link — https://pub.dev/packages/custom_switch

Did I get something wrong? Mention it in the comments. I would love to improve.

If you learned even a thing or two, clap your hands 👏 as many times as you can to show your support! This motivates me to write more.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.