Flutter ramka uchun qo'llanma 1-bob. Flutterga kirish Flutter nima. O'rnatish

Visual Studio kodidagi birinchi dastur

Bugungi kunda eng mashhur matn muharrirlaridan biri bu Visual Studio Code. Va Google Flutterni ishlab chiqish uchun plaginni taqdim etadi.

Uni o'rnatish uchun "Ko'rish" -> "Kengaytmalar" menyusiga o'ting.

Bu kengaytma panelini ochadi. Qidiruv maydoniga "Flutter" so'zini kiritamiz:

Sizga kerak bo'lgan plagin "Flutter" deb nomlangan (odatda qidiruv natijalarida birinchi natija). Va uni o'rnatish uchun "O'rnatish" tugmasini bosing.

Ushbu plagin Dart plaginiga bog'liq bo'lgani uchun Dart plagini ham avtomatik ravishda o'rnatiladi.

Plaginni o'rnatgandan so'ng, birinchi loyihani yaratamiz. Buning uchun menyuning View -> Buyruqlar palitrasi bandiga o'ting. Ochilgan qidiruv oynasida "flutter" so'zini kiriting va natijalar orasida Flutter: New Application Project ni tanlang.

Keyin, yangi oynada, loyiha joylashgan papkani tanlang

Keyin yangi oynada loyiha nomini kiriting, masalan, "hello_app" va Enter ni kiriting

Natijada oldingi maqolalardagi kabi tuzilishga ega loyiha yaratiladi. main.dart fayli matn muharririda ochiladi:

Ilovani ishga tushirish uchun Android mobil qurilmasini kompyuterga ulang va Visual Studio Code-da Run -> Start Debugging menyusi bandiga o'ting. (Agar disk raskadrovka biz uchun muhim bo'lmasa va biz loyihani doimiy ravishda ishga tushirmoqchi bo'lsak, unda Nosozliklarni tuzatishsiz ishga tushirish bandi tanlanadi)

Bu ilovani yaratadi. Yuqoridagi VS kodi disk raskadrovka boshqaruv panelini ko'rsatadi va pastda barcha disk raskadrovka ma'lumotlarini ko'rsatadi.

Ilova esa mobil qurilmalarda ishga tushiriladi

Vidjetlar bilan tanishtirish

Flutter ilovasining markaziy qismi vidjetlardir. Aslida, bu grafik interfeysni tashkil etuvchi vizual komponentlardir.

Keling, eng oddiy misolni ko'rib chiqaylik. Avvalo, keling, yangi Flutter loyihasini yarataylik.

Odatiy bo'lib, dastur kodi lib / main.dart faylida joylashgan. Keling, ushbu faylni ochamiz va uning mazmunini o'zgartiramiz:

1 2 3 4 5 6 7 8 9 10 11

import 'package:flutter/material.dart'; void main() { runApp( Text( 'Привет Flutter!', textDirection: TextDirection.ltr, textAlign: TextAlign.center, ), ); }

Flutter ilovasining bajarilishi asosiy funksiyadan boshlanadi. GUI yaratish uchun bu funksiya boshqa o'rnatilgan funksiyani chaqiradi - runApp (Vidjet ilovasi). U ekranga ma'lum bir vidjetni biriktiradi. Ya'ni, aslida, dastur qurilma ekranida ishga tushirilganda biz buni ko'ramiz. Biriktirilgan vidjet parametr sifatida runApp () funksiyasiga uzatiladi.

Barcha vidjetlar Widget sinfidan meros bo'lib qoladi. Bunday holda, Matn vidjeti matnni ekranda ko'rsatish uchun mo'ljallangan runApp funksiyasiga o'tkaziladi. Uning uchta xususiyati ushbu sinf konstruktori orqali o'rnatiladi. Avvalo, “Hello Flutter!” qatori uzatiladigan ekran matni. Shuningdek, matn yo‘nalishini o‘rnatuvchi va TextDirection.ltr qiymatini (matnning chapdan o‘ngga yo‘nalishini) qabul qiluvchi textDirection xossasi va matnning gorizontal tekislanishini o‘rnatuvchi va matnni qabul qiluvchi textAlign xossasi o‘rnatiladi. qiymati TextAlign.center (ya'ni matn markazlashtirilgan).

Kodni o'zgartirgandan so'ng, Android Studio sinov fayllari jildini yaroqsiz deb belgilashi mumkin, chunki biz test faylini o'zgartirmasdan dastur kodini o'zgartirdik:

Ammo ayni paytda siz ushbu daqiqani e'tiborsiz qoldirishingiz mumkin. Bundan tashqari, widget_test.dart fayli hozircha butunlay o'chirilishi mumkin.

Shunday qilib, biz eng minimal Flutter ilovasini aniqladik. Natijada, dasturni ishga tushirganda, biz qurilmaning yuqori markazida qidiruv matnini ko'ramiz:

Ba'zi vidjetlar boshqalarni o'z ichiga olishi mumkin, shuning uchun daraxt shaklida ierarxik tizimni tashkil qiladi. Masalan, matnni vertikal ravishda ekranning o'rtasiga joylashtiramiz. Buning uchun Align vidjetidan foydalanamiz:

1 2 3 4 5 6 7 8 9 10 11 12 13

import 'package:flutter/material.dart'; void main() { runApp( Align( alignment: Alignment.center, child:Text( 'Привет Flutter!', textDirection: TextDirection.ltr, ), ), ); }

Endi runApp funksiyasiga uzatiladigan ildiz vidjeti Align vidjetidir. Alignment xususiyati ichki joylashtirilgan elementlarning hizalanishini belgilaydi. Bunday holda, Alignment.center qiymati tekislash gorizontal va vertikal ravishda markazlashtirilishini bildiradi.

Boshqa xususiyat, bola, ichki o'rnatilgan vidjetni ifodalaydi - bu holda, avval ishlatilgan Matn vidjeti.

Ilovani ishga tushirganimizda, biz Mos ravishda Align vidjetini ko'ramiz, uning ichida Matn vidjeti joylashgan: