pengantar
Halo semua yang ingin berkenalan dengan Flutter!
Saya memiliki keinginan yang membara untuk berbagi dengan Anda pengetahuan saya yang telah saya kumpulkan selama beberapa bulan.
Mungkin pengalaman saya sangat kecil dibandingkan dengan programmer guru, saya masih akan mencoba melakukan sesuatu yang berguna untuk Anda.
Hasil pekerjaan kami adalah aplikasi Flutter kecil yang akan mengambil data dari JSONPlaceholder .
Rencana kita
Bagian 1 (artikel saat ini) - Pengantar pembangunan, lampiran pertama, konsep negara;
Bagian 2 - file pubspec.yaml dan menggunakan flutter pada baris perintah;
Bagian 3 - BottomNavigationBar dan Navigator;
Bagian 4 - MVC. Kami akan menggunakan pola khusus ini sebagai salah satu yang paling sederhana;
Bagian 5 - paket http. Pembuatan kelas Repositori, permintaan pertama, daftar posting;
Bagian 6 - Bekerja dengan gambar, menampilkan gambar dalam bentuk kisi, menerima gambar dari jaringan, menambahkan gambar Anda sendiri ke aplikasi;
Bagian 7 - Membuat tema Anda sendiri, menambahkan font dan animasi kustom;
Bagian 8 - Sedikit tentang pengujian;
Langkah Pertama - Konfigurasi dan Instalasi Komponen
Baiklah, mari kita mulai.
Buka halaman instalasi: Instal - Flutter dan unduh Flutter untuk platform Anda
Kemudian instal editor atau IDE menggunakan instruksi Siapkan editor
Saya akan menggunakan Google Android Studio IDE.
Untuk pengembangan di Android Studio, Anda perlu menginstal plugin Flutter (dalam petunjuk Menyiapkan editor , dijelaskan cara melakukannya).
Langkah kedua - pembuatan proyek
Memilih Aplikasi Flutter
Selanjutnya, kami menunjukkan nama aplikasi (nama aplikasi Flutter harus huruf kecil, setiap kata dapat dipisahkan dengan garis bawah).
Kemudian kita tentukan nama package (digunakan untuk mengidentifikasi aplikasi kita antara lain di Google Play atau Apple Store, nanti bisa diubah, lebih detail tentang Android Application ID atau Apple App ID ):
Klik Selesai.
Langkah ketiga adalah membuat struktur awal aplikasi
Kami menghapus file main.dart dari kode yang tidak perlu:
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
Kemudian kami membuat paket (kode harus selalu diatur agar lebih jelas):
pages:
home_page.dart:
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// _ ,
// _HomePageState
// private Java / Kotlin
class _HomePageState extends State<HomePage> {
// buil, ,
//
@override
Widget build(BuildContext context) {
// Scaffold ,
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home Page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
child: Text(
"Hello, JSON Placeholder!!!",
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
)
)
);
}
}
Flutter - ,
-
, .
HomePage main :
import 'pages/home_page.dart';
: , , :
import 'package:json_placeholder_app/pages/home_page.dart';
, pubspec.yaml (pubspec.yaml ):
, , iOS Android.
, ( , Honor 30i), Run:
!
DEBUG , :
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
//
debugShowCheckedModeBanner: false,
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
, , hot reload:
Hot Reload 2-5 , .
, .
Hot Reload build . ( )
: Hot Reload , .
: Flutter , :
, .. release Flutter .
, Hot Reload.
-
, .
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// ,
// _HomePageState
// - private Java / Kotlin
class _HomePageState extends State<HomePage> {
// ,
// .. _counter
// ,
// _counter
var _counter = 0;
// build ,
//
@override
Widget build(BuildContext context) {
// Scaffold
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
// AnimatedSwitcher,
//
child: AnimatedSwitcher(
// : const
// , Duration
//
// Duration
// (, ..)
duration: const Duration(milliseconds: 900),
// AnimatedSwitcher reverse ,
//
// , ,
// reverseDuration 0
//
reverseDuration: const Duration(milliseconds: 0),
child: Text(
//
// _counter
//
"$_counter",
//
// _counter
// setState,
// AnimatedSwitcher
// key ,
// ,
key: ValueKey<int>(_counter),
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
),
)
),
//
// FloatingActionButton -
floatingActionButton: FloatingActionButton(
//
// Flutter
child: Icon(Icons.animation),
onPressed: () {
// setState
// ,
// .
//
setState(() {
_counter++;
});
},
),
);
}
}
:
! !
.
, ))
)
!