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

MaterialApp и Scaffold

MaterialApp vidjeti material dizayni uslubida grafik interfeys yaratish uchun moʻljallangan. Moddiy dizayn uslubidagi haqiqiy interfeysga qo'shimcha ravishda, ushbu vidjet ko'plab boshqa funktsiyalarni ta'minlaydi, masalan, navigatsiyani, dasturning turli qismlarini va hokazolarni aniqlash imkonini beradi. Keling, MaterialApp-dan foydalanishning ba'zi asoslarini ko'rib chiqishdan boshlaylik.

MaterialApp konstruktori munosib miqdordagi parametrlarga ega, ular orasida asosiy parametrni ajratib ko'rsatish kerak. Ushbu parametr yuklanganda MaterialApp ilovasida ko'rsatiladigan asosiy vidjetni o'rnatadi. Masalan:

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

import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Container( color: Colors.white, padding: EdgeInsets.only(top:25), child: Text("Flutter на METANIT.COM", style: TextStyle(fontSize: 22, color: Colors.black87), textAlign: TextAlign.center, textDirection: TextDirection.ltr), ), )); }

Iskala
Uy parametri uchun har qanday vidjetdan foydalanish mumkinligiga qaramasdan, aslida, qoida tariqasida, bu quvvatda Scaffold vidjeti ishlatiladi. Bu Material Design uslubi interfeysini yaratish uchun ishlatiladigan yana bir vidjet.

Scaffold sinfining konstruktori ham bir nechta parametrlarga ega, ulardan birinchi navbatda tana parametrini ajratib ko'rsatish kerak - u Scaffold-ning asosiy tarkibini boshqa vidjet shaklida o'rnatadi. Masalan:

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

import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Scaffold( body: Container( color: Colors.white, padding: EdgeInsets.only(top:25), child: Text("Flutter на METANIT.COM", style: TextStyle(fontSize: 22, color: Colors.black87), textDirection: TextDirection.ltr), ), ), )); }

AppBar
Scaffold konstruktorining boshqa parametrlaridan, sarlavha va mumkin bo'lgan piktogramma bilan yuqori satrni o'rnatadigan appBar parametrini ta'kidlash kerak. Bu parametr qiymat sifatida AppBar obyektini oladi.

AppBar ilovaga Material Design ko'rinishi va hissini berish uchun ishlatiladigan boshqa sinfni taqdim etadi.

AppBar vidjeti ham boy funksiyalarni taqdim etadi. Hozircha faqat AppBar konstruktorining matn parametri yordamida o'rnatiladigan sarlavhaga to'xtalamiz. Ushbu parametr Matn vidjetini qiymat sifatida qabul qiladi:

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

import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Scaffold( body: Text("MaterialApp in Flutter", style: TextStyle(fontSize: 22, color: Colors.black87), textDirection: TextDirection.ltr), appBar: AppBar( title: const Text("METANIT.COM"), ), ), )); }

Skrinshotdan ko'rinib turibdiki, bu holda biz ustiga hech qanday to'ldirishni o'rnatishimiz shart emas, Scaffold avtomatik ravishda asosiy tarkibni AppBar ostida joylashtiradi. Bundan tashqari, vidjetlar bir nechta standart ranglarni taqdim etadi.

Bundan tashqari, AppBar-dagi sarlavha shunchaki satrni emas, balki Matn vidjetini ifodalaganligi sababli, biz shunga mos ravishda ba'zi uslublarni qo'llashimiz mumkin, masalan, matn rangi va boshqalar.