How to create Flutter Private Packages (Components)
Hello guys.
Today I am going to share how to create a flutter package. So, you can create it by yourself in the future.
Why do we need to create flutter packages?
Because in common, when we have a project and we want to use components or views in another project, we’ll copy and paste the components or views from the old project to a new project.
So, if we create the components or views in the flutter packages, we can use them by installing them as dependencies. We just need to import them in our view just like using the widgets in usual.
There are 2 types of packages, that’s private and public packages. The private packages are directories or repositories that are able accessed with permission and public packages are directories or repositories that are able accessed by everyone who has the link or files.
In this article, my flutter version is 3.0.3, but you can follow this instruction in flutter 2 and I use VSCode to create this package with flutter and dart extensions.
Okay, let’s do it!
We’ll create a package name with my_components_packages. The package will contain all components that we need in the project, but in this case, we just create one. It is the CustomCard component that shows the Card with title, image, subtitle, and body content. We can use it just to import them like custom widgets, stateful widgets, or stateless widgets.
First of all, open a new window of VSCode. Then press ctrl+shift+p, then type Flutter: New Project, and then choose Package like on the image below.
After you choose the package in the menus, you need to choose a directory that are you using to save the package. In this case, I will save the package in the Project directory. Now, we need to set the name of the package as my_components_packages as I mention above.
VSCode will generate some directories and files that are similar to the flutter project, but it doesn’t contain main.dart file. The structure of the folder will be like the below and when you expand the lib directory, you will see my_components_packages.dart.
Before we do more. We will delete the file my_components_packages_test.dart in the directory test. After that, we will create a new directory in lib with the name widgets. In the directory, add a new file with the name custom_card.dart, we can add a stateless widget with the name CustomCard in the file. You can write the code below.
import 'package:flutter/material.dart';class CustomCard extends StatelessWidget {
final String title, subtitle, bodyContent;
final String? imageUrl;
final Function()? onTap;const CustomCard(
{Key? key,
required this.title,
required this.subtitle,
this.imageUrl,
required this.bodyContent,
this.onTap})
: super(key: key);@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.symmetric(vertical: 5),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.amber.shade200,
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
// Image
Container(
height: 25,
width: 25,
decoration: const BoxDecoration(
shape: BoxShape.circle,
),
child: Image.network(
imageUrl ??
'https://static.thenounproject.com/png/1527904-200.png',
fit: BoxFit.fill,
),
),
const SizedBox(width: 10), // Title, Subtitle, and Content
Column(
mainAxisSize: MainAxisSize.max,
children: [
// Title
Text(
title,
style: const TextStyle(
fontSize: 16, fontWeight: FontWeight.w700),
),
// Subtitle
Text(
subtitle,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w300,
color: Colors.grey.shade600),
),
// Body Content
Text(
bodyContent,
style: const TextStyle(fontSize: 14),
),
],
),
],
),
),
);
}
}
After that, we need to export the component. Update file my_components_packages.dart with code below.
library my_components_packages;export 'widgets/custom_card.dart';
Oke, next we need to create a new project flutter and we will import my_components_packages into the project. Open a new window and then press ctrl+shift+p and choose Flutter New Project, choose Application.
Choose the directory that are you want to put the main application. We will use main_app as the name of the application. After that, we need to update the file pubspec.yaml like below to add our packages into the main_app.
Open main.dart in the lib directory in our main application, and then change the code like below.
import 'package:flutter/material.dart';
import 'package:my_components_packages/my_components_packages.dart';void main() {
runApp(const MyApp());
}class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Contact Apps',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Contact Apps'),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 5),
child: Column(
mainAxisSize: MainAxisSize.max,
children: const [
CustomCard(
imageUrl:
'https://images.tokopedia.net/img/cache/500-square/product-1/2017/5/21/18732692/18732692_bb7fa32c-c7b2-40ef-9e04-6ffb2867c344_745_824.png',
title: '0827-3617-2837',
subtitle: 'Rahmat Hidayat',
bodyContent: '-'),
CustomCard(
title: '0827-8463-7361',
subtitle: 'Burhan Jayadi',
bodyContent: '-'),
CustomCard(
imageUrl:
'https://i1.wp.com/www.thenerddaily.com/wp-content/uploads/2018/08/One-Punch-Man-Season-2.jpg',
title: '0827-9347-4528',
subtitle: 'Ilham Nasution',
bodyContent: '-'),
],
),
),
),
);
}
}
Okay!
It’s done.
So, we can run the main app to see the result. Because I am using flutter 3.0.3. I will run this app as a web view using chrome. The result will look like the below.
So, you can add another component to use in the future. You can do it, create a new file in the widgets directory and then export the file in my_components_packages.dart.
Thank you for reading this tutorial, guys!
Hope you understand these steps.
See you next time :)
Oh ya, you can find the source code here! :)
