-qadam : Ilovangizning asosiy katalogiga kiradigan flutter paketlarini ishga tushiramiz

Download 1.82 Mb.
bet	3/4
Sana	27.05.2022
Hajmi	1.82 Mb.
	#22094

1 2 3 4

Bog'liq
Flutter-da Hive ma\'lumotlar bazasi
7-8-sinf to\'garak ish reja (3), Issiliqlik almashinish apparatlari, 7-sinf testi., ped kengash

4-qadam : Ilovangizning asosiy katalogiga kiradigan flutter paketlarini ishga tushiramiz.
5-qadam: AndriodX-ni yoqing
Buni gradle.properties faylingizga qo'shing:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

Dart faylida kodni qanday amalga oshirish kerak:

Siz uni mos ravishda kodingizga kiritishingiz kerak:
Endi sinfni yaratamiz va TypeAdapters yaratilishi uchun to'g'ri izohlarni qo'shamiz:
Keling, model sinfini yarataylik, masalan, DataModel.
import 'package:hive/hive.dart';
part 'data_model.g.dart';
@HiveType(typeId: 0)
class DataModel{
@HiveField(0)
final String title;
@HiveField(1)
final String description;
@HiveField(2)
final bool complete;
DataModel({this.title, this.description, this.complete});
}
Birinchi import uyasi. O'sha paytda "data_model.g.dart" ni bo'lim sifatida qo'shing (bu erda turdagi adapter ishlab chiqariladi). Model sinfini @HiveType() bilan aniqlang, shuning uchun generator bu TypeAdapter bo'lishi kerakligini tushunadi. @HiveField(index) bilan saqlashingiz kerak bo'lgan har bir maydonga izoh qo'shing, indeks int bo'lib, har bir indeks bir marta ko'rsatilishi kerak va ularni ro'yxatga olishdan keyin uni o'zgartirmasligingiz kerak. Bizda sarlavha, tavsif va saqlash uchun to'liq kabi uchta omil mavjud va ular @HiveField sifatida tushuntiriladi.
Endi biz terminalga quyidagi buyruqni kiritish orqali kod generatorini ishga tushiramiz, bu biz uchun avtomatik ravishda ma'lumotlar bazasi kodini yaratadi.

$ flutter packages pub run build_runner build

Eslatma : Fayl nomi ` data_model.dart`. Biz "data_model.g.dart" qatorini qo'shamiz. Bu erda g hosil qilingan degan ma'noni anglatadi. Shunday qilib, yangi yaratilgan fayl data_model.g.dart bo'ladi
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'data_model.dart';
// **************************************************************************
// TypeAdapterGenerator
// **************************************************************************
class DataModelAdapter extends TypeAdapter {
@override
final typeId = 0;
@override
DataModel read(BinaryReader reader) {
var numOfFields = reader.readByte();
var fields = {
for (var i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
};
return DataModel(
title: fields[0] as String,
description: fields[1] as String,
complete: fields[2] as bool,
);
}
@override
void write(BinaryWriter writer, DataModel obj) {
writer
..writeByte(3)
..writeByte(0)
..write(obj.title)Demo
..writeByte(1)
..write(obj.description)
..writeByte(2)
..write(obj.complete);
}
}
my_home_page.dartJild ichida deb nomlangan yangi dart faylini yarating lib.

floatingActionButton: FloatingActionButton(
onPressed: (){
showDialog(
context: context,
child: Dialog(
backgroundColor: Colors.blueGrey[100],
child: Container(
padding: EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: InputDecoration(hintText: "Title"),
controller: titleController,
),
SizedBox(
height: 8,
),
TextField(
decoration: InputDecoration(
hintText: "Description"),
controller: descriptionController,
),
SizedBox(
height: 8,
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: Colors.red,
child: Text("Add Data",style: TextStyle(color: Colors.white),),
onPressed: () {
final String title = titleController.text;
final String description = descriptionController.text;
titleController.clear();
descriptionController.clear();
DataModel data = DataModel(title: title, description: description, complete: false);
dataBox.add(data);
Navigator.pop(context);
},
)
],
),
)
)
);
},
child: Icon(Icons.add),
),

Ushbu ekranda biz FloatingActionButton() ni qilamiz. Ushbu tugma onPressed() usulida biz matn maydonlari bilan dialog oynasini ochamiz.

Matn maydonlari bilan dialog oynasi
Suzuvchi tugmani bosganimizda, matn maydoni bilan dialog oynasi ochiladi, keyin biz istalgan sarlavhani, tavsifni yozamiz va keyin ma'lumotlarni qo'shish tugmasini bosing, keyin ma'lumotlar ekraningizda ko'rinadi.

ValueListenableBuilder(
valueListenable: dataBox.listenable(),
builder: (context, Box items, _){
List keys= items.keys.cast().toList();
return ListView.separated(
separatorBuilder: (_, index) => Divider(),
itemCount: keys.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
itemBuilder:(_, index){
final int key = keys[index];
final DataModel data = items.get(key);
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
color: Colors.blueGrey[200],
child: ListTile(
title: Text(data.title, style: TextStyle(fontSize: 22,color: Colors.black),),
subtitle: Text(data.description,style: TextStyle(fontSize: 20,color:Colors.black38)),
leading: Text("$key", style: TextStyle(fontSize: 18,color: Colors.black),),
),
);
},
);
},
),

Biz ValueListenableBuilder() dan foydalanamiz, bu quruvchida biz ListView.separated() ni qaytaramiz. Biz ajratuvchi quruvchi, itemCount, shrinkWrap va itemBuilder qo'shamiz. ItemBuilder-da biz kartani qaytaramiz .

Ushbu ekranda biz kartani qo'shamiz va ListTile() ni qo'shamiz. Sarlavha, tavsif, indeks qo'shing. Biz o'ng tarafdagi belgi belgisini qo'shganda ro'yxat kafel usulida treyling qo'shamiz.
trailing: Icon(Icons.check, color: data.complete ? Colors.deepPurpleAccent : Colors.red,),

Ma'lumotlar tugagach, rang binafsha rangda, aks holda qizil edi. Endi biz ro'yxat plitasi usulida teginish funksiyasini yaratamiz va dialog oynasini ochamiz.

onTap: (){
showDialog(
context: context,
child: Dialog(
backgroundColor: Colors.white,
child: Container(
padding: EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: Colors.blueAccent[100],
child: Text("Mark as complete",
style: TextStyle(color: Colors.black87),
),
onPressed: () {
DataModel mData = DataModel(
title: data.title,
description: data.description,
complete: true
);
dataBox.put(key, mData);
Navigator.pop(context);
},
)
],
),
)
)
);
},

Ushbu dialog oynasida biz tugma hosil qilamiz; bu tugmada "To'liq deb belgilash" matni ko'rsatiladi. Ushbu tugmani bosganimizda, belgining rangi qizildan binafsha rangga yoki davomiylikdan to'liqgacha o'zgartirildi.

Endi biz filtr qo'shamiz va biz filtrning uchta turini qilamiz; birinchisi Hamma edi. Ushbu usulda barcha ma'lumotlar butun ekranda ko'rsatiladi. Ikkinchisi " Bajarildi", bu usulda faqat tugallangan ma'lumotlar ko'rsatiladi, oxirgisi " Progress", bu usulda faqat jarayon ma'lumotlari ko'rsatiladi va belgining rangi qizil edi.
enum DataFilter {ALL, COMPLETED, PROGRESS}

Biz PopupMenuButton() ni yaratamiz. Ushbu tugmada biz DataFilter bilan Hammasi, Bajarildi va Ishlash jarayonini qo'shamiz. Menyu ilova panelining o'ng tomonida ko'rsatilgan.
PopupMenuButton(
onSelected: (value) {
if(value.compareTo("All") == 0){
setState(() {
filter = DataFilter.ALL;
});
}else if (value.compareTo("Compeleted") == 0){
setState(() {
filter = DataFilter.COMPLETED;
});
}else{
setState(() {
filter = DataFilter.PROGRESS;
});
}
},
itemBuilder: (BuildContext context) {
return ["All", "Compeleted", "Progress"].map((option) {
return PopupMenuItem(
value: option,
child: Text(option),
);
}).toList();
},
)

Har qanday filtr turini bosganimizda, ular faqat ushbu elementlar ma'lumotlarini ko'rsatadi, lekin dastlab ma'lumotlar standarti " Hammasi " ni ko'rsatadi.

Download 1.82 Mb.

1 2 3 4

Download 1.82 Mb.