Flutter uchun custom package yaratish

Qo’llanma sifatida videodars va github project maqola oxirida

Deyarli barcha Flutter developerlar pub.dev sayti orqali o’z loyihasiga package yuklab, undan foydalanadi. Ushbu maqolada biz o’zimiz package yaratamiz va undan qanday foydalanishni ko’rib o’tamiz.

Ushbu maqolada custom Alert dialog yasab ko’rsatamiz va barcha jarayon shu orqalli tushuntiriladi.

Shu o’rinda savol tug’iladi: Nega custom package yaratilishi kerak?! buni quyidagicha izohlaymiz.

Tasavvur qiling sizda bir xil style, shablon takrorlanadigan widget yoki funksiya bor. Bizning misolimizda bu Alert dialog. Bitta loyiha ichida 10 ta joyda takrorlanadi. Aytaylik bu widgetga o’zgartirish kiritlidi va barcha Alert dialoglarni yangisiga almashtirib chiqish kerak. Ha bunga yechim sifatida Alert dialogni alohida classda yozib, kerak joylarda chaqirib ishlatishimiz mumkin. Lekin bu shablondan bir nechta project (loyiha)larda foydalangan bo’lsakchi?

Aynan shunday tizimli muammo va konfliktlarni hal qilish, dasturchi ishini yengilatish va kodni qisqartirish uchun ushbu takrorlanadigan funksiya yoki widgetni alohida package qilib ishlatish tavsiya qilinadi.

Package yaratishni bir nechta usullari bor. Men bu maqoalda Android Studio IDE dan foydalanib package yaratishni ko’rsataman.

1. Android Studioni ishga tushuramiz va File/New Flutter project bo’limiga o’tamiz.

• Project name bo’limiga project(bo’lg’usi package) nomini kiritamiz.
• Project Type bo’limidan Packageni tanlaymiz.
• Platforms bo’limidan qaysi platformalar uchun amal qilishini belgilaymiz. Bizning Alert Dialogda Android va iOS yetarli
• Finish tugmasi orqali yangi project yaratiladi.

2. Ochilgan projectni tartiblash va kodlarni yozish

• Yangi apckage project ochilganida odatda lib folder ichida project nomi bilan bir xil dart fayl ochilgan bo’ladi va ichida kichik misol keltirilgan bo’ladi. Biz ushbu dart faylni butunlay tozalab tashlab, bizga kerakli logika va funksiyalarni yozamiz.

Alert diaolog uchun kod quyida keltirilgan.

import 'package:flutter/material.dart';

class CustomAlertDialog extends StatelessWidget {
  // mana shu yerga fieldlar yoziladi
  final String title;
  final String content;
  final String textButtonOne;
  final String textButtontwo;
  final Function() functionOne;
  final Function() functionTwo;

  const CustomAlertDialog(
      {Key? key,
      required this.title,
      required this.content,
      required this.textButtonOne,
      required this.textButtontwo,
      required this.functionOne,
      required this.functionTwo})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      actionsPadding: EdgeInsets.zero,
      backgroundColor: Colors.white,
      buttonPadding: EdgeInsets.zero,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      title: Text(
        title,
        textAlign: TextAlign.center,
      ),
      alignment: Alignment.center,
      content: Container(
        constraints: BoxConstraints(minWidth: 100, maxHeight: 250),
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Text(
            content,
            style: TextStyle(fontSize: 18),
            textAlign: TextAlign.center,
          ),
        ),
      ),
      actions: [
        Container(
          height: 60,
          margin: EdgeInsets.only(top: 1),
          decoration: BoxDecoration(
              border: Border(
                  top: BorderSide(color: Colors.grey, width: 0.5))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Expanded(
                child: TextButton(
                  onPressed: () {
                    functionOne();
                  },
                  child: Text(
                    textButtonOne,
                    style: TextStyle(fontSize: 19, color: Colors.red),
                  ),
                ),
              ),
              VerticalDivider(
                color: Colors.grey,
                thickness: 0.5,
              ),
              Expanded(
                child: TextButton(
                  onPressed: functionTwo,
                  child: Text(
                    textButtontwo,
                    style: TextStyle(fontSize: 19, color: Colors.blue),
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}

Kod tayyor. Endi packageni publish qilishdan oldin pubspec.yaml da bir qancha bo’limlarni to’ldiramiz (Aslida bu jarayon majburiy emas. Istasangiz to’ldirmasligingiz mumkin. Lekin profissional ish bo’lishi uchun to’ldirish afzal)

• name: project name
• description: ixtiyoriy qisqa tavsif
• authors: Mualliflar kimligi va support uchun elektron pochta authorname<e-mail> shaklida kiritiladi.
• homepage: Bu yerga github ga publish qilingan package linki kiritiladi. hozircha bu maydon bo’sh.

Barchasi to’g’ri bajarilgach. github accountimizga push qilamiz va publish bo’lgan pckage linkidan nusxa olib, pubspec.yaml faylimizdagi homepage qismiga joylaymiz.

Package tayyor! Endi tayyor packadedan boshqa loyilardan foydalanishni ko’rib chiqamiz.

Tayyorlangan packagedan boshqa projectlarda foydalanish.

Buning uchun packageni ishlatmoqchi bo’lgan loyihaning pubspec.yaml fayliga o’tib, quyidagicha to’ldiramiz.

• dependencies bo’limi tagidan yaratgan package project nomini kiritamiz.
• git: github link beriladi. (E’tibor bering: linkdan nusxa olganda oxirida .git kengaytmasi ham birga bo’ladi. pubspec.yaml ga joylayotgada linkdan .git ni olib tashlab joylash kerak.
• Deyarli tayyor. Hammasi to’g’ri joylashgach pub get tugmasini bosamiz.

main.dart ga ushbu kodni joylaymiz.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  void salomlash() {
    print("Salom");
  }

  void xayrlash() {
    print("Xayr!");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: CustomAlertDialog(
            title: "Bu Title",
            content: "Birinchi test package",
            textButtonOne: "Ali",
            textButtontwo: "Vali",
            functionOne: salomlash,
            functionTwo: xayrlash,
          ),
        ));
  }
}

Tayyor. Run qilganimizda chiqqan natija:

Tayyor!

Qanday ishlatish bo’yicha na’muna: https://github.com/uzbmuydinov/custom_alert_dialog_test.git

Package linki: https://github.com/uzbmuydinov/custom_alert_dialog_me.git

Videodars: https://youtu.be/jh0rxK34DfQ