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

Birinchi dastur

Flutter SDK-ni o'rnatgandan so'ng, birinchi asosiy dasturni yarataylik.

Windows-da dastur yaratish

Avvalo, qattiq diskingizda Flutter loyihalari uchun katalog yarating. Masalan, mening holatimda bu C: \ fluttersrc katalogi.

Keling, buyruq satrini / konsolni ochamiz va cd buyrug'i yordamida yaratilgan katalogga o'tamiz. Keyin quyidagi buyruqni kiriting:

flutter create myapp

Bu buyruq joriy papkada myapp nomli loyihani yaratadi.

Natijada ancha murakkab tuzilishga ega yirik loyiha yaratiladi.

Loyiha tuzilishining asosiy elementlari:

Dart-tool papkasi - foydalanilgan paketlar haqidagi ma'lumotlarni saqlaydigan maxsus papka
.Idea papkasi - asosiy konfiguratsiyani o'z ichiga olgan Android Studio uchun maxsus papka
Android papkasida Dart ilovasini Android bilan bog'lash imkonini beruvchi kod va qo'shimcha fayllar mavjud
iOS papkasida Dart ilovangizni iOS bilan bog'lash imkonini beruvchi kod va qo'shimcha fayllar mavjud
Buid papkasida dasturni yaratish jarayoni tomonidan yaratilgan fayllar mavjud
lib papkasida haqiqiy Dart ilovasi fayllari mavjud. Flutter-da dastur yaratishda asosiy ish aynan shu papkada amalga oshiriladi

Test papkasi testlar bilan fayllarni saqlash uchun mo'ljallangan

Veb-papkada Flutter-da veb-ilovani yaratish uchun kod va qo'shimcha fayllar mavjud
Pubsec.yaml fayli loyiha konfiguratsiyasini, xususan, loyiha paketini, bog'liqliklar ro'yxatini va boshqalarni saqlaydi.
Ushbu loyihada biz ishga tushirishimiz mumkin bo'lgan eng minimal funksiya mavjud.

Ilovani ishga tushirish va sinab ko'rish uchun biz emulyatorlar yoki haqiqiy qurilmalardan foydalanishimiz mumkin. Flutter-da veb-ilovalarni ishga tushirish uchun brauzerlar shartli "qurilmalar" sifatida ishlatiladi. Ish stoli ilovalarini sinab ko'rish uchun joriy kompyuter.

Loyihani ishga tushirish uchun qurilma mavjudligini tekshirish uchun buyruq satrida/konsolida quyidagi buyruqni bajarishingiz mumkin:

flutter devices

Shunday qilib, skrinshotda sinov uchun menda uchta "qurilma" borligini ko'rishingiz mumkin. Birinchisi Nexus 5X mobil qurilmasi boʻlib, u Android ilovasiga matn yozish uchun moʻljallangan. Boshqa ikkita qurilma, Chrome va Microsoft Edge, veb-ilovani sinab ko'rish uchun mo'ljallangan. Qayd etish joizki, skrinshotdan ko‘rinib turibdiki, Google Chrome brauzeri “chrome”, Microsoft Edge esa “chekka”, Nexus 5X esa “013a70d5bc970c2c” deb belgilangan. Ushbu teglar loyihani boshlashda ma'lum bir qurilmada loyihani ishga tushirishga imkon beradi. Odatiy bo'lib, ro'yxatdagi birinchi qurilma tanlangan.

Androidda ilovani ishga tushirish

Sinov uchun mobil qurilmadan foydalanish uchun haydovchi ishlab chiqarish mashinasiga o'rnatilishi kerak. Agar OS Windows 10 bo'lsa, unda, qoida tariqasida, tizimning o'zi drayverni yangilash markazi orqali topishi va uni o'rnatishi mumkin. Agar operatsion tizim Windows bo'lsa, siz Google Usb Driver paketini ham o'rnatishingiz kerak. Ushbu paketni Android SDK menejeri orqali o'rnatishingiz mumkin.

Bundan tashqari, mobil qurilmada ishlab chiqish rejimi va USB orqali nosozliklarni tuzatish yoqilgan bo'lishi kerak.
Loyihaning buyruq qatorini/konsolini ishga tushirish va cd buyrug'i yordamida myapp katalogiga o'ting. Keyin loyihani ishga tushiramiz va buning uchun quyidagi buyruqni kiritamiz:

flutter run

Iltimos, dasturni loyiha papkasidan kompilyatsiya qilishingiz va ishga tushirishingiz kerakligini unutmang

Natijada, apk paketi kompilyatsiya qilinadi, keyin u ulangan Android qurilmasiga o'rnatiladi. Butun jarayon ancha uzoq davom etishi mumkin, ayniqsa uni birinchi marta boshlaganingizda. Natijada, ulangan qurilmada standart tarkibga ega dastur ishga tushadi:

Ushbu ilova qayerda aniqlanadi? Loyihada lib papkasida main.dart faylini topishimiz mumkin

Odatiy bo'lib, u quyidagi tarkibga ega:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

import 'package:flutter/material.dart';   void main() {   runApp(const MyApp()); }   class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);     // This widget is the root of your application.   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Flutter Demo',       theme: ThemeData(         // This is the theme of your application.         //         // Try running your application with "flutter run". You'll see the         // application has a blue toolbar. Then, without quitting the app, try         // changing the primarySwatch below to Colors.green and then invoke         // "hot reload" (press "r" in the console where you ran "flutter run",         // or simply save your changes to "hot reload" in a Flutter IDE).         // Notice that the counter didn't reset back to zero; the application         // is not restarted.         primarySwatch: Colors.blue,       ),       home: const MyHomePage(title: 'Flutter Demo Home Page'),     );   } }   class MyHomePage extends StatefulWidget {   const MyHomePage({Key? key, required this.title}) : super(key: key);     // This widget is the home page of your application. It is stateful, meaning   // that it has a State object (defined below) that contains fields that affect   // how it looks.     // This class is the configuration for the state. It holds the values (in this   // case the title) provided by the parent (in this case the App widget) and   // used by the build method of the State. Fields in a Widget subclass are   // always marked "final".     final String title;     @override   State createState() => _MyHomePageState(); }   class _MyHomePageState extends State {   int _counter = 0;     void _incrementCounter() {     setState(() {       // This call to setState tells the Flutter framework that something has       // changed in this State, which causes it to rerun the build method below       // so that the display can reflect the updated values. If we changed       // _counter without calling setState(), then the build method would not be       // called again, and so nothing would appear to happen.       _counter++;     });   }     @override   Widget build(BuildContext context) {     // This method is rerun every time setState is called, for instance as done     // by the _incrementCounter method above.     //     // The Flutter framework has been optimized to make rerunning build methods     // fast, so that you can just rebuild anything that needs updating rather     // than having to individually change instances of widgets.     return Scaffold(       appBar: AppBar(         // Here we take the value from the MyHomePage object that was created by         // the App.build method, and use it to set our appbar title.         title: Text(widget.title),       ),       body: Center(         // Center is a layout widget. It takes a single child and positions it         // in the middle of the parent.         child: Column(           // Column is also a layout widget. It takes a list of children and           // arranges them vertically. By default, it sizes itself to fit its           // children horizontally, and tries to be as tall as its parent.           //           // Invoke "debug painting" (press "p" in the console, choose the           // "Toggle Debug Paint" action from the Flutter Inspector in Android           // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)           // to see the wireframe for each widget.           //           // Column has various properties to control how it sizes itself and           // how it positions its children. Here we use mainAxisAlignment to           // center the children vertically; the main axis here is the vertical           // axis because Columns are vertical (the cross axis would be           // horizontal).           mainAxisAlignment: MainAxisAlignment.center,           children: [             const Text(               'You have pushed the button this many times:',             ),             Text(               '$_counter',               style: Theme.of(context).textTheme.headline4,             ),           ],         ),       ),       floatingActionButton: FloatingActionButton(         onPressed: _incrementCounter,         tooltip: 'Increment',         child: const Icon(Icons.add),       ), // This trailing comma makes auto-formatting nicer for build methods.     );   } }

U Dart dasturlash tilida amalda dastur yaratadigan bir qancha sinflarni belgilaydi.
Internetda ilovani ishga tushirish

Biroq, standart loyiha iOS va Web uchun ham qo'llab-quvvatlanadi. Keling, brauzerda veb-ilovaga matn kiritish uchun loyihani qanday ishga tushirishni ko'rib chiqaylik. Shunday qilib, yuqoridagi skrinshotda menda uchta "qurilma" borligini ko'rishingiz mumkin edi. Ulardan biri "chrome" deb nomlangan Google Chrome. Buning uchun quyidagi buyruqni kiriting:

flutter run -d chrome

Ya'ni, loyihani boshlash uchun yana bir xil flutter run buyrug'i kiritiladi. Faqat hozir, -d bayrog'idan foydalanib, siz loyiha ishlaydigan qurilmani belgilaysiz. Ushbu bayroq qurilmaning matn yorlig'i orqali uzatiladi - bu holda "chrome" (ya'ni Google Chrome brauzeri) va veb-ilova shunga mos ravishda ishga tushiriladi.

Shunga ko'ra, agar men Microsoft Edge-da loyihani ishga tushirmoqchi bo'lsam, tegishli matn yorlig'ini ko'rsatishim kerak bo'ladi:

flutter run -d edge

Veb ostida loyihani ishga tushirganingizda, ilova o'rnatilgan sinov veb-serveri ishga tushiriladi va keyin ilovaga kirish uchun veb-brauzer ishga tushiriladi. Natijada, brauzerda biz Android-dagi kabi bir xil mantiqqa ega deyarli bir xil interfeysni ko'ramiz:

Ilovani qayta ishga tushiring

Agar loyiha flutter run buyrug'i yordamida allaqachon ishga tushirilgan bo'lsa, siz dastur kodini o'zgartirishingiz va dasturni qayta yuklash uchun buyruq satriga "r" belgisini kiritishingiz mumkin (Hot qayta yuklash deb ataladi). Ammo shuni ta'kidlash kerakki, qayta yuklash har doim ham ishlamasligi mumkin. Bunday holda siz flutter run buyrug'ini qayta ishga tushirishingiz mumkin. Ilova shunga qarab o'zgaradi:
MacOSdagi birinchi dastur

MacOS-da dastur yaratish Windows-dagi tegishli jarayondan unchalik farq qilmaydi.

Avvalo, qattiq diskingizda Flutter loyihalari uchun katalog yarating. Masalan, mening holimda bu Hujjatlar \ fluttersrc katalogi.
Terminalni ochamiz va cd buyrug'i yordamida yaratilgan katalogga o'tamiz. Keyinchalik, buyruq yordamida joriy terminal oynasi uchun bin papkasiga yo'l qo'shing:

export PATH="$PATH:[Путь к папке с Flutter SDK]/flutter/bin"

Va keyin loyihani yaratish uchun buyruqni kiritamiz:

Keyin cd buyrug'i yordamida myapp katalogiga o'tamiz. Keyinchalik, joriy terminal oynasi uchun bin papkasiga yo'l qo'shing va loyihani ishga tushiring va buning uchun biz quyidagi buyruqni kiritamiz: