Tentang Flutter, secara singkat: Dasar-dasar

Setelah laporan Yura Luchaninov , saya memutuskan untuk mencoba Flutter untuk diri saya sendiri. Untuk meregangkan otak, maka ada sesuatu yang dinginkan dengan para lelaki di dapur. Semuanya telah hilang. Saya mulai menonton, lalu membaca, lalu menulis. Dan semuanya tampak berhasil, aplikasi diluncurkan, dan apa yang mereka jelaskan dapat dimengerti, semuanya sederhana. Tapi bukan tanpa "tapi" - tidak semua orang menjelaskan. Dan karena platform, PL, pendekatan, dan bahkan area subjek adalah hal baru bagi saya, ini menjengkelkan, karena Anda "tidak memulai", dan Anda bahkan tidak tahu apa yang harus dicari di google: Dart / Flutter / Window / Layar / Rute / Widget?

Tentu saja, saya tidak ingin membaca ulang semua dokumentasi Dart, Flutter, dan widgetnya, karena saya tidak punya banyak waktu, dan saya hanya ingin melihat Flutter lebih dekat. Akan lebih bagus jika ada panduan kecil yang menjelaskan semua yang Anda butuhkan, tetapi tidak lebih, untuk memahami dan menulis aplikasi yang tidak terlalu rumit di Flutter!

Tentang panduan ini

Sebagian besar artikel tentang topik ini ditulis dengan baik dan tidak rumit. Masalahnya adalah bahwa kebanyakan dari mereka membutuhkan pengetahuan yang dianggap dasar fundamental, yang, bagaimanapun, tidak disebutkan dalam artikel lain yang menjelaskan dasar-dasar. Dalam seri artikel ini, saya ingin memperbaiki situasi ini. Mari kita mulai dari awal dan, tanpa meninggalkan yang di atas tanpa perhatian, kita akan meluncurkan satu atau beberapa aplikasi. Dalam prosesnya, kita akan belajar bagaimana menggunakan semua komponen utama , membuat antarmuka yang unik , bekerja dengan modul asli , dan, tentu saja, merakit aplikasi Anda untuk kedua platform .

Saya akan menulis dari sudut pandang pengembang web. Sebagian besar dari Anda kemungkinan besar akrab dengan tumpukan web, dan analogi dengan platform akrab lebih baik daripada analogi dengan membangun rumah atau apa pun, Hewan, Anjing, Foo, Bar ...

Saya akan mencoba menguraikan secara singkat agar tidak menunda. Dan untuk yang paling penasaran, saya akan meninggalkan tautan bermanfaat pada topik yang dibahas.

Tentang platform

Flutter adalah platform muda namun sangat menjanjikan yang telah menarik perhatian perusahaan besar yang meluncurkan aplikasi mereka . Platform ini menarik karena kesederhanaannya sebanding dengan pengembangan aplikasi web, dan kecepatan kerja setara dengan aplikasi asli. Kinerja aplikasi tinggi dan kecepatan pengembangan dicapai melalui beberapa teknik:

• Tidak seperti banyak platform seluler terkenal saat ini, Flutter tidak menggunakan JavaScript dalam bentuk apa pun. Sebagai bahasa pemrograman untuk Flutter, Dart dipilih, yang dikompilasi ke dalam kode biner, sehingga mencapai kecepatan operasi yang sebanding dengan Objective-C, Swift, Java, atau Kotlin.
• Flutter tidak menggunakan komponen asli , sekali lagi, dalam bentuk apa pun, sehingga Anda tidak perlu menulis lapisan apa pun untuk berkomunikasi dengannya. Sebaliknya, seperti mesin gim (dan Anda tahu bahwa gim memiliki UI yang sangat dinamis), gim ini menarik seluruh antarmuka sendiri. Tombol, teks, elemen media, latar belakang - semua ini diambil di dalam mesin grafis di Flutter itu sendiri. Setelah hal di atas, perlu dicatat bahwa aplikasi "Hello World" di Flutter hanya memakan sedikit ruang: iOS ≈ 2.5Mb dan Android ≈ 4Mb.
• Flutter menggunakan pendekatan deklaratif yang terinspirasi oleh kerangka kerja web ReactJS berdasarkan widget (di dunia web disebut komponen) untuk membangun UI. Untuk peningkatan yang lebih besar dalam kecepatan antarmuka, widget digambar ulang sesuai kebutuhan - hanya ketika ada sesuatu yang berubah di dalamnya (mirip dengan bagaimana Virtual DOM melakukannya di dunia front-end).
• Selain itu, framework ini memiliki built-in Hot-reload , yang sangat akrab dengan web, dan masih belum tersedia pada platform asli.

Mengenai manfaat praktis dari faktor-faktor ini, saya sangat merekomendasikan membaca artikel oleh pengembang Android yang menulis ulang aplikasi dari Jawa ke Dart dan membagikan kesan-kesan nya. Di sini saya hanya mengambil jumlah file / baris kode yang dinamai sebelumnya (ditulis dalam Java) - 179/12176, dan setelahnya (ditulis ulang dalam Dart) - 31/1735. Dalam dokumentasi Anda dapat menemukan deskripsi terperinci tentang fitur teknis platform . Dan di sini ada tautan lain, jika Anda tertarik untuk melihat contoh lain dari aplikasi yang berfungsi .

Tentang Dart

Dart adalah bahasa pemrograman di mana kita harus menulis aplikasi untuk Flutter. Ini sangat sederhana, dan jika Anda memiliki pengalaman dengan Java atau JavaScript, Anda akan segera mempelajarinya.

Saya mencoba menulis artikel ulasan tentang Dart, mencoba menggambarkan hanya yang diperlukan untuk mempelajari Flutter. Tetapi ada begitu banyak nuansa dalam bahasa ini yang, meskipun beberapa kali mencoba menulis artikel seperti itu, saya masih belum bisa membuatnya cukup lengkap dan pada saat yang sama singkat. Di sisi lain, penulis A Tour of the Dart Language melakukan pekerjaan dengan sangat baik.

Tentang pelatihan

Topik ini, seperti Dart, dijelaskan dengan sangat baik dalam panduan resmi. Saya hanya bisa menyalinnya di sini, tetapi saya tidak akan melakukannya.

Tanpa menunggu apa pun, kami pergi ke halaman panduan instalasi , pilih platform dan ikuti langkah-langkah untuk menginstal platform pada sistem kami. Di editor kami, kami akan menghubungkan plugin. Dalam panduan yang sama ada instruksi untuk mengatur VS Code dan IntelliJ . Ada juga plugin untuk Dart dan Flutter untuk editor Anda (biasanya Anda perlu menginstal dua). Kami meluncurkan aplikasi dan memeriksa kinerjanya .

Petunjuk untuk pengguna OSX. Saya merasa kasihan dengan ruang yang ditempati oleh bingkai telepon yang dicat di emulator iOS, jadi saya mematikannya dan beralih ke iPhone 8 (tidak terlalu "panjang"):

• Hardware → Device → iOS # → iPhone 8
• Window → Show Device Bezels

Anda dapat hidup tanpa tombol, karena ada hotkey: Shift + Cmd + H - ini adalah rumah, Cmd + Right - dan ini untuk membalikkan ponsel, sisanya dapat ditemukan di menu Hardware . Tetapi saya menyarankan Anda untuk mengaktifkan keyboard di layar, karena penting untuk memahami apakah mungkin untuk bekerja dengan aplikasi ketika setengah layar secara teratur diblokir oleh keyboard: Cmd + K (berfungsi ketika fokus ada pada beberapa bidang input).

iPhone 8 & iPhone X dengan bingkai

iPhone 8 & iPhone X tanpa batas

Tentang struktur

Kami akan masuk ke folder dengan aplikasi yang dibuat dan melihat apa yang ada di sana. Bukan dengan segalanya, tetapi dengan yang benar:

• lib/ - Menurut prinsip pub (pengelola paket Dart), semua kode ada di subfolder ini;
• pubspec.yml - dependensi aplikasi ditulis di sini bahwa Anda perlu menginstal untuk menjalankannya, seperti package.json , tetapi ada nuansa, Anda perlu menginstalnya bukan melalui utilitas Dart standar yang disebutkan di atas, tetapi melalui perintah Flutter: flutter pub get <package_name> ;
• test/ - apakah Anda tahu apa yang ada di sana? Anda dapat menjalankannya dengan memanggil flutter test ;
• ios/ & android/ - folder dengan pengaturan untuk setiap platform, ini menunjukkan hak apa yang diperlukan untuk menjalankan aplikasi (akses ke lokasi, bluetooth), ikon dan segala sesuatu yang khusus untuk platform.

Kami menemukan struktur, pergi ke lib/ folder di mana file main.dart sedang menunggu kami. Ini, seperti yang bisa Anda tebak, adalah file yang sama di mana kita harus menjalankan aplikasi kita. Dan itu dimulai seperti di C (dan bahkan banyak lainnya) dengan memanggil fungsi main() .

Tentang widget (Hello World di sini)

Di Flutter, semuanya dibangun di atas Widget : ada tampilan, gaya dengan tema, dan status dalam widget. Ada dua jenis utama widget: dengan dan tanpa status, tetapi belum tentang itu. Mari kita mudahkan.

Hapus semuanya dari main.dart . Tempel kode berikut dengan hati-hati membaca komentar:

 import 'package:flutter/widgets.dart'; //     //  Dart      main() main() => runApp( //   runApp  Flutter Text( //  ,   ,   <span> 'Hello, World!!!', //   —     textDirection: TextDirection.ltr, //       ), ); 

runApp(…) mengambil satu argumen - widget yang akan menjadi root untuk keseluruhan proyek. Omong-omong, Hot-reload tidak dapat mengambilnya, jadi Anda harus memulai ulang aplikasi.
Text(…) - Flutter tidak bisa hanya menampilkan string di layar. Untuk menampilkan teks, Anda harus menentukan Text . textDirection . Dan ini bukan perataan teks seperti perataan text-align , jika dibandingkan dengan web, ini adalah analog direction . Bagian dari API untuk menginternasionalkan suatu aplikasi. Text tidak akan berfungsi sampai ia mengetahui arahnya, tetapi Anda tidak perlu menentukannya di mana-mana - selanjutnya kami akan menganalisis cara menyesuaikan arah teks untuk seluruh aplikasi.

Sudah meluncurkan aplikasi? "Halo Dunia!" keluar! Sepertinya ... Ya? Tapi jelas ada yang salah.

Teks diblokir oleh informasi sistem. Kami memiliki semua ruang layar yang kami miliki, dan kami mengeluarkan widget di awal, di mana, antara lain, informasi sistem ditampilkan. Mari kita coba memindahkan teks kita ke suatu tempat.

 import 'package:flutter/widgets.dart'; main() => runApp( Center( // ,      child: Text( 'Hello, World!', textDirection: TextDirection.ltr, ), ), ); 

Center(…) adalah widget yang memungkinkan Anda untuk menempatkan widget lain yang diteruskan dalam argumen child di tengah secara horizontal dan vertikal. Anda akan sering melihat child - children dalam aplikasi Flutter, karena hampir semua widget menggunakan nama ini untuk menyampaikan widget yang harus digambar di dalam widget yang disebut.

Komposisi widget digunakan dalam Flutter untuk merender UI, mengubah tampilan, dan bahkan mentransfer data. Misalnya, widget Directionality(…) menetapkan arah teks untuk semua widget anak:

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: Text('Hello, World!'), ), ), ); 

Mari kita lihat widget lain yang sangat penting dan pada saat yang sama mengubah tampilan aplikasi kita:

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Container( //  ! <div>   Flutter' //   Container  color    color: Color(0xFF444444), child: Center( child: Text( 'Hello, World!', style: TextStyle( //     ,    color: Color(0xFFFD620A), //     fontSize: 32.0, //    ), ), ), ), ), ); 

Color(…) - warna. Dokumentasi menunjukkan berbagai cara pengaturannya, tetapi yang utama adalah hanya memberikan nomor ke konstruktor kelas. Pada contoh di atas, kami memberikan nomor pada konstruktor yang ditulis dalam bentuk heksadesimal, yang sangat mirip dengan HEX, hanya pada awal kami menambahkan dua karakter yang menunjukkan tingkat transparansi warna, di mana 0x00 benar-benar transparan, dan 0xFF sama sekali tidak transparan.

TextStyle(…) - widget yang lebih menarik, dengan itu Anda dapat mengatur warna, ukuran, ketebalan, penspasian garis, tambahkan garis bawah dan lainnya.

Aplikasi bergetar ditulis, selesai! Di dermaga, Anda dapat membaca cara merakitnya untuk Android dan iOS , ada tautan di tempat yang sama untuk memberi tahu Anda cara mengirimnya ke Toko yang diinginkan. Kepada siapa ini tidak cukup, di bawah ini saya melemparkan beberapa baris lagi tentang Flutter, mungkin lebih ...

Widget pro stateless

Cara menggunakan widget - kami sudah menemukan, sekarang mari kita mencari cara membuatnya. Sudah disebutkan di atas bahwa ada widget yang memiliki keadaan dan yang tidak memilikinya. Sejauh ini, kami hanya menggunakan widget stateless. Ini tidak berarti bahwa mereka tidak memilikinya sama sekali, karena widget hanyalah kelas, dan propertinya dapat diubah. Tepat setelah widget diberikan, mengubah statusnya tidak akan menyebabkan pembaruan widget ini di UI. Misalnya, jika kita perlu mengubah teks di layar, kita perlu membuat widget Text lain dan menentukan konten baru yang ingin kita tampilkan. Widget seperti itu bisa disebut konstan, jika Anda tahu apa yang saya maksud. Dan mereka sederhana, jadi mari kita mulai dengan mereka.

Untuk membuat widget Stateless, Anda perlu:

1. Munculkan nama yang indah untuk kelas baru;
2. Mewarisi kelas dari StatelessWidget ;
3. Terapkan metode build() yang menggunakan BuildContext sebagai argumen dan mengembalikan beberapa jenis Widget .

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: MyStatelessWidget() ), ), ); class MyStatelessWidget extends StatelessWidget { //  @override   ,    , //         //  ,       @override Widget build(BuildContext context) { // [context]    return Text('Hello!'); } } 

Widget contoh dengan satu argumen:

 // … class MyStatelessWidget extends StatelessWidget { //   Stateless      final,   const final String name; //   MyStatelessWidget(this.name); //   @override Widget build(BuildContext context) { // [context]     return Text('Hello, $name!'); } } 

Tentang Stateless, tidak ada lagi yang perlu ditambahkan ...

Tentang Hot Reload

Harap dicatat bahwa ketika mengubah konten widget kami, aplikasi akan digambar ulang secara otomatis. Setelah kami menghapus widget dari fungsi main() , Hot-reload mulai membantu kami.

Penting juga untuk memahami bahwa karena modul yang diluncurkan untuk hot swapping, aplikasi menjalankan urutan besarnya lebih lambat.

Tentang GestureDetector

Di bagian selanjutnya, kita akan berurusan dengan StatefulWidget (dengan widget yang berubah ketika statusnya berubah). Agar ini menjadi menarik, kita perlu mengubah keadaan ini, setuju? Kami akan mengubah status widget sebagai respons terhadap sentuhan di layar. Untuk melakukan ini, kita akan menggunakan GestureDetector(…) - widget yang tidak menggambar apa pun, tetapi monitor menyentuh layar smartphone dan melaporkannya memanggil fungsi yang ditransfer ke sana.

Buat tombol di tengah layar, ketika diklik, sebuah pesan akan ditampilkan di konsol:

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Container( color: Color(0xFFFFFFFF), child: App(), ), ), ); class App extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: GestureDetector( //     onTap: () { //    GestureDetector //    ,      print('You pressed me'); }, child: Container( //     decoration: BoxDecoration( //   shape: BoxShape.circle, //     color: Color(0xFF17A2B8), //      ), width: 80.0, height: 80.0, ), ), ); } } 

Klik tombol biru dan lihat pesan di konsol. Kami mengklik lagi dan lagi kami melihat pesan di konsol. Sekali lagi ... Oke, berhenti menempel.

Widget Stateful

StatefulWidget - Sederhana, bahkan lebih sederhana daripada StatelessWidget . Tetapi ada nuansa: mereka tidak ada sendiri, untuk pekerjaan mereka kita perlu kelas lain yang akan menyimpan keadaan widget ini. Pada saat yang sama, bagian visualnya (widget yang terdiri darinya) juga menjadi kondisinya.

Untuk memulai, lihat kelas widget:

 // … class Counter extends StatefulWidget { //      ,     , //   createState() @override State<Counter> createState() => _CounterState(); //        State, //   State<> } 

Di atas, kami membuat widget "kosong" yang menerapkan metode createState() sangat sederhana. Pemisahan presentasi dan keadaan ini memungkinkan Flutter untuk mengoptimalkan aplikasi.

Objek keadaan sepenuhnya tidak rumit. Selain itu, hampir identik dengan StatelessWidget ditulis oleh kami di atas. Perbedaan utamanya adalah kelas induk.

 // … class _CounterState extends State<Counter> { //    -    , //      . //   ,     int counter = 0; //     ,       //   ,      Stateless . @override Widget build(BuildContext context) { //          , //     —  : return Center( child: GestureDetector( onTap: () { //  ,   ,    //  counter. setState(() { // setState()   ,    //      ,    ++counter; }); }, child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: Color(0xFF17A2B8), ), width: 80.0, child: Center( child: Text( //    counter '$counter', //      style: TextStyle(fontSize: 30.0), ), ), ), ), ); } } 

Perhatikan bahwa nama kelas dimulai dengan garis bawah bawah. Di Dart, semua nama yang dimulai dengan garis bawah mengidentifikasi nilai pribadi. Dan keadaan widget di Flutter biasanya dibiarkan pribadi, meskipun ini tidak perlu.

Benar-benar aplikasi luar biasa yang telah kami buat! Ini hasil yang bagus. Tapi sebelum Anda menyelesaikan bagian ini saja, mari kita lihat beberapa widget yang lebih menarik. Hanya saja kali ini kami akan menulis lebih banyak kode, hanya untuk membuatnya lebih menarik. Sebagian besar aplikasi seharusnya sudah tidak asing lagi bagi Anda, dan sisanya seharusnya sudah Anda pelajari untuk memahami:

 import 'package:flutter/widgets.dart'; main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return Directionality( textDirection: TextDirection.ltr, child: Container( padding: EdgeInsets.symmetric( vertical: 60.0, horizontal: 20.0, ), color: Color(0xFFFFFFFF), child: Content(), ), ); } } class Content extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Counter('Manchester United'), Counter('Juventus'), ], ); } } class Counter extends StatefulWidget { final String _name; Counter(this._name); @override State<Counter> createState() => _CounterState(); } class _CounterState extends State<Counter> { int count = 0; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(bottom: 10.0), padding: EdgeInsets.all(4.0), decoration: BoxDecoration( border: Border.all(color: Color(0xFFFD6A02)), borderRadius: BorderRadius.circular(4.0), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ // widget —    State,    //      ,      _CounterLabel(widget._name), _CounterButton( count, onPressed: () { setState(() { ++count; }); }, ), ], ), ); } } class _CounterLabel extends StatelessWidget { static const textStyle = TextStyle( color: Color(0xFF000000), fontSize: 26.0, ); final String _label; _CounterLabel(this._label); @override Widget build(BuildContext context) { return Text( _label, style: _CounterLabel.textStyle, ); } } class _CounterButton extends StatelessWidget { final _count; final _onPressed; _CounterButton(this._count, {@required this._onPressed}); @override Widget build(BuildContext context) { return GestureDetector( onTap: () { _onPressed(); }, child: Container( padding: EdgeInsets.symmetric(horizontal: 6.0), decoration: BoxDecoration( color: Color(0xFFFD6A02), borderRadius: BorderRadius.circular(4.0), ), child: Center( child: Text( '$_count', style: TextStyle(fontSize: 20.0), ), ), ), ); } } 

Kami memiliki dua widget baru: Column() dan Row() . Cobalah untuk mencari tahu apa yang mereka lakukan. Dan pada artikel berikutnya, kita akan mempertimbangkannya secara lebih rinci, serta melihat lebih dari satu widget yang memungkinkan Anda untuk menyusun widget lain bersama-sama, dan membuat aplikasi yang bagus menggunakan pustaka Flutter yang disebut Material.

Tentang pekerjaan rumah

Jika Anda ingin membaca sesuatu yang lain di waktu luang Anda, berikut adalah daftar tautan menarik:

• https://flutter.io/docs/get-started/flutter-for/web-devs
• Bekerja dengan kode dari VS Code dan dari InteliJ
• Lebih lanjut tentang widget
• Anda juga harus membaca tentang Hot reload untuk memahami kapan kode mungkin tidak dimulai ulang.