Forem: Edo Lubis

Modularization in Flutter App

Edo Lubis — Mon, 16 Dec 2024 09:07:57 +0000

As the complexity of a project increases, so does the amount of code we write. Therefore, maintaining code quality, scalability, and readability becomes even more important. One approach often used by engineers to address these challenges is modularization.

What is modularization? Simply put, modularization is the process of breaking down a problem into smaller, more specific tasks or components, so that each part has a clear and focused purpose.

However keep in mind, modularization doesn’t necessarily reduce the complexity of your project. The overall complexity may remain the same, but modularization makes it easier to manage and maintain.

We can separate modules based on features, by layers (such as UI, model, etc.), or a combination of both, depending on our needs and preferences.

When modularizing, it's important to remember that good modularization is characterized by high cohesion, low coupling and bounded context.

High cohesion means that each module has a specific function and focuses on a single purpose. For example, a module responsible for user authentication should only handle tasks like verifying user credentials or managing login sessions. It should not include unrelated functions, such as processing payments or managing user preferences.

Low coupling means that modules do not rely excessively on other modules, so changes in one module do not have a significant impact on other modules. For example, the user authentication module should be designed in such a way that it operates independently of other modules.

Bounded context means that each module should operate within its own domain, with its own set of rules and responsibilities. It ensures that the boundaries of a module are clearly defined, preventing its domain from spilling over into others. as an analogy, imagine you are designing an amusement park with various rides. Each ride in the park has its own theme and different rules, such as the roller coaster, haunted house, or giant Ferris wheel. Each ride has clear boundaries, with features and rules that apply only within that ride.

In the roller coaster, the main rule is speed and passenger safety. All design and interactions in the roller coaster are focused on providing a thrilling and safe high-speed experience.

In the haunted house, the main rule is to create suspense and surprise. All design elements and interactions in the haunted house focus on creating a spooky and mysterious atmosphere.

In the giant Ferris wheel, the main rule is to enjoy the view. This ride is designed to offer a calm and scenic experience, without speed or tension.

Even though all these rides are part of the same amusement park, each operates within its own bounded context, with its own rules, definition and goals.

learn more about cohession and coupling

Lets take the example of an ecommerce application where a user can Login, Browse a list of products, Add products to the cart, Make a payment and chose the shipping method.

This application can be modularized as follows:

User Module: Handles user authentication (login, signup, password reset).
Product Module: Handles product list, product details, and product filtering/searching.
Cart Module: Manages the shopping cart, including adding/removing items, displaying total price, and updating quantities.
Payment Module: Processes payments and manages transactions.
Shipping Module: Manages shipping options and delivery methods.

And make sure, each module has boundaries defined based on the principle of bounded context, which means that each domain should have its own rules and responsibilities, ensuring that it operates independently within its own scope. This approach guarantees that each module has high cohesion (meaning all related functionalities are grouped together) and low coupling (meaning minimal dependencies on other modules).

Modular Approach in flutter using flutter package

In Flutter, we can adopt a modular approach using Flutter packages. For example, if we create a new application named "TradingApp," we can organize the modules based on features such as Wallet, Login, and Market.

Create a new Flutter project.
After creating the TradingApp project, create the login module by going to File → New → New Flutter Project, and select Package.

Then, create the other modules. The project structure will look like this

To enable TradingApp to use the other modules, we need to link them with import dependencies, similar to Flutter libraries.

This way, we can use different modules within our application.

We can also group modules into a single folder in our project. This will make the project structure and pubspec.yaml file look like this:

Or If we prefer not to keep the modules in the same repository, we can use a different approach by placing each module in separate Git repositories.

Conclussion

Modularization enhances software development by breaking complex projects into manageable, focused components, which improves code quality, scalability, and maintainability. This approach allows for better organization, easier updates, and reusability of code, and facilitates collaboration among team members. And, for modularization to be effective, it is crucial to ensure high cohesion within modules and maintain low coupling between them.

5 Tips to Improve Your Flutter Performance

Edo Lubis — Mon, 01 Jul 2024 06:15:18 +0000

When developing mobile applications using Flutter, performance is crucial. A smoothly running application provides a better user experience, allowing users to explore the app without feeling annoyed or frustrated by slow startup times, crashes, or jank.

Optimizing application performance includes various aspects, such as app start times and efficient memory management. By minimizing the workload during initial launch, using efficient state management, and properly disposing of resources, developers can ensure a smoother user experience. Here are some ways to improve the performance of Flutter applications.

1. Avoid Unnecessary Initialization in the Main App
The main() function is the entry point of a Flutter application. Keeping it clean and avoiding unnecessary initializations here is vital. Heavy operations should be deferred until they are needed, preferably in the appropriate widgets or services. And minimize the use of asynchronous functions in the main() function to ensure the first render time is as fast as possible. This helps to speed up the app's startup time, providing users with a quicker load time.



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Additionally, we can also speed up the process by using Future.wait to perform multiple asynchronous operations concurrently. This technique allows us to initiate several tasks simultaneously and wait for all of them to complete, thereby optimizing the overall initialization time and enhancing the app's performance right from the start



void main() async {
  await Future.wait([initFirebase(), initDatabase()]);
  runApp(const MyApp());
}

And consider using a splash screen as the initial page to wait for the initiation to be completed.



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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isSplashShow = true;

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

  void _init() async {
    await Future.wait([_initFirebase(), _initDatabase()]);
    _checkIsLoggedIn();

    isSplashShow = false;
  }

  Future<void> _initFirebase() async {}

  Future<void> _initDatabase() async {}

  void _checkIsLoggedIn() {}

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: isSplashShow
          ? const SplashPage()
          : const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

2. Prefer Using ListView or CustomScrollView Over SingleChildScrollView
When dealing with scrollable content, using ListView or CustomScrollView is more performance-efficient compared to SingleChildScrollView. ListView and CustomScrollView are optimized for scrolling performance and memory usage, especially with large datasets, as they lazily build and dispose of widgets as they come into and out of the viewport.

For example, an application that displays a list using the SingleChildScrollView widget to show text from 1-999 uses approximately 30-40 MB of memory.



class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = [];

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

  void _init() {
    for (int i = 0; i < 9999; i++) {
      items.add(i.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Title"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            for (final item in items)
              SizedBox(
                width: double.infinity,
                child: Text(item),
              ),
          ],
        ),
      ),
    );
  }
}

However, if the ListView widget is used to display text from 1-999, the memory usage is around 7-10 MB and also improve frame rendering time.



class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = [];

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

  void _init() {
    for (int i = 0; i < 9999; i++) {
      items.add(i.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Title"),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Text(items[index]);
        },
      ),
    );
  }
}

3. Use cacheWidth and cacheHeight in Image
Displaying images in a Flutter application is a basic and easy task. However, many of us are unaware that displaying images whose sizes do not match what we want to display in a widget will cause our application to use unnecessary memory.

Flutter provides a way to detect oversized images by using debugInvertOversizedImages = true. This can alert developers if the displayed images are larger than desired.



void main() {
  debugInvertOversizedImages = true;
  return runApp(const MyApp());
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("counter"),
      ),
      body: Column(
        children: [
          Image.network(
            "https://images.unsplash.com/photo-1715196372160-31ba56b1a2f9",
          ),
        ],
      ),
    );
  }
}

If the image dimensions exceed what is suitable for the widget, Flutter will generate an error when debugInvertOversizedImages is set to true.

For this issue, we can use the cacheWidth and cacheHeight parameters in the Image widget. These parameters allow us to control memory usage by resizing the displayed image. Let's see how we can utilize them:



    Image.network(
            "https://images.unsplash.com/photo-1690906379371-9513895a2615",
            height: 300,
            width: 200,
            cacheHeight: 300,
            cacheWidth: 200,
          ),

By setting cacheWidth and cacheHeight to appropriate values, we can ensure that the image is displayed with the desired dimensions without unnecessarily consuming memory.

However, this solution is not perfect because each device has a different pixel ratio. Errors may not appear on our debug device but might on other devices with different pixel ratios.

Therefore, we can calculate cacheHeight and cacheWidth by multiplying with MediaQuery.of(context).devicePixelRatio.

For example:



extension ImageExtension on num {  
  int cacheSize(BuildContext context) {  
    return (this * MediaQuery.of(context).devicePixelRatio).round();  
  }  
}

That extension allows us to easily calculate the cache size for our images and make the optimization process smoother:



class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    debugInvertOversizedImages = false;
    return Scaffold(
      appBar: AppBar(
        title: const Text("counter"),
      ),
      body: Column(
        children: [
          Image.network(
            "https://images.unsplash.com/photo-1690906379371-9513895a2615",
            height: 300,
            width: 200,
            cacheHeight: 300.cacheSize(context),
            cacheWidth: 200.cacheSize(context),
          ),
        ],
      ),
    );
  }
}

4. Dispose Unused Streams and Controller
When streams and controllers are no longer needed, failing to dispose of them can cause memory leaks. Memory leaks occur when memory that is no longer needed is not released, which over time can consume a significant portion of available memory, leading to poor performance and even application crash (out of memory).

To prevent memory leaks, it is important to dispose streams and controllers when they are no longer needed. This is typically done in the dispose method of a StatefulWidget.



  late StreamSubscription _subscription;
  late TextEditingController _textEditingController;
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _subscription = counterBloc.counterStream.listen((data) {
      // handle data
    });
    _textEditingController = TextEditingController();
    _scrollController = ScrollController();
    _textEditingController.addListener(() {
      // handle data
    });
    _scrollController.addListener(() {
      // handle data
    });
  }

  @override
  void dispose() {
    _subscription.cancel();
    _textEditingController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

5. Use const and Prefer State Management Solutions
Using const constructors for widgets whenever possible helps Flutter optimize the build process by reusing widgets rather than recreating them. Additionally, employing state management solutions like BLoC, Riverpod, or Provider can lead to better-organized code and more efficient state handling, ultimately improving performance.



final counterBloc = CounterBloc();

final counterProvider =
    StateNotifierProvider.autoDispose<CounterController, int>(
  (ref) => CounterController(),
);

class CounterController extends StateNotifier<int> {
  CounterController() : super(0);

  void increment() {
    state = state + 1;
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("counter"),
      ),
      body: Column(
        children: const [
          IncrementWidget(),
          CounterWidget(),
        ],
      ),
    );
  }
}

class IncrementWidget extends ConsumerWidget {
  const IncrementWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    return ElevatedButton(
      onPressed: () {
        ref.read(counterProvider.notifier).increment();
      },
      child: const Text("counter"),
    );
  }
}

class CounterWidget extends ConsumerWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

Data persistence in flutter

Edo Lubis — Mon, 03 Jun 2024 11:19:52 +0000

When you develop an application, usually, the data used to display information originates from the internet. However, there are scenarios where the data from the internet needs to be stored somewhere on your local device. This can be for functionality purposes or to enhance performance and user experience while using the application.

Take the Facebook application as an example: when you open the main page or page detail, then close the application and reopen it, you will find yourself on the last visited page, and the page immediately displays data as if there were no loading process. This can happen because the data is stored locally, and when the application is opened, it uses the stored data to display the main or page detail while loading data from the internet to get the latest information.

In Flutter itself, there are many libraries designed to store data on the local device. In this article, I will share How to persist data using the best libraries (in my opinion) for storing data locally in Flutter.

1. shared_preferences
shared_preferences is a plugin for reading and writing simple key-value pairs. It uses NSUserDefaults on iOS and SharedPreferences on Android. shared_preferences is a best choice for storing small and non-sensitive data, such as theme preferences, language settings, settings.

implementation example:
write data

Future<void> saveTheme(bool isLightMode) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isLightMode', isLightMode);
}

Read data

Future<bool?> readTheme() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final bool? isLightMode = prefs.getBool('isLightMode');
    return isLightMode;
}

Delete data

Future<void> deleteTheme() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.remove('isLightMode');
}

SharedPreferences is limited to only supporting certain data types like int, double, bool, String, and List. However, we can store objects in SharedPreferences by converting them into a string. One common way to do this is by using JSON. We can convert an object to a JSON string when saving it and then convert it back to an object when retrieving it.

implementation example:

class Setting {
  bool? isLightMode;
  String? lang;
  int? counter;

  Setting({this.isLightMode, this.lang, this.counter});

  Setting.fromJson(Map<String, dynamic> json) {
    isLightMode = json['isLightMode'];
    lang = json['lang'];
    counter = json['counter'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['isLightMode'] = isLightMode;
    data['lang'] = lang;
    data['counter'] = counter;
    return data;
  }
}

  Future<void> saveSetting(Setting setting) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('setting', jsonEncode(setting.toJson()));
  }

  Future<Setting?> readSetting() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final String? json = prefs.getString('setting');
    if (json == null) return null;
    return Setting.fromJson(jsonDecode(json));
  }

  Future<void> deleteSetting() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.remove('setting');
  }

2. sqflite
sqflite is a Flutter plugin that provides access to SQLite, a lightweight, serverless relational database commonly used in mobile applications for local data storage. Sqflite is a popular choice for applications requiring local data storage with more complex and relational structures.
implementation example:

class Item {
  final int id;
  final String title;
  final String description;

  const Item({
    required this.title,
    required this.description,
    required this.id,
  });

  factory Item.fromJson(Map<String, dynamic> json) => Item(
        id: json['id'],
        title: json['title'],
        description: json['description'],
      );

  Map<String, dynamic> toJson() => {
        'id': id,
        'title': title,
        'description': description,
      };
}

class DatabaseHelper {
  static const int _version = 1;
  static const String _dbName = "items.db";

  static Future<Database> _getDB() async {
    return openDatabase(
      join(await getDatabasesPath(), _dbName),
      onCreate: (db, version) async => await db.execute(
          "CREATE TABLE Item(id INTEGER PRIMARY KEY, title TEXT NOT NULL, description TEXT NOT NULL);"),
      version: _version,
    );
  }

  static Future<int> addItem(Item item) async {
    final db = await _getDB();
    return await db.insert("Item", item.toJson(),
        conflictAlgorithm: ConflictAlgorithm.replace);
  }

  static Future<int> updateItem(Item item) async {
    final db = await _getDB();
    return await db.update(
      "Item",
      item.toJson(),
      where: 'id = ?',
      whereArgs: [item.id],
      conflictAlgorithm: ConflictAlgorithm.replace,
    );
  }

  static Future<int> deleteItem(Item item) async {
    final db = await _getDB();
    return await db.delete(
      "Item",
      where: 'id = ?',
      whereArgs: [item.id],
    );
  }

  static Future<List<Item>?> getAllItems() async {
    final db = await _getDB();
    final List<Map<String, dynamic>> maps = await db.query("Item");
    if (maps.isEmpty) return null;
    return List.generate(maps.length, (index) => Item.fromJson(maps[index]));
  }
}

3. hive
Hive is a key-value database written in Dart. Hive excels in write and delete operations compared to SQLite and SharedPreferences, and it is on par with SharedPreferences in read performance, while SQLite is significantly slower. Hive has built-in encryption using AES-256, making it suitable for storing sensitive data.
implementation example:

Future<void> saveUser(Map<String, dynamic> user) async {
  var box = await Hive.openBox('myBox');
  await box.put('user', user);
}

Future<Map<String, dynamic>?> readUser() async {
  var box = await Hive.openBox('myBox');
  final Map<String, dynamic>? json = box.get('user');
  return json;
}

Future<void> deleteUser() async {
  var box = await Hive.openBox('myBox');
  await box.delete('user');
}

If your project uses the flutter_bloc library for state management, you can easily cache data locally using Hive. The creator of flutter_bloc has developed the hydrated_bloc library, which includes HydratedStorage that comes with Hive implemented.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  HydratedBloc.storage = await HydratedStorage.build(
    storageDirectory: kIsWeb
        ? HydratedStorage.webStorageDirectory
        : await getTemporaryDirectory(),
  );
  runApp(const MyApp());
}

class UserCubit extends HydratedCubit<User?> {
  UserCubit() : super(null);

  void login(User user) => emit(user);

  @override
  User? fromJson(Map<String, dynamic> json) =>
      json['user'] != null ? User.fromJson(json['user']) : null;

  @override
  Map<String, dynamic> toJson(User? state) => {'user': state};
}

4. isar
Isar was created by the creator of Hive to overcome some limitations present in Hive and to offer a more advanced and efficient solution for local data storage in Flutter and Dart applications.

Isar is a fast, cross-platform NoSQL database that is well-integrated with Flutter and Dart. It is designed to provide high performance and ease of use.
implementation example:

dependencies:
  flutter:
    sdk: flutter
  isar: ^2.5.0
  isar_flutter_libs: ^2.5.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^2.2.0
  isar_generator: ^2.5.0

part 'isar_page.g.dart';

@Collection()
class Post {
  int id = Isar.autoIncrement;

  late String title;

  late DateTime date;
}

run flutter pub run build_runner

late Isar isar;

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

void openInstance() async {
  final dir = await getApplicationSupportDirectory();
  isar = await Isar.open(
    schemas: [PostSchema],
    directory: dir.path,
    inspector: true,
  );
}

void readPost() async {
  final posts = await isar.posts
      .filter()
      .titleContains('awesome', caseSensitive: false)
      .sortByDateDesc()
      .limit(10)
      .findAll();
  print(posts);
}

void createPost() async {
  final newPost = Post()
    ..title = 'awesome new database'
    ..date = DateTime.now();

  await isar.writeTxn((isar) async {
    newPost.id = await isar.posts.put(newPost);
  });
}

5. flutter_secure_storage
If you want to store sensitive data, then flutter_secure_storage is one of the best solutions. flutter_secure_storage is a Flutter package that provides a secure way to store sensitive data on the device, using Keychain on iOS and a KeyStore based solution on Android.
implementation example:

class Auth {
  String? token;
  String? id;

  Auth({this.token, this.id});

  Auth.fromJson(Map<String, dynamic> json) {
    token = json['token'];
    id = json['id'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['token'] = token;
    data['id'] = id;
    return data;
  }
}

  final storage = const FlutterSecureStorage();

  Future<void> saveAuth(Auth auth) async {
    await storage.write(key: 'auth', value: jsonEncode(auth.toJson()));
  }

  Future<Auth?> readAuth() async {
    final String? json = await storage.read(key: 'auth');
    if (json == null) return null;
    return Auth.fromJson(jsonDecode(json));
  }

  Future<void> deleteAuth() async {
    await storage.delete(key: 'auth');
  }

6. get_storage
If you're using GetX as state management, then you might be familiar with get_storage. get_storage is a local data storage package developed by the GetX team for Flutter. It's a lightweight and easy-to-use storage solution, allowing you to persistently store data in key-value pairs on the user's device.
implementation example:

class User {
  String? name;
  String? id;

  User({this.name, this.id});

  User.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    id = json['id'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['name'] = name;
    data['id'] = id;
    return data;
  }
}

final box = GetStorage();

Future<void> saveUser(User user) async {
  await box.write('user', jsonEncode(user.toJson()));
}

User? readUser() {
  final String? json = box.read('user');
  if (json == null) return null;
  return User.fromJson(jsonDecode(json));
}

Future<void> deleteUser() async {
  await box.remove('user');
}

get_storage is well-suited for applications with simple and fast data storage needs. However, for more complex requirements such as indexing or ensuring disk write confirmation, it's recommended to consider using sqflite, Hive, isar, etc.

Conclusion
There are the best libraries for persist data locally, The usage of the library typically depends on the type of data being stored, whether it is sensitive data, data with relationships, or just simple API responses.

Creating your own packages and plugins in flutter

Edo Lubis — Mon, 01 Apr 2024 03:45:48 +0000

When building applications with Flutter, Developers often rely on packages/plugins from pub.dev for their projects, whether developed by Google's team or by others. Utilizing these packages/plugins is highly beneficial as it can faster the development process, saving developers time by avoiding the need to create everything from scratch.

but consider this scenario…

Imagine you have developed a fantastic widget that enhances the functionality of your application. Wouldn't it be better to use that code in other of your projects without rewriting it?

or Imagine, where the package/plugin you heavily rely on becomes discontinued or unsupported. You're left in a dilemma, uncertain about how to proceed with your project.

In these scenario, the solution is create your own Flutter packages.

Creating Packages

Let's illustrate this with an example. Suppose we want to create a package to show a beautiful modal and we call the package name "beautiful_modal".

1. Create a new Flutter project using Android Studio and select the project type as a package.

2. After the project is successfully created, the folder structure will look like this.

3. Code your package according to your needs. For example, for the "beautiful_modal" package, the code will look like this:



library beautiful_modal;

import 'package:flutter/material.dart';

void showBeautifulDialog(BuildContext context, String title, String subtitle) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return BeautifulModal(
        subTitle: subtitle,
        title: title,
      );
    },
  );
}

class BeautifulModal extends StatelessWidget {
  final String title;
  final String subTitle;

  const BeautifulModal({Key? key, required this.title, required this.subTitle})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  Widget contentBox(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          padding:
              const EdgeInsets.only(left: 20, top: 50, right: 20, bottom: 20),
          margin: const EdgeInsets.only(top: 20),
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(
                height: 100,
                width: 100,
                child: FlutterLogo(),
              ),
              const SizedBox(height: 8),
              Text(
                title,
                style:
                    const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
              ),
              const SizedBox(height: 8),
              Text(
                subTitle,
                style: const TextStyle(fontSize: 14),
              ),
              const SizedBox(height: 8),
              Align(
                alignment: Alignment.bottomRight,
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: const Text(
                    'Close',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

4. Run and test your package.

Creating Plugins

You might wonder what a plugin is and how it differs from a package. Simply put, a plugin is a type of package designed to act as a bridge between Flutter's Dart code and platform-specific APIs on native operating systems like iOS and Android. So, all plugins are packages, but not all packages are plugins.

For example, let's say we want to show a native modal from iOS or Android.

The modal above is not created using Flutter code; instead, it's the default modal provided by the operating system (OS).

1. Create a new Flutter project using Android Studio and select the project type as a plugin.

2. After the project is successfully created, the folder structure will look like this.

Dart Code

1. Open the beautiful_native_modal_plaform_interface.dart file and replace the getPlatformVersion function with showNativeModal.



import 'package:plugin_platform_interface/plugin_platform_interface.dart';

import 'beautiful_native_modal_method_channel.dart';

abstract class BeautifulNativeModalPlatform extends PlatformInterface {
  /// Constructs a BeautifulNativeModalPlatform.
  BeautifulNativeModalPlatform() : super(token: _token);

  static final Object _token = Object();

  static BeautifulNativeModalPlatform _instance = MethodChannelBeautifulNativeModal();

  /// The default instance of [BeautifulNativeModalPlatform] to use.
  ///
  /// Defaults to [MethodChannelBeautifulNativeModal].
  static BeautifulNativeModalPlatform get instance => _instance;

  /// Platform-specific implementations should set this with their own
  /// platform-specific class that extends [BeautifulNativeModalPlatform] when
  /// they register themselves.
  static set instance(BeautifulNativeModalPlatform instance) {
    PlatformInterface.verifyToken(instance, _token);
    _instance = instance;
  }

  Future<void> showNativeModal(String message) {
    throw UnimplementedError('platformVersion() has not been implemented.');
  }
}

2. Open the beautiful_native_modal_method_channel.dart file and implement the showNativeModal function.



import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';

import 'beautiful_native_modal_platform_interface.dart';

/// An implementation of [BeautifulNativeModalPlatform] that uses method channels.
class MethodChannelBeautifulNativeModal extends BeautifulNativeModalPlatform {
  /// The method channel used to interact with the native platform.
  @visibleForTesting
  final methodChannel = const MethodChannel('beautiful_native_modal');

  @override
  Future<void> showNativeModal(String message) async {
    await methodChannel.invokeMethod<String>('showNativeModal', {"message": message});
  }
}

The string showNativeModal in the methodChannel.invokeMethod<String> function represents the name of the method to be executed on the Android or iOS side. Additionally, {"message": message} serves as the parameter being sent along with this method call.

3. Add the showNativeModal function to the beautiful_native_modal.dart file.



import 'beautiful_native_modal_platform_interface.dart';

class BeautifulNativeModal {
  Future<void> showNativeModal(String message) {
    return BeautifulNativeModalPlatform.instance.showNativeModal(message);
  }
}

Plugins in Android

1. Open the BeautifulNativeModalPlugin.kt file in the android folder and add the function to call the dialog from Android.



private fun showNativeModal(message: String?) {
        val builder: AlertDialog.Builder = AlertDialog.Builder(activity)
        builder.setTitle("Modal")
        builder.setMessage(message)
        builder.setPositiveButton("OK") { dialog, _ -> dialog.dismiss() }
        val dialog: AlertDialog = builder.create()
        dialog.show()
    }

2. Call the showNativeModal function from the onMethodCall method.



override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
        if (call.method == "showNativeModal") {
            val message = call.argument<String?>("message")
            showNativeModal(message)
            result.success(null)
        } else {
            result.notImplemented()
        }
    }

3. Then, the full code will look like this:



package com.example.beautiful_native_modal

import android.app.Activity
import android.app.AlertDialog
import android.content.DialogInterface
import androidx.annotation.NonNull
import io.flutter.embedding.engine.plugins.activity.ActivityAware
import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result

/** BeautifulNativeModalPlugin */
class BeautifulNativeModalPlugin : FlutterPlugin, MethodCallHandler, ActivityAware {
    /// The MethodChannel that will the communication between Flutter and native Android
    ///
    /// This local reference serves to register the plugin with the Flutter Engine and unregister it
    /// when the Flutter Engine is detached from the Activity
    private lateinit var channel: MethodChannel
    private var activity: Activity? = null

    override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
        channel = MethodChannel(flutterPluginBinding.binaryMessenger, "beautiful_native_modal")
        channel.setMethodCallHandler(this)
    }

    override fun onAttachedToActivity(binding: ActivityPluginBinding) {
        activity = binding.activity
    }

    override fun onDetachedFromActivityForConfigChanges() {
        activity = null
    }

    override fun onReattachedToActivityForConfigChanges(binding: ActivityPluginBinding) {
        activity = binding.activity
    }

    override fun onDetachedFromActivity() {
        activity = null
    }

    override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
        if (call.method == "showNativeModal") {
            val message = call.argument<String?>("message")
            showNativeModal(message)
            result.success(null)
        } else {
            result.notImplemented()
        }
    }

    override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {
        channel.setMethodCallHandler(null)
    }

    private fun showNativeModal(message: String?) {
        val builder: AlertDialog.Builder = AlertDialog.Builder(activity)
        builder.setTitle("Modal")
        builder.setMessage(message)
        builder.setPositiveButton("OK") { dialog, _ -> dialog.dismiss() }
        val dialog: AlertDialog = builder.create()
        dialog.show()
    }
}

4. Run and test your code

Plugins in iOS

1. Open the BeautifulNativeModalPlugin.swift file in the ios folder and add the function to display the modal in native iOS.



private func showNativeModal(message: String) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        let defaultAction = UIAlertAction(title: "OK", style: .default) { _ in }
        alert.addAction(defaultAction)

        guard let controller = controller else {
            return
        }

        controller.present(alert, animated: true)
      }

2. Call the showNativeModal function from the handle method.



public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
   switch call.method {
          case "showNativeModal":
          if let args = call.arguments as? [String: Any],
             let message = args["message"] as? String {
              showNativeModal(message: message)
              result(nil)
          } else {
              result(FlutterError(code: "INVALID_ARGUMENT",
                                   message: "Missing or invalid argument",
                                   details: nil))
          }
          default:
              result(FlutterMethodNotImplemented)
          }
}

3. Then the full code will look like this



import Flutter
import UIKit

public class SwiftBeautifulNativeModalPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "beautiful_native_modal", binaryMessenger: registrar.messenger())
    let instance = SwiftBeautifulNativeModalPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
     switch call.method {
            case "showNativeModal":
            if let args = call.arguments as? [String: Any],
               let message = args["message"] as? String {
                showNativeModal(message: message)
                result(nil)
            } else {
                result(FlutterError(code: "INVALID_ARGUMENT",
                                     message: "Missing or invalid argument",
                                     details: nil))
            }
            default:
                result(FlutterMethodNotImplemented)
            }
  }

   private func showNativeModal(message: String) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        let defaultAction = UIAlertAction(title: "OK", style: .default) { _ in }
        alert.addAction(defaultAction)

        guard let controller = controller else {
            return
        }

        controller.present(alert, animated: true)
      }

   private var controller: UIViewController? {
     return UIApplication.shared.keyWindow?.rootViewController
   }
}

4. Run and test your plugin.

Publish package/plugin to pub.dev

If you want to share your packages/plugins with the Flutter community, publishing it on pub.dev allows other developers to easily discover and use your package.

1. Create a pub.dev Account
To publish packages on pub.dev, you need to create an account. Visit the pub.dev website and sign in with your Google account.

2. Prepare Your Pubspec
Ensure your pubspec.yaml file contains accurate metadata for your package, including the name, version, description, author, homepage, and dependencies. You can also include tags to help users discover your package.

3. Publishing Your Package
Once your package is ready, Run the command flutter pub publish --dry-run then run flutter pub publish.

For more details on publishing, see the publishing docs on dart.dev.

Conclusion

In conclusion, Flutter packages and plugins are powerful tools. Developers can save time and effort by reusing code across projects. This eliminates the need to rewrite the same functionality from scratch. By utilizing packages from pub.dev or creating custom packages and plugins, developers can enhance productivity, reuse code, and access native features seamlessly across different platforms.

that's it, thankyou

Reference:
Developing packages & plugins
Writing custom platform-specific code