My_Flutter_Learning_note

Berdebar

• perkenalan

Apa

• Kerangka kerja
• open source
• Aplikasi multi-platform dari basis kode tunggal (Cross PateForm).

Mengapa menggunakan Flutter

Flutter mengubah proses pengembangan aplikasi. Membangun, menguji, dan menggunakan aplikasi seluler, web, desktop, dan tertanam yang indah dari basis kode tunggal.

siapa yang berkembang

• Dikembangkan oleh Google.
• diperkenalkan pada tahun 2015.
• dirilis pada 2017.

instalasi

Pengaturan Envoirement

• Buka Palet Perintah. .

• Shift+CMD+P pada Mac OS.

• Shift+Ctrl+P pada Windows.

• Jenis Proyek Baru

• Pilih Pilih Proyek Baru

• Pilih Aplikasi

• Pilih jalur proyek tempat Anda ingin menempatkan proyek Anda.

• Masukkan Nama Proyek Anda

• tekan enter

Ooooo ... sudah selesai

• Anda dapat melakukan apa pun di sini yang Anda inginkan dalam proyek Anda.
• Di sini berarti lib/main.dart ## di bawah lib folder Main.dart tersedia.

Aplikasi Flutter Pertama

Salin pasta dari dokumentasi resmi Ikuti URL? https://codelabs.developers.google.com/codelabs/flutter-codelab-first#2

Menambahkan tombol

ElevatedButton (Onpressed: () {
cetak ('tombol berikutnya ditekan'); }, anak: teks ('selanjutnya'),),

utama () atau fungsi utama

hanya memberi tahu untuk menjalankan aplikasi flutter. yang didefinisikan dalam fungsi myfunction () ex. void main () {runapp (myfunction ()); }

Widget adalah elemen dari mana Anda membangun setiap aplikasi Flutter.

Seperti yang Anda lihat, bahkan aplikasi itu sendiri adalah widget.

Mantan. 1.StatelessWidget 2. CatTateFulWidget

class myApp () {#The titik awal aplikasi Anda.

}

• MyAppstate # mendefinisikan status aplikasi Anda

• MyAppState # mendefinisikan data yang perlu dilakukan aplikasi. Saat ini, hanya berisi satu variabel dengan pasangan kata acak - - - arus acak. Anda akan menambahkan ini nanti.

• ChangeNoTifier

• cara untuk mengelola status aplikasi dalam flutter. Juga cara -cara Maney Powefull dapat disia -siakan.

• Kelas negara bagian memperluas ChangeNotifier yang berarti bahwa ia dapat memberi tahu orang lain tentang perubahannya sendiri.

• Setiap widget mendefinisikan metode build () yang secara otomatis dipanggil setiap kali keadaan widget berubah sehingga widget selalu terkini.

• MyHomePage melacak perubahan pada keadaan aplikasi saat ini menggunakan metode menonton.

• Scaffold (): # Ini adalah widget yang membantu dan ditemukan di sebagian besar aplikasi flutter dunia nyata.

• Kolom (): # adalah salah satu widget tata letak paling dasar dalam flutter.

• WordPair # menyediakan beberapa pengambil yang bermanfaat, seperti Aspascalcase atau Assnakecase. Di sini, kami menggunakan Aslowercase

Pemformatan kode flutter

https://docs.flutter.dev/development/tools/formatting

Kode Flutter sering melibatkan membangun struktur data berbentuk pohon yang cukup dalam, misalnya dalam metode build. Untuk mendapatkan pemformatan otomatis yang baik, kami sarankan Anda mengadopsi koma trailing opsional. Pedoman untuk menambahkan koma trailing sederhana: Selalu tambahkan koma trailing di akhir daftar parameter dalam fungsi, metode, dan konstruktor di mana Anda peduli untuk menjaga format yang Anda buat. Ini membantu formatter otomatis untuk memasukkan jumlah istirahat garis yang sesuai untuk kode gaya flutter.

• getNext ()
• Yang tersisa hanyalah memanggil metode GetNext dari panggilan balik tombol.
• Membuat aplikasi lebih cantik
• Ekstrak widget
• Garis yang bertanggung jawab untuk menunjukkan pasangan kata saat ini terlihat seperti ini sekarang: teks (appstate.current.aslowercase). Untuk mengubahnya menjadi sesuatu yang lebih kompleks, merupakan ide bagus untuk mengekstrak garis ini menjadi widget terpisah. Memiliki widget terpisah untuk bagian logis terpisah dari UI Anda adalah cara penting untuk mengelola kompleksitas dalam flutter.

Tambahkan kartu

Refactor

Ekstrak widget

• Pilih Teks Klik pada Refactor
• Klik Widget Ekstrak
• Masukkan nama widget
• Kelas akan dibuat sebagai nama yang Anda masukkan

lapisan

• Pilih teks
• klik kanan
• Pilih Refactor
• Pilih Bungkus dengan Padding
• Tekan enter

// Catatan: Flutter menggunakan komposisi atas warisan kapan pun bisa. Di sini, alih -alih bantalan menjadi atribut teks, ini widget!

// Dengan cara ini, widget dapat fokus pada tanggung jawab tunggal mereka, dan Anda, pengembang, memiliki kebebasan total dalam cara menyusun UI Anda. Misalnya, Anda dapat menggunakan widget padding untuk memadukan teks, gambar, tombol, widget khusus Anda sendiri, atau seluruh aplikasi. Widget tidak peduli apa yang dibungkus.

Tema dan gaya

Fungsionalitas

1. Pilih widget tata letak.
2. Widget yang terlihat (teks, gambar, ikon).
3. Tambahkan widget yang terlihat ke widget tata letak.
4. Aplikasi material.
5. Aplikasi non-material.

Tugas selesai

• Buat tata letak
• tambahkan gambar
• tambahkan judul
• Tambahkan subtitle
• tambahkan ikon peringkat seperti
• Tambahkan ikon panggilan
• Tambahkan label
• Tambahkan ikon rute
• Tambahkan label
• Tambahkan ikon Bagikan
• Tambahkan label
• Tambahkan teks (Discription)

Membuat aplikasi yang responsif dan adaptif

• Kelas LayoutBuilder 'Membangun pohon widget yang dapat bergantung pada ukuran widget induk.'

• Aspectratio ('widget yang berupaya mengukur anak ke rasio aspek tertentu.').

• CustomSingLechildLayout ('Widget yang Menolak Tata Letak Anak Lajang ke Delegasi.')

• Singlechildlayoutdelegate, ('yang mengontrol tata letak anak.')

• Custommultichildlayout ('yang menggunakan delegasi untuk memposisikan banyak anak.')

• Fitedbox ('skala dan posisi anaknya di dalam dirinya sendiri sesuai dengan fit.')

• Kotak fraksionis

• LayoutBuilder

• Media

• MediaQueryData

• OrientationBuilder

Widget tata letak

Anak tunggal

• Sejajarkan- menyelaraskan- seorang anak di dalam dirinya sendiri. Dibutuhkan nilai ganda antara -1 dan 1, untuk penyelarasan vertikal dan horizontal.

• Aspectratio berupaya ukuran anak terhadap rasio aspek tertentu.

• Kotak terbatas memberlakukan batasan ukuran pada anaknya, menawarkan kontrol atas ukuran minimum atau maksimum.

• CustomsingLechildLayout— Menggunakan fungsi delegasi untuk memposisikan seorang anak tunggal. Delegasi dapat menentukan kendala tata letak dan penentuan posisi untuk anak.

• Diperluas dan fleksibel - memungkinkan anak dari baris atau kolom untuk menyusut atau tumbuh untuk mengisi ruang yang tersedia.

• FRAKSIONALSIZEDBOX— Ukuran anaknya ke sebagian kecil dari ruang yang tersedia.

• LayoutBuilder— Membangun widget yang dapat memantulkan dirinya berdasarkan ukuran orang tuanya.

• SINGLECHILDSCROLLVIEW— Menambahkan pengguliran ke satu anak. Sering digunakan dengan baris atau kolom.

Multichild

• Kolom, baris, dan fleksibel - meletakkan anak -anak dalam satu horizontal atau vertikal. Kedua kolom dan baris memperluas widget flex.

• Custommultichildlayout - menggunakan fungsi delegasi untuk memposisikan banyak anak selama fase tata letak.

• Aliran - serupa dengan custommultichildlayout, tetapi lebih efisien karena dilakukan selama fase cat daripada fase tata letak.

• ListView, GridView, dan CustomSCrollView - memberikan daftar anak -anak yang dapat digulir.

• Tumpukan - Layers dan Posisi banyak anak relatif terhadap tepi tumpukan. Fungsi serupa dengan posisi yang ditetapkan dalam CSS.

• Tabel - Menggunakan algoritma tata letak meja klasik untuk anak -anaknya, menggabungkan beberapa baris dan kolom.

• Bungkus - Gunakan anak -anaknya dalam berbagai lari horizontal atau vertikal.

• Animasi 'Blok bangunan utama dari sistem animasi adalah kelas animasi. Animasi mewakili nilai jenis tertentu yang dapat berubah selama masa animasi. Sebagian besar widget yang melakukan animasi menerima objek animasi sebagai parameter, dari mana mereka membaca nilai animasi saat ini dan yang mereka dengarkan untuk perubahan nilai itu. '

• AddListener 'Setiap kali nilai animasi berubah, animasi memberi tahu semua pendengar yang ditambahkan dengan AddListener. Biasanya, objek negara yang mendengarkan animasi memanggil SetState pada dirinya sendiri dalam panggilan balik pendengarnya untuk memberi tahu sistem widget yang perlu dibangun kembali dengan nilai baru animasi. '

• AnimatedWidget, 'paling berguna untuk widget animasi tanpa kewarganegaraan'

• AnimatedBuilder, 'berguna untuk widget yang lebih kompleks yang ingin memasukkan animasi sebagai bagian dari fungsi build yang lebih besar.'

• Animasi AddstatusListener 'juga menyediakan animationstatus, yang menunjukkan bagaimana animasi akan berkembang seiring waktu. '

• AnimationController ''