آموزش ساخت دفترچه یادداشت در فلاتر قسمت 1

سلام با یکی دیگه از آموزش های برنامه نویسی Flutter در خدمت شما دوستان هستیم.

در این مطلب قصد داریم یک مینی پروژه با فریمورک فلاتر با موضوع اپلیکیشن یادداشت برداری درست کنیم.

مهم ترین بخش توسعه این پروژه ذخیره سازی یادداشت ها می باشد.

در فلاتر سه روش کلی برای پیاده سازی بخش ذخیره اطلاعات که شامل موارد زیر هست.

• استفاده از sqflite
• SharedPreferences
• استفاده از فایل

روش دوم را قبلا باهم دیگه کار کردیم.

اما در این پروژه میخوایم که از روش اول یعنی استفاده از دیتابیس و به دلیل اینکه یادگیری آن بسیار مهم هست را استفاده کنیم.

برای شروع پروژه جدیدی در محیط برنامه نویسی خود ایجاد کنید.

اگر تازه کار هستید و با نحوه ایجاد پروژه آشنایی ندارید مطلب زیر را مطالعه کنید.

ساخت اولین پروژه با Flutter

بعد از ساخت پروژه, تمام کدها را پاک کنید تا از اول شروع به کد نویسی کنیم.

کد صفحه main شما باید یک همچین حالتی داشته باشه.

 import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Notes App",
    home: NotesList(),
  ));
}

class NotesList extends StatefulWidget {
  @override
  _NotesListState createState() => _NotesListState();
}

class _NotesListState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

حالا نیاز داریم چندتا کتابخونه و پلاگین اضافه کنیم به برنامه.

ما از سه کتابخونه زیر در طول پروژه استفاده می کنیم.

• intl
• path_provider
• Sqflite plugin

این کتابخانه ها را در فایل pubspec.yaml اضافه کنید تا به ادامه کارمون بپردازیم.

خب برای اینکه کارمون تمیز و اصولی باشه طبق تصویر زیر پکیج های که هست و در پروژه ایجاد کنید.

این پکیج ها باید داخل پوشه lib باشند.

من فایل main خودم و به پکیج ui منتقل کردم.

داخل پکیج مدل کلاس مدل خودمون و میسازیم. برای اینکار روی پوشه models راست کلیک کنید و New > Dart File را انتخاب کنید.

کدهای کلاستون و به این شکل بنویسید.

 
class Note {
  String _text, _date; //our note contain text,create date and an Id
  int _id;

  Note.update(this._text, this._date, this._id);

  Note(this._text, this._date);

  Note.map(dynamic obj) {
    this._text = obj['name'];
    this._date = obj['date'];
    this._id = obj['id'];
  } 

  Note.fromMap(Map map) {
    this._text = map['name'];
    this._id = map['id'];
    this._date = map['date'];
  }

  Map toMap() {
    Map map = new Map();

    map['name'] = this._text;
    map['date'] = this._date;

    if (id != null) map['id'] = this._id;

    return map;
  }

  get name => _text;

  set name(value) {
    _text = value;
  }

  get date => _date;

  set date(value) {
    _date = value;
  }

  int get id => _id;

  set id(int value) {
    _id = value;
  }
}

جلوتر این کدها را توضیح میدم پس نترسید اگر دقیقا نمیدونید این کدها چی هستند.

حالا داخل پکیج util کلاسی به نام Constants بسازید.

در این کلاس رشته های ثابت خودمون و تعریف میکنیم مثل نام جدول و ستون ها.

 
class Constants {
  static final String TABLE_NAME = "noteTable";
  static final String COLUM_TEXT = "text";
  static final String COLUM_DATE = "date";
  static final String COLUM_ID = "id";
  static final int DB_VERSION = 1;
  static final String DBNAME = "notes.db";
}

پس با توجه به کدهای بالا اسم دیتابیس ما notes.db هست و اسم جدول مورد نظر هم noteTable که سه ستون ایدی,تاریخ و تکست داره.

خب تو ادامه بحث پیاده سازی باید بدونید که Sqflite از الگوی singleton استفاده میکنه.

در این الگو از کلاس موردنظر فقط و فقط یک آبجکت میشه ساخت.

خب با این طرز فکر جلو میریم و داخل پکیج database فایلی به نام database_helper میسازیم.

در این فایل کلاسی تحت عنوان DatabaseHelper ایجاد میکنیم و کدهای زیر را در آن قرار میدهیم.

 
import 'dart:async';
import 'dart:io';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart';
import 'package:todo_app/utils/constants.dart';
import 'package:todo_app/models/note.dart';
class DatabaseHelper{
static final DatabaseHelper _INSTANCE = new DatabaseHelper.make();

factory DatabaseHelper() => _INSTANCE;

static Database _db;

DatabaseHelper.make();
}

اما توضیح کد بالا

_INSTANCE: گفتیم فقط یک instance از کلاس خودمون میتونیم بسازیم و این کار با استفاده از _INSTANCE انجام می دهیم.

factory: برای اینکه کانستراکتور کلاس بتونه یک instance را همیشه برگرداند.

DatabaseHelper.make(): یکی دیگه از کانستراکتور های کلاس ما هست که برای ساخت آبجکت از آن استفاده میکنیم.

Database _db: درواقع نمونه ای از دیتابیس ما است که در طول برنامه عملیات های خودمون و با آن انجام می دهیم.

نکته مهمی که به آن باید توجه کنید این هست که عملیات های دیتابیس در بک گراند انجام می شوند پس باید از حتما از کلمات کلیدی async,await,Future استفاده کنیم.

برای مقداردهی دیتابیس از کدهای زیر استفاده میکنیم.

 Future get db async {
  if (_db != null) return _db; 
  _db = await initDB();
  return _db;
}
------------------------------------------------------------------
initDB() async {
  Directory directory = await getApplicationDocumentsDirectory();
  String path = join(directory.path, Constants.DBNAME);
  var myDb =
      openDatabase(path, version: Constants.DB_VERSION, onCreate: _onCreate);

  return myDb;
}

متد اول متد get هست و آبجکت دیتابیس را برمیگرداند.

متد initDB هم یکبار اجرا می شود و دیتابیس ما را در مسیر مشخص شده ایجاد میکند.

حالا نوبت به پیاده سازی متد _onCreate میرسد.

این متد شامل کوئری های ایجاد دیتابیس وجدول می باشد.

 
void _onCreate(Database db, int version) async {
  await db.execute(
      "CREATE TABLE ${Constants.TABLE_NAME} (${Constants.COLUM_ID} INTEGER PRIMARY KEY, "
      "${Constants.COLUM_TEXT} TEXT, ${Constants.COLUM_DATE} TEXT );");
}

برای اضافه کردن اطلاعات به دیتابیس از متد زیر استفاده میکنیم.

 
Future insertNote(Note note) async {
  var dbClient = await db;
  int count = await dbClient.insert(Constants.TABLE_NAME, note.toMap());

  return count;
}

این متد به عنوان پارامتر ورودی یک آبجکت از کلاس Note را دریافت و در دیتابیس ذخیره میکند.

مقدار count در متد آیدی منحصر به فرد اطلاعاتی میباشد که در دیتابیس ذخیره کردیم.

برای اینکه بتونیم یک ردیف به خصوص از اطلاعات را بعدا دریافت کنیم به این ایدی نیاز داریم.

در کلاس Note متدی داشتیم به نام toMap, این متد کار تبدیل آبجکت های کلاس به Map را انجام می دهد.

در Flutter تمام اطلاعات بصورت یک جفت key-value ذخیره می شود, اطلاعات دیتابیس هم به همین صورت هست.

پس برای اینکه آبجکت کلاس ما بتواند در دیتابیس ذخیره شود باید به map تبدیل شود.

خب برگردیم به دیتابیس خودمون, برای دریافت لیست تمام اطلاعات ذخیره شده از متد زیر استفاده می کنیم.

 
Future getAllNotes() async {
  var dbClient = await db;
  var result = await dbClient.rawQuery(
      "SELECT * FROM ${Constants.TABLE_NAME} ORDER BY ${Constants.COLUM_TEXT} ASC");

  return result.toList();
}

یادتون باشه متد بالا اطلاعات و بصورت Map برمیگردونه.

برای خسته کننده نشدن آموزش من قسمت اول پیاده سازی و تا اینجا بیشتر ادامه نمیدم.

در قسمت دوم به ادامه آموزش دیتابیس در فلاتر میپردازیم.

با آموزش های بیشتر از Flutter در خدمت شما خواهیم بود.