Avtosalon sodda elektron ilovasini ishlab chiqish
![import 'package:animated_text_kit/animated_text_kit.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: AnimatedTextKit(
animatedTexts: [
TyperAnimatedText('Hello World'),
TyperAnimatedText('Flutter is awesome!'),
TyperAnimatedText('Animated Text Kit'),
],
),
),
),
);
}
}
6](/data/documents/4e0f7ece-ce5b-4b4a-9025-e25af657d205/page_6.png)
![GestureDetectorga o’ralgan Cantainer child xossasiga
AnimatedText(text:”Full Info”) widgeti berilgan va u bosilganda ya’ni
onTap(){…} ishlaganda showDialog() oynasi ochiladi va yuqoridagi
tasvir hosil bo’ladi.
GestureDetector(
child: Container(
alignment: Alignment.center,
height: widget.height * 0.07,
width: widget.width * .12,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(widget.width * 0.015),
),
),
child: AnimatedText(text: "Full Info"),
),
onTap: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
actions: [
TextButton(
onPressed: () => Navigator.pop(context, "Cancel"),
child: const Text("Cancel"),
),
TextButton(
onPressed: () => Navigator.pop(context, "OK"),
child: const Text("OK"),
),
],
title: AnimatedText(
text: carImage.carName[widget.index],
),
content: SizedBox(
width: widget.width * 0.5,
child: Text(
carImage.information[widget.index],
),
),
),
);
},
),
2.3.Mahsulotni sotib olish tugmasi (By Now Button)
GestureDetectorga o’ralgan Cantainer child xossasiga
AnimatedText(text:”Buy Now”) widgeti berilgan va u bosilganda ya’ni
onTap(){…} ishlaganda CarBuyPage() oynasiga o’tadi. Unda bir nechta
textField maydonlari mavjud bo’lib, ularni to’ldirilgandan so’ng buyurtmani
rasiylashtirish mumkin bo’ladi. Agarda maydonlar to’ldirilmasa yoki
noto’g’ri ma’lumot turi kiritilsa buyurtmani rasmiylashtirib bo’lmaydi.
GestureDetector(
child: Container(
alignment: Alignment.center,
12](/data/documents/4e0f7ece-ce5b-4b4a-9025-e25af657d205/page_12.png)
![2.4.Mahsulotni savatga olib qo’yish(Basket Button).
Basket deb nomlangan button bosilganda ekranga qalqib chiquvchi
showDialog oynasi ochiladi. showDialogdagi xabar harid qilmoqchi bo’lgan
mashinangiz savatga qo’shilganligi haqida bo’ladi. Dialogning show basket
va OK deb nomlangan tugmalari mavjud bo’lib, show basket deb nomlangan
tugma bosilganda savatdagi mashinalarning ro’yxatini ko’rsatib beradigan
screen ga o’tadi. OK tugmasi bosilsa dialog oynasi yopiladi.
GestureDetector(
child: Container(
alignment: Alignment.center,
height: widget.height * 0.07,
width: widget.width * .12,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(widget.width * 0.015),
),
),
child: AnimatedText(text: "Basket"),
),
onTap: () {
SharedPreferencesClass().carToBasket(widget.index.toString());
// carToBasket(widget.index.toString());
showDialog(
context: context,
builder: (context) => AlertDialog(
actions: [
TextButton(
onPressed: () =>
Navigator.pushNamed(context, MyBasket.routeName).then(
(value) => Navigator.pop(context),
),
child: const Text("Show basket"),
),
TextButton(
onPressed: () => Navigator.pop(context, "OK"),
child: const Text("OK"),
),
],
content: SizedBox(
width: widget.width * 0.5,
height: widget.width * 0.03,
child: Align(
alignment: Alignment.center,
child: Text(
"Tanlangan mashina savatga qo'shildi",
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic,
fontSize: widget.width * 0.018,
),
),
),
14](/data/documents/4e0f7ece-ce5b-4b4a-9025-e25af657d205/page_14.png)
![),
),
);
},
),
Basket deb nomlangan tugma bosilganda yuqorida keltirib o’tilgan
shared_preferences ishlaydi va tanlangan mashinaning indexsi xotiraga
saqlanadi. Saqlangan indexdagi mashina Basket oynasidagi mashinalar
ro’yxatida ko’rinadi. Button bosilganda pastdagi kod qatorlarida ko’rsatilgan
carToBasket() funksiyasi ishlaydi. Mashinani ro’yxatdan olib tashlash
uchun bironta mashinani nomi ko’rsatilagan ListTile ni ushlab o’nga yoki
chapga surish kifoya va ushbu jarayonda pastdagi koddan delete(int index)
funksiyasi ishlaydi. setState() funksiyasi har safar listga element qo’shilgan
yoki olib tashlanganda oynani yangilab turish uchun kerak.
class SharedPreferencesClass {
Future<void> loadList() async {
SharedPreferences pref = await SharedPreferences.getInstance();
setState(() {
favourite = pref.getStringList("_") ?? [];
});
}
Future<void> carToBasket(String value) async {
SharedPreferences pref = await SharedPreferences.getInstance();
if (value.isNotEmpty) {
setState(() {
favourite.add(value);
});
}
pref.setStringList("_", favourite);
}
Future<void> delete(int index) async {
SharedPreferences pref = await SharedPreferences.getInstance();
setState(() {
favourite.removeAt(index);
});
pref.setStringList("_", favourite);
}
void setState(VoidCallback callback) {
callback();
15](/data/documents/4e0f7ece-ce5b-4b4a-9025-e25af657d205/page_15.png)
“ Avtosalon sodda elektron ilovasini ishlab chiqish ” MUNDARIJA Kirish ....................................................................................................................................................................... 2 I.Nazariy qism ......................................................................................................................................................... 3 1.1.Ilovani yaratish uchun zarur bo'lgan shartlar, dasturlash tili hamda dasturiy vositalar. ..................................... 3 1.2.Umumiy afzalliklar (Shared Preferences paketi) ................................................................................................ 4 1.3.Animatsiyaga ega text (Animated text kit paketi) .............................................................................................. 5 II.Amaliy qism ......................................................................................................................................................... 7 2.1.Dasturni kodlashtirish jarayoni (Home Page). ................................................................................................... 7 2.2.Mahsulot haqida ma’lumot beradigan tugma (Full Info Button). .................................................................... 11 2.3.Mahsulotni sotib olish tugmasi (By Now Button) ............................................................................................ 12 2.4.Mahsulotni savatga olib qo’yish(Basket Button). ............................................................................................ 14 2.5.Dasturni o’rnatiluvchi fayl ko’rinishiga keltirish (Inno Setup dasturi). ............................................................. 16 Xulosa ................................................................................................................................................................... 18 Foydalanilgan adabiyotlar ..................................................................................................................................... 19 1
Kirish Onlayn avtomobil saloni ilovalari mijozlarning ham, avtomobilsozlik korxonalarining ham rivojlanayotgan ehtiyojlarini qondirish uchun bir qator imtiyozlarni taklif qilishi mumkin. Hamda mijozlar bir nechta dilerlik markazlariga jismoniy tashrif buyurishdan qochib, vaqtni tejashlari mumkin. Ular turli modellar va xususiyatlarni ilovada qulay tarzda solishtirishlari mumkin. Shu bilan birga ular uylaridan turib ilovaga tashrif buyurgan holda istalgan mashinaning xususiyatlarini tanlash imkoniyatiga ega bo’ladi, albatta ushbu dastur orqali. Ushbu “Avtosalon” dasturi ham shunday maqsadlarni ko’zlagan holda yaratildi. “Avtosalon” dasturi yaratilish jarayonida hozirgi kunda rivojlanib borayotgan kros-platforma dasturlash tili bo’lgan Dart hamda uning framework Flutter dan foydalanildi. Dart har qanday platformada tezkor ilovalarni ishlab chiqish uchun mijoz tomonidan optimallashtirilgan tildir. Uning maqsadi ko'p platformali ishlab chiqish uchun eng samarali dasturlash tilini taklif qilishdir, bu dastur ramkalari uchun moslashuvchan bajarish vaqti platformasi bilan bog'langan. Ushbu til hamda platformaning tanlanganligining asosiy sababi bu bitta kod manbasi yordamida turli platformalarda ishlay oladigan dasturiy mahsulot ishlab chiqishdan iborat. Bunda bitta kod yoziladi hamda uni android tizimi uchun ham iOS tizimi uchun ham, bundan tashqari Web platforma sifatida, Windows, Linux, MacOS operatsion tizimlarida ham bemalol kodni build qilgan holda ishlatishimiz mumkin. Flutter o’zining qulay moslashuvchanligi bilan tobora mashhur bo’lib bormoqda. Uning ko’plab hususiyatlari mavjud bo’lib, ulardan biri qulay tarzda ekran o’lchamlarini o’zgartirishdir. Android platformasida yoki Windows platformasida yozgan dasturni ishlatish uchun yana qaytadan ekran o’lchamlarini o’zgartirib chiqishning umuman hojati yo’q. Dart va Flutter ochiq manbali dasturash tili hamda freamwork bo’lganligi sababli, ekran hajmini platformaga moslab beradigan paketni() kutubxonani taklif qiladi. Buning uchun https://www.pub.dev saytiga tashrif buyurib kerakli paketni yuklab olish mumkin. Bundan tashqari paketni yuklab olmasdan ham MediaQuery yoki AspectRatio va shunga o’zshash widgetlar yordamida ekranni turli xil ko’rinishda response qilish imkoniyati mavjud. 2
I.Nazariy qism 1.1.Ilovani yaratish uchun zarur bo'lgan shartlar, dasturlash tili hamda dasturiy vositalar. O'zaro platforma ilovalarini ishlab chiqish bilan solishtirganda mahalliy ilovalarni ishlab chiqish. Ilovani iOS kabi muayyan platforma uchun kodlash mahalliy ilovalarni ishlab chiqish deb ataladi. Bundan farqli o'laroq, o'zaro platformali ilovalarni ishlab chiqish bitta kod bazasiga ega bo'lgan bir nechta platformalar uchun dastur yaratmoqda. Mahalliy ilovalarni ishlab chiqish. Ishlab chiquvchilar mahalliy ilovalarni ishlab chiqishda ma'lum bir platformani kodlashlari sababli ular mahalliy qurilma funksiyalaridan to'liq foydalanish imkoniyatiga ega. Bu, odatda, platformalararo ilovalarni ishlab chiqishga nisbatan yuqori mahsuldorlik va tezlikka olib keladi. Boshqa tomondan, agar siz dasturni bir nechta platformalarda ishga tushirmoqchi bo'lsangiz, mahalliy ilovalarni ishlab chiqish ko'proq kod va ko'proq ishlab chiquvchilarni talab qiladi. Ushbu xarajatlarga qo'shimcha ravishda, mahalliy ilovalarni ishlab chiqish doimiy foydalanuvchi tajribasi bilan bir vaqtning o'zida turli platformalarda ishga tushirishni qiyinlashtirishi mumkin. Bu erda Flutter kabi platformalararo ilovalar ishlab chiqish ramkalari foydali bo'lishi mumkin. Platformalararo ilovalarni ishlab chiqish . Platformalararo ilovalarni ishlab chiqish ishlab chiquvchilarga bir nechta platformalar uchun ilova yaratish uchun bitta dasturlash tili va bitta kod bazasidan foydalanish imkonini beradi. Agar siz bir nechta platformalar uchun dastur chiqarayotgan bo'lsangiz, o'zaro platformalar ilovasini ishlab chiqish mahalliy ilovalarni ishlab chiqishga qaraganda kamroq xarajat va vaqt talab qiladi. Bu jarayon, shuningdek, ishlab chiquvchilarga turli platformalarda foydalanuvchilar uchun yanada izchil tajriba yaratish imkonini beradi. Ushbu yondashuv mahalliy ilovalarni ishlab chiqish bilan solishtirganda kamchiliklarga ega bo'lishi mumkin, jumladan mahalliy qurilma funksiyalariga cheklangan kirish. Biroq, Flutter platformalararo ilovalarni ishlab chiqishni yanada silliq va yuqori samarali qiladigan xususiyatlarga ega. 3
Flutterning afzalliklari. Flutter platformalararo rivojlanish ramkasi sifatida ajralib turadigan ba'zi usullar: Mahalliyga yaqin ishlash. Flutter Dart dasturlash tilidan foydalanadi va mashina kodiga kompilyatsiya qiladi. Xost qurilmalar ushbu kodni tushunishadi, bu esa tez va samarali ishlashni ta'minlaydi. Tez, izchil va moslashtirilgan renderlash. Platformaga xos renderlash vositalariga tayanish o‘rniga, Flutter foydalanuvchi interfeysini ko‘rsatish uchun Google’ning ochiq manbali Skia grafik kutubxonasidan foydalanadi. Bu foydalanuvchilarga ilovaga kirish uchun qaysi platformadan foydalanishidan qat'i nazar, izchil ingl. Dasturchilar uchun qulay vositalar. Google Flutter-ni foydalanish qulayligiga e'tibor qaratgan holda yaratdi. Issiq qayta yuklash kabi vositalar yordamida ishlab chiquvchilar kod o'zgarishlari holatini yo'qotmasdan qanday ko'rinishini oldindan ko'rishlari mumkin. Vidjet inspektori kabi boshqa vositalar UI tartiblari bilan bog'liq muammolarni vizualizatsiya qilish va hal qilishni osonlashtiradi. 1.2.Umumiy afzalliklar (Shared Preferences paketi) Shared_preferences. ‘ shared_preferences’ Flutter ilova ishga tushirilganda oddiy ma'lumotlar turlarini (masalan, mantiqiy, butun sonlar, satrlar va ro'yxatlar) doimiy ravishda saqlash imkonini beruvchi paketni taqdim etadi. Ushbu paket odatda foydalanuvchi afzalliklarini, sozlamalarini yoki mahalliy darajada saqlanishi kerak bo'lgan boshqa ma'lumotlarni saqlash uchun ishlatiladi. ‘ shared_preferences’ Flutter-da ma'lumotlarni kalit-qiymat shaklida saqlaydi. Bu mantiqiy, butun sonlar, juftliklar va satrlar kabi kichik hajmdagi ibtidoiy ma'lumotlar turlarini saqlash uchun oddiy kalit-qiymatni saqlash mexanizmini taqdim etadi. Har bir ma'lumot bo'lagi noyob kalit bilan bog'langan va siz ushbu kalitlar yordamida saqlangan ma'lumotlarni olishingiz yoki yangilashingiz mumkin. Kalit - bu saqlangan ma'lumotlarni noyob tarzda aniqlash va unga kirish imkonini beruvchi qator identifikatori. Mojarolarni oldini olish va ma'lumotlarni to'g'ri qayta tiklashni ta'minlash uchun mazmunli va noyob kalitlardan foydalanish muhimdir. 4
Shared preferencesni dasturga import qilish: import 'package:shared_preferences/shared_preferences.dart'; Shared preferences bilan ma’lumotni saqlash: SharedPreferences prefs = await SharedPreferences.getInstance(); prefs.setBool('isLogged', true); prefs.setInt('userAge', 25); prefs.setDouble('userRating', 4.5); prefs.setString('userName', 'John Doe'); Shared preferences bilan ma’lumotni o’qish: bool isLogged = prefs.getBool('isLogged') ?? false; int userAge = prefs.getInt('userAge') ?? 0; double userRating = prefs.getDouble('userRating') ?? 0.0; String userName = prefs.getString('userName') ?? 'Guest'; Shared preferences bilan ma’lumotni o’chirish: prefs.remove('isLogged'); 1.3.Animatsiyaga ega text (Animated text kit paketi) Flutter-dagi matn animatsiyalari uchun mashhur paketlardan biri bu ‘animated_text_kit’ paketdir. U Flutter ilovalaringizga osongina qo'shishingiz mumkin bo'lgan foydalanishga tayyor animatsion matn vidjetlari to'plamini taqdim etadi. Paket Typer, Typewriter, Fade, Scale va boshqalar animated_text_kit kabi turli xil animatsion matn uslublarini taqdim etadi . Siz paket tomonidan taqdim etilgan turli parametrlar yordamida jonlantirilgan matnning ko'rinishi va harakatini sozlashingiz mumkin. “animated_text_kit” paketini ishlatilishi: import 'package:flutter/material.dart'; 5