Flutter paketi nasıl oluşturulur ?

Hoş geldiniz. Bu yazımda basit bir Flutter paketi yazıp, yayınlıyor olacağız. Hazırsanız içeri buyurun.

1.Adım

IntelliJ IDEA veya Android Studio kullanıyorsanız Flutter projesi oluştururken proje tipini Flutter Package olarak seçip devam edebilirsiniz.

Terminal/uçbirim ile yapmak isterseniz;

flutter create --template=package package ismi

2.Adım

Paketiniz için bir repo oluşturun. (Aşağıdaki adımları sıra sıra uygulayabilirsiniz)

1- git init
2- git add --all
3- git commit -m "initial commit"
4- git remote add origin <remote adresiniz>
5- git push -u origin master

3.Adım

Şimdi pubspec.yaml dosyamızı dolduralım. Projeyi package olarak başlattığımız için yaml dosyamız biraz farklı. Aşağıdaki örneğe bakarak kendinize uygun bir şekilde düzenleyebilirsiniz.

name: circle_button
description: Paketinizin açıklaması
version: 0.0.1
author: Aydın Emre ESEN<emreesen27@gmail.com>
homepage: paketi yayınladığınız remote url

CHANGELOG.md kısmında ise paketteki değişiklikleri belirtmemiz gerekiyor.

## [0.0.1] //versiyonu burada belirtiyoruz.
* değişiklikleri buraya yazıyoruz.

LICENSE dosyasını ise size uygun olan lisans ile doldurmalısınız. Aşağıdaki adresten ingilizce veya türkçe lisans örneklerini bulabilirsiniz.

http://ozgurlisanslar.org.tr/mit/

4.Adım

Artık paketimizi yazmaya başlayabiliriz. Her zaman olduğu gibi dart kodlarımızı yine lib klasörü altında topluyoruz. Projemizi başlattığımızda lib klasörü altında paket adımızla aynı isimde bir sınıf oluştu. Ana kodlarımızı buraya yazarak devam edelim.

Basit bir circle-button paketi yazıyoruz.

lib/circle_button.dart

library circle_button;

import 'package:flutter/material.dart';

class CircleButton extends StatelessWidget {
  //required
  /// [onTap] Assign a function.

  final Color btnColor;
  final Color splashColor;
  final double width;
  final double height;
  final Function onTap;

  CircleButton({
    this.btnColor: Colors.blue,
    this.splashColor: Colors.blueGrey,
    this.width: 36.0,
    this.height: 36.0,
    @required this.onTap,
  }) : assert(onTap != null, 'onTap is null!');

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Material(
        color: btnColor,
        child: InkWell(
          splashColor: splashColor,
          child: SizedBox(
            width: width,
            height: height,
            child: Icon(Icons.add),
          ),
          onTap: onTap,
        ),
      ),
    );
  }
}

Paketimizi yazarken dikkat etmemiz gereken bazı noktalar var. Kullanıcının boş geçmemesi gereken yerleri assert veya required kullanarak belirtmemiz gerekir. Tercihe bağlı yerlere ise default değerler atamamız yeterli. Kullandığımız değişkenlere açıklamalar yazmak, paketimizi kullanacak kişiler için önemli. Kod üzerindeki bu açıklamaların paketimize puan kazandırdığını unutmayalım.

5.Adım

Paketimizi yazdığımıza göre yayınlamadan önce test etmeliyiz. Bunun için paketimizin içine example adında yeni bir Flutter projesi oluşturun.

Paketimizin yolunu belirtelim.

example/pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  circle_button:
    path: ../

Buraya kadar adımları doğru takip ettiyseniz, paketinizin başarılı bir şekilde import olması gerekir. CircleButton’u çağırdığımızda onTap alanının zorunlu, diğer alanların keyfi olduğuna dikkat edin.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: CircleButton(
            btnColor: Colors.red,
            onTap: () {
              print('onTap');
            },
          ),
        ),
      ),
    );
  }
}

6.Adım

Son adım olarak paketimizi yayınlamak kaldı. Yaptığımız tüm değişiklikleri Github’a yolluyoruz ve aşağıdaki komutu çalıştırıyoruz.

flutter packages pub publish

Bu komut ile paketimizi pub.dev’e göndermiş olduk. Paket yüklendiğinde Author kısmında belirttiğimiz mail adresimize gelen mail ile paketinizi görüntüleyebilirsiniz.

Son Olarak

Paketi güncellemek istediğinizde değişiklikleri github’a yükleyip, pubspec.yaml ve CHANGELOG.md dosyalarındaki version bilgisini arttırıp, aynı kodu çalıştırmanız yeterli.

README.md dosyanızda paketiniz nasıl çalıştığını yazmanız ve paketin yaptığı işle uygun bir isme sahip olması diğer önemli konular.

Yazdığım paketleri buradan görüntüleyebilirsiniz;

https://github.com/emreesen27/Flutter-Sign-in-Button

https://github.com/emreesen27/Flutter_Currencies_Tracker

Bir sonraki yazıda görüşmek üzere…