Çırpınma - Videonun arxa planını necə əlavə etmək olar

Dart kodu və Android Emulatoru göstərən Android Studio şəkli.

Bəzən sərin bir xüsusiyyəti olan bir tətbiqlə rastlaşıram və necə etdiyini düşünürəm. Bu münasibətlə, arxa plan kimi bir video olan bir giriş ekranı idi. Gözəl bir toxunuş olduğunu düşündüm və tətbiqlərimdə də bunu edə biləcəyim barədə bir araşdırma apardım. Bu yazıda Flutter-dəki tətbiqetməyinizə bir video arxa planı necə əlavə edəcəyinizi öyrənəcəksiniz.

Fərziyyələr

Flutter üçün bir inkişaf mühitinin qurulduğunu və yeni bir layihə yarada biləcəyinizi güman edirəm. Bir mühit qurmağınız yoxdursa, aşağıdakı linki nəzərdən keçirməyi məsləhət görürəm.

Çırpınma inkişafı üçün necə qurulacaq

Nəticə

Bu yazını oxuduqdan sonra aşağıda göstərilən nəticələrə nail olmalısınız.

Addım 1

Tətbiqimizin fonunda bir video əlavə etmək məqsədimizə çatmaq üçün, video_player adlı Flutter Paketindən istifadə edəcəyik. Quraşdırma təlimatlarını diqqətlə oxuduğunuzdan əmin olun. Xüsusilə bu paketi xatırladan hissə iOS simulyatorlarında işləmir və fiziki bir iOS cihazında sınaqdan keçirilməlidir. Android simulyatorları ilə bağlı heç bir probleminiz olmamalıdır.

Tətbiqinizin pubspec.yaml faylında video pleyerinizi asılılıqlarınıza əlavə edin.

2-ci addım

Pubspec.yaml faylımızı redaktə edərkən davam edək və aktivlərimizi quraq. Layihənizdə "aktivlər" adlı bir qovluq yaradın və qovluğa bir video əlavə edin. Nümunəmdə bir logo da əlavə etdim.

Həqiqi sənədlər layihənizə əlavə edildikdən sonra aşağıdakı kodu əlavə etməliyik.

3-cü addım

İndi ana.dart sənədimizə gedək və video pleyerimizi quraq. Kodumda, BackgroundVideo adlı Dövlətli Vidget yaratdım. _BackgroundVideoState sinifimdə aşağıdakı kod var. TODO 4-də gördüyünüz kimi, VideoPlayerController obyektini yaratmalıyıq. Sonra VideoPlayerController qurmaq üçün initState () metodunu ləğv edirik.

Tam tashabbState () metodu aşağıdadır. Əvvəlcə video nəzarətçisini əvvəlcədən əlavə etdiyimiz yerli video sənədimizə yönəldirik. Sonra nəzarətçi işə salındıqda videonu bir döngədə çalmağı söyləyirik.

Addım 4

İndi video nəzarət qurğumuz var, UI-də işə başlaya bilərik. Build () metodumuzda MaterialApp-ı geri qaytarırıq. Ev əmlakında uşaq kimi bir iskala sahib olan SafeArea vidjeti var. İskele'də bədən xüsusiyyətini Stack widget'a təyin etməliyik. Bu bizə arxa plan kimi bir video əlavə etməyə və sonra digər vidjetləri üstünə yığmağa imkan verəcəkdir.

Widget ağacındakı FittedBox-a diqqət yetirin. Videomun düzgün görünməsi üçün uyğunluğu BoxFit.fill-ə təyin etməliydim. Əsl video pleyerin SizedBox widgetının uşağı olduğunu görəcəksiniz.

Widget ağacınız indi görünməlidir.

5-ci addım

Etmək istədiyiniz son şey, dispet () metodunu ləğv etməkdir ki, tətbiqetmənin ömrü boyu video nəzarətçimizi düzgün idarə edə bilək.

Və bitirdin! Flutter Package video_player köməyi ilə tətbiqetməmizin fonunda uğurla bir video əlavə etdik.

Kodun bütövlükdə daha yaxşı görünməsi üçün layihəmi GitHub-da paylaşdım.

Github Repo: Flutter-də video arxa plan

Vaxtınız üçün təşəkkür edirəm və kodlaşdırma sərgüzəştlərinizdə ən yaxşısını diləyirəm!