Flutterexperts

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.

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.

---