Ստեղծեք ձեր առաջին հավելվածը Flutter-ում

և հասկանալ, թե ինչու է Flutter-ն այդքան հիանալի:

Այս բլոգում մենք կսովորենք, թե ինչպես օգտագործել Flutter-ը՝ ստեղծելու ձեր առաջին իրական աշխարհի խաչմերուկային կողմնացույց հավելվածը: Այսպիսով, եկեք սուզվենք դրա մեջ: 🚀

Այս բլոգի կոդը — LiquidatorCoder/nord (github.com)

Flutter-ի ներածություն

Flutter-ը Google-ի կողմից բաց կոդով շրջանակ է՝ գեղեցիկ, բնիկ կերպով կազմված, բազմահարթակ հավելվածներ ստեղծելու համար մեկ կոդի բազայից: Դա բավականին հեշտ է կարգավորել և գործարկել:

Սկսելու համար այցելենք Տեղադրել | Flutter և ներբեռնեք Flutter մեր օպերացիոն համակարգի համար: Ես օգտագործում եմ Windows համակարգիչ, ուստի կընտրեմ Windows-ը և այնուհետև կներբեռնեմ վերջին Flutter SDK-ն՝ սեղմելով հաջորդ էջի կապույտ կոճակը:

Հաջորդը, մենք հետևում ենք տեղադրման ուղեցույցի քայլերին և թարմացնում մեր միջավայրի ուղու փոփոխականները: Այնուհետև մենք գործարկում ենք flutter doctor-ը տերմինալում՝ ստուգելու, որ Flutter-ի տեղադրման գործընթացը ավարտված է:

Հաջորդը, մենք տեղադրում ենք Android Studio-ն՝ հետևելով այստեղ տրված քայլերին: Սա պետք է տևի ընդամենը մի քանի րոպե:

Դրանից հետո մենք վերջապես պատրաստ ենք կառուցել մեր հիանալի կողմնացույց հավելվածը Flutter-ում:

Ստացեք ոգեշնչում

Նախքան Flutter-ի հետ իրական ծրագրավորման մեջ մտնելը, եկեք տեսնենք որոշ կողմնացույց հավելվածներ, որոնք հասանելի են առցանց, չէ՞:

Այսպիսով, ես արագ փնտրեցի compass app UI google-ը և գտա մեր հավելվածի ճակատային մասի հիանալի ձևավորում:

Նշում — Քանի որ սա սկսնակների համար նախատեսված ձեռնարկ է, ես ձեզ խորհուրդ կտայի սկսել՝ հետևելով այլ մարդկանց UI-ներին, քանի որ UI դիզայնը դուրս է այս ձեռնարկի շրջանակներից:

Թեև երկրորդը դժոխք է (փառք Offriginal-ին), այնուամենայնիվ, ես որոշեցի գնալ առաջինի հետ, քանի որ այն մի փոքր ավելի պարզ է և նվազագույն (փառերը Marc Merle-ին):

Եկեք կոդավորենք

Այսպիսով, եկեք սկսենք ստեղծելով Flutter նախագիծ՝ օգտագործելով Flutter create հրամանը: Ես պատրաստվում եմ այս հավելվածին անվանել nord, քանի որ այն հիանալի է թվում: Ազատորեն անվանեք այն, ինչ ցանկանում եք:

flutter create --org com.abhay nord

Նաև արագ բոնուսային հուշում -› Ես ավելացրել եմ — org com.abhay պարամետրը ստեղծելու հրամանին՝ կազմակերպության անունը մեր մեկնարկային հավելվածում ավելացնելու համար: Սա օգնում է ստեղծել եզակի հավելվածի ID մեր հավելվածի համար, ինչպես այս դեպքում com.abhay.nord:

Հաջորդը, մենք կբացենք նախագիծը մեր ընտրած IDE-ի ներսում, որն իմ դեպքում VS Code-ն է: Եթե ​​ցանկանում եք ստեղծել VS Code ձեր Flutter նախագծերի համար, կարող եք հետևել այստեղ նշված քայլերին: Մենք նաև նախաստորագրելու ենք git-ը մեր նախագծի ներսում, քանի որ այն օգնում է նախագծի պահպանմանը:

cd nord
git init .
code . ; exit

Նախնական քայլեր

Նախքան կոդավորումը սկսելը, եկեք նայենք նախագծի գրացուցակի կառուցվածքին:

├───.gitignore
├───.metadata
├───.packages
├───analysis_options.yaml
├───nord.iml
├───pubspec.lock
├───pubspec.yaml
├───README.md
│
│
├───android/
│
├───ios/
│
├───lib
│       main.dart
│
├───test
│       widget_test.dart
│
├───web/
│
└───windows/

Լռելյայնորեն, մեր ամբողջ Dart կոդը (որը, ի դեպ, ծրագրավորման լեզուն է, որը մենք կօգտագործենք այս հավելվածը մշակելիս 😊) գտնվում է lib գրացուցակում: Մեր հավելվածի հիմնական մեկնարկային կետը main.dart ֆայլն է:

Քանի որ Flutter-ը հավելվածներ է ստեղծում Android-ի, iOS-ի, Web-ի, Windows-ի և այլնի համար, պլատֆորմների նույն անունով գրացուցակները պարունակում են վերջիններիս կազմաձևման կոդը: Օրինակ, android գրացուցակը պարունակում է Kotlin կոդը հիմնական գործունեության համար, Gradle ֆայլեր, հավելվածների պատկերակներ և հավելվածի այլ ռեսուրսներ:

Այժմ եկեք գործարկենք այս մեկնարկային նախագիծը: Հենց հիմա ես օգտագործում եմ ֆիզիկական սարք (այս դեպքում՝ իմ Android հեռախոսը)՝ հավելվածը ստեղծելու և վրիպազերծելու համար, բայց դուք կարող եք նաև օգտագործել վիրտուալ էմուլյատոր: Միացրեք ձեր սարքը ձեր համակարգչին, այնուհետև օգտագործեք Flutter run հրամանը՝ հավելվածի վրիպազերծման տարբերակը ստեղծելու համար:

flutter run

Հաջորդը, մենք կհեռացնենք main.dart ֆայլի ներսում եղած բոլոր մեկնաբանությունները: Մենք նաև կհեռացնենք MyHomePage դասը և դրա օրինակը MyApp դասի ներսում կփոխարինենք Container-ով (հիմնական վիջեթ, որը տրամադրվում է Flutter շրջանակի կողմից):

Ձեր հավելվածն այժմ պարզապես պետք է ցույց տա սև էկրան: Մի անհանգստացեք, մենք շուտով դա կշտկենք:

Բայց մինչ այդ, մենք պետք է ստեղծենք որոշ դիրեկտորիաներ մեր lib գրացուցակում:

Դրանք կօգնեն մեզ առանձնացնել մեր բիզնես տրամաբանությունը մեր հավելվածի միջերեսից:

Այժմ մենք կարող ենք սկսել աշխատել մեր կողմնացույցի տվյալների ծառայության և վերահսկիչի վրա, որը մեզ կտրամադրի իրական ժամանակի կողմնացույցի տվյալները մեր դիտումներում:

Սպասարկում և վերահսկիչ

Եկեք սկսենք ավելացնելով flutter_compassplugin-ը մեր նախագծին, որը կօգնի մեզ ստանալ կողմնացույցի տվյալները սարքի սենսորներից:

Եթե ​​դուք օգտագործում եք VS Code, ապա կարող եք օգտագործել Command Palette՝ կախվածությունները ավելացնելու համար: Հրամանների պալիտրա մուտք գործելու համար սեղմեք Ctrl+Shift+P ստեղնաշարի վրա: Այլապես, դուք կարող եք մուտք գործել այն View մենյուից:

Այստեղ մենք կօգտագործենք Dart: Add Dependecy հրամանը՝ flutter_compass կախվածությունը ավելացնելու համար:

Սա ավելացնելուց հետո մենք կարող ենք տեսնել, որ մեր pubspec.yaml ֆայլը թարմացվել է:

Այս plugin-ի տեղադրումն ավարտելու համար մենք պետք է որոշ թույլտվություններ ավելացնենք մեր AndroidManifest.xml ֆայլի ներսում մեր android նախագծի հիմնական գրացուցակի ներսում, ինչպես նշված է այստեղ:

Նշում — Այս քայլից հետո մենք պետք է վերակառուցենք մեր նախագիծը, որպեսզի այս թույլտվությունները կարողանան ավելացնել մեր հավելվածի ներսում:

Հաջորդը, մենք ստեղծում ենք ծառայություն կողմնացույցի տվյալների համար: Դա անելու համար մենք services գրացուցակում ստեղծում ենք compass_service.dart անունով ֆայլ: Այս ֆայլի ներսում մենք ստեղծում ենք դաս, որը կոչվում է CompassService: Այս դասը կծառայի որպես մեր հավելվածի մեր կողմնացույցի տվյալների հիմնական տվյալների ծառայություն:

Մենք նաև կստեղծենք ստացող՝ ընթացիկ կողմնացույցի տվյալների հոսքը ստանալու համար: Եթե ​​դուք ծանոթ չեք Dart-ում ստացողներին և սեթերներին, ապա պետք է ստուգեք այս բլոգը:

import 'package:flutter_compass/flutter_compass.dart';
class CompassService {
  // Getter to get current heading data stream
  Stream<double?>? get compassHeadingStream {
    return FlutterCompass.events?.map((event) => event.heading);
  }
}

Հաջորդը, մենք կավելացնենք ստացող կողմնացույցի ուղղության համար, որը մեզ ցույց է տալիս կողմնացույցի ուղղությունը:

// Getter to get current heading direction stream
Stream<String>? get compassDirectionStream {
  return FlutterCompass.events?.map((event) {
    final heading = event.heading ?? 0;
    if (heading >= 0 && heading <= 22.5 && heading >= 337.5) {
      return 'N';
    } else if (heading > 22.5 && heading <= 67.5) {
      return 'NE';
    } else if (heading > 67.5 && heading <= 112.5) {
      return 'E';
    } else if (heading > 112.5 && heading <= 157.5) {
      return 'SE';
    } else if (heading > 157.5 && heading <= 202.5) {
      return 'S';
    } else if (heading > 202.5 && heading <= 247.5) {
      return 'SW';
    } else if (heading > 247.5 && heading <= 292.5) {
      return 'W';
    } else if (heading > 292.5 && heading <= 337.5) {
      return 'NW';
    } else {
      return 'N';
    }
  });
}

Դասարանում ես նաև մի քանի ռեֆակտորինգ արեցի՝ մի փոքր մաքրելու համար:

Այժմ մենք կստեղծենք վերահսկիչ, որը տվյալները կտրամադրի դիտումներին: Այս կարգավորիչը ստեղծելու համար մենք controllers գրացուցակում ստեղծում ենք compass_controller.dart անունով ֆայլ: Այս ֆայլում մենք ստեղծում ենք դաս, որը կոչվում է CompassController: Մենք նաև ավելացնում ենք ChangeNotifier mixin-ը մեր դասարանում՝ with հիմնաբառով: Միքսների և with հիմնաբառի մասին ավելին իմանալու համար այցելեք այս էջը: Մենք ավելացրել ենք ChangeNotifier mixin-ը, որպեսզի կարողանանք օգտագործել notifiyListeners մեթոդը՝ թարմացնելու մեր տեսքը, երբ տվյալները փոխվում են:

Մի անհանգստացեք, եթե դուք շատ բան չգիտեք այս պայմանների կամ պետական ​​կառավարման մասին, բայց հիշեք, որ սա ոչ միայն օգնում է պահպանել մեր կոդը մաքուր և պահպանելի, այլ նաև նվազեցնում է անհարկի կառուցումների կամ հիշողության արտահոսքի ռիսկը:

Հաջորդը, մենք կբացահայտենք ծառայության տվյալները վերահսկիչի ներսում՝ լսելով դասի կոնստրուկտորի ներսում հոսքերը:

Մենք նաև ավելացնում ենք dispose մեթոդը և չեղարկում հեռարձակման այս բաժանորդագրությունները՝ հեռարձակումը լսելուց հետո օգտագործված ռեսուրսներն ազատելու համար:

Այս dispose մեթոդը նույնպես անտեսում է ChangeNotifier mixin-ի համանուն մեթոդը:

Վերջապես, մենք կարող ենք սկսել աշխատել մեր հավելվածի դիտումների (էկրանների) վրա։

Դիտումներ

Նշում — Քանի որ հետագա քայլերը կպահանջեն կոդի զգալի քանակություն, ես խորհուրդ եմ տալիս բացել այս նախագծի կոդային ֆայլերը GitHub-ում այստեղից և հետևել commit by commit կոդը:

Այսպիսով, առաջին հերթին եկեք ստեղծենք գլխավոր էջ: Ստեղծեք նոր ֆայլ home_page.dart pages գրացուցակում և այնուհետև դրանում ավելացրեք քաղաքացիություն չունեցող վիջեթ HomePage:

Վիջեթների մասին լրացուցիչ տեղեկությունների համար այցելեք այս էջը:

Այս վիջեթի կառուցման մեթոդում մենք առայժմ կվերադարձնենք փայտամած վիջեթը: Հաջորդը, մենք կավելացնենք այս վիջեթը MyApp քաղաքացիություն չունեցող վիջեթի կառուցման մեթոդին, որպեսզի կարողանանք սկսել աշխատել գլխավոր էջում:

Եկեք սկսենք մեր փայտամածին ֆոն ավելացնելով: Մենք կավելացնենք շառավղային գրադիենտ, որի գույներն ընտրել ենք նախկինում ընտրված UI դիզայնից:

Հաջորդը, մենք ցանկանում ենք ցույց տալ մեր կողմնացույցի ընթերցումները էկրանի կենտրոնում:

Դրա համար մենք ավելացնում ենք provider փաթեթը, որպեսզի օգտագործենք վերահսկիչի արժեքները՝ տեսքը թարմացնելու համար: Եթե ​​ցանկանում եք ավելին իմանալ provider-ի մասին, խորհուրդ եմ տալիս դիտել այս զարմանալի տեսանյութը Code-ից Անդրեայի հետ:

Ավելացրե՛ք provider փաթեթը այնպես, ինչպես ավելացրեցինք flutter_compass փլագինը:

Այժմ մենք ավելացնում ենք MultiProvider վիջեթը main.dart ֆայլի runApp մեթոդում: Սա ապահովում է, որ կարգավորիչը հասանելի է մեր վիջեթի ծառում:

Հաջորդը, մենք կօգտագործենք այս կարգավորիչը՝ home_page.dart-ում մեր տվյալները ստանալու համար: Դրա համար մենք նախ կստանանք CompassController-ի օրինակ:

Դրա համար ավելացրեք հետևյալ տողը HomePage վիջեթի կառուցման մեթոդի ներսում:

final CompassController _compassController = context.watch<CompassController>();

Այնուհետև մենք կարող ենք օգտագործել այս _compassController-ը տվյալների արժեքներ ստանալու համար և կարող ենք դրանք ցուցադրել Text վիջեթի միջոցով:

Text('${_compassController.compassHeading} ${_compassController.compassDirection}',
),

Վա՜յ 🎉 Մենք այժմ ունենք աշխատող հավելված:

Բայց դա լավ տեսք չունի 🤔։ Եկեք դա շտկենք:

Նախ, եկեք մեր էջին ավելացնենք կողմնացույցի մարմինը: Դա անելու համար ես ավելացրի մի փունջ SVG պատկերներ (հղում) և ֆոն՝ օգտագործելով CustomPainter, որը (դուք կռահեցիք) վիդջեթ է: Ես չեմ մանրամասնի այս CustomPainter վիջեթի մասին, քանի որ այն դուրս է այս ձեռնարկի շրջանակներից, բայց դուք կարող եք ավելին կարդալ CustomPainter-ի մասին այստեղ, ինչպես նաև ստուգել այս նախագծի սկզբնական կոդը GitHub-ում:

Նշում — SVG ֆայլերն օգտագործելու համար ես ավելացրեցի flutter_svg փաթեթը և ավելացրեցի այս SVG ֆայլերը որպես հաստատուն տողերի կոդ, որը կարող է մեկնաբանվել flutter_svg փաթեթով: Լրացուցիչ տեղեկություններ — այստեղ:

Այս վեկտորային պատկերները ավելացնելուց հետո UI-ն այսպիսի տեսք ունի.

Թարմացում — Ես այս SVG-ները փոխարինեցի PNG-ներով, քանի որ դրանցից ոմանք պահանջում էին SVG զտիչներ, որոնք ներկայումս չեն աջակցվում flutter_svg-ի կողմից: PNG պատկերներ ավելացնելու համար մենք նախ պետք է դրանք ավելացնենք մեր pubspec.yaml ֆայլում՝ որպես ակտիվներ, այնուհետև կարող ենք օգտագործել Image.asset վիջեթը՝ դրանք մեր հավելվածում օգտագործելու համար: Լրացուցիչ տեղեկություններ — այստեղ:

Լավ, սա լավ տեսք ունի, բայց հավելվածը դեռևս ինտերակտիվ չի զգում, քանի որ ներկայումս թարմացվում է միայն ուղղորդող տեքստը: Կարծում եմ, որ հավաքիչը նույնպես պետք է պտտվի և արձագանքի կողմնացույցի ուղղության փոփոխությանը: Եկեք ավելացնենք այս հիանալի փոխազդեցությունը բոնուսային անիմացիայի հետ:

Դրա համար մենք կավելացնենք AnimatedRotation վիջեթը որպես ծնող մեր կողմնացույցի համարին: Այս վիջեթը վերցնում է turns և duration որպես պահանջվող պարամետրեր: turns թույլ է տալիս մեզ նշել ընթացիկ ռոտացիան, և duration-ը վերցնում է անիմացիայի տևողության տևողությունը:

Ծանոթագրություն — turns պարամետրն ընդունում է ընթացիկ ռոտացիան որպես մի շարք պտույտներ, ուստի մենք compassHeading-ը կբաժանենք 360-ի: Բացի այդ, ??-ը տեգերում եթե զրոյական օպերատորն է, որը մենք օգտագործել ենք՝ նշելու պտույտները, երբ compassHeading-ը զրոյական է: . _screenHeight-ը և _screenWidth-ը պարզապես օգտագործվում են լայնությունը և բարձրությունը որպես սարքի էկրանի չափի մաս նշելու համար: Լրացուցիչ տեղեկություններ — այստեղ:

Վայելա Մեր հավելվածը պատրաստ է:

Շենքի թողարկման հավելվածների ստեղծում

Վերջնական android հավելված ստեղծելու համար (որը մենք կարող ենք գործարկել մեր android սարքերում), գործարկեք հետևյալ հրամանը.

flutter build apk --split-per-abi

Սա ստեղծում է բազմաթիվ apk ֆայլեր մեր հավելվածի համար: Կարդալ ավելին այստեղ:

Մենք կարող ենք նաև ստեղծել «ճարպային apk», որն աջակցում է Android-ի բոլոր ճարտարապետությունները, բայց չափերով զգալիորեն մեծ է՝ գործարկելով.

flutter build apk

Android հավելված ստեղծելու համար գործարկեք հետևյալ հրամանը.

flutter build appbundle

iOS և macOS հավելվածներ ստեղծելու համար մենք պետք է flutter-ը տեղադրենք Mac սարքի վրա:

iOS-ի համար ստեղծելու համար գործարկեք —

flutter build ipa

Նշում. Քանի որ flutter_compass հավելվածն աջակցում է միայն Android-ին և iOS-ին, այլ հարթակների համար նախատեսված կառուցվածքները ճիշտ չեն աշխատի և չեն ցուցադրի կողմնացույցի ընթերցումը:

Windows-ի հավելված ստեղծելու համար գործարկեք flutter build windows
MacOS-ի համար ստեղծելու համար գործարկեք flutter build macos

Նշում — Դուք պետք է ակտիվացնեք Flutter-ի աշխատասեղանի աջակցությունը՝ նախ գործարկելով flutter config --enable-windows-desktop-ը և flutter config --enable-macos-desktopայնուհետև կաշխատեն միայն վերը նշված հրամանները: Կարդալ ավելին այստեղ:

Այս հավելվածի կոդը GitHub-ում — https://github.com/LiquidatorCoder/nord

Ինչու՞ է Flutter-ն այդքան հիանալի:

Այսպիսով, վերջապես մենք դա գիտենք: Flutter-ը հիասքանչ է, քանի որ մենք կարողացանք ստեղծել խաչաձև հարթակ, իրական աշխարհի հավելված՝ պահպանվող և մասշտաբային կառուցվածքով մեկ օրվա ընթացքում, եթե ոչ ժամերի ընթացքում: Մենք կարողացանք մի քանի առանձնահատկություններ ավելացնել մեր հավելվածին՝ Flutter համայնքի մի քանի հիանալի «pub.dev» փաթեթների օգնությամբ: Հավելվածն աշխատում է գրեթե բնիկ կատարողականությամբ, և մենք կարիք չունենք անհանգստանալու երկար բեռնման ժամանակի համար:

Դա փաթաթված է:

վերջ Շնորհակալություն կարդալու համար: Չմոռանաք հետևել ինձ Twitter կամ GitHub՝ Flutter-ի ավելի հիանալի խորհուրդների և հնարքների համար:

Կտեսնվենք! 👋🏻

Twitter — Abhay Maurya 💙 (@LiquidatorAB) / Twitter
GitHub — LiquidatorCoder (Abhay Maurya) (github.com)