introduction
Bonjour à tous ceux qui veulent se familiariser avec Flutter!
J'avais une ardente envie de partager avec vous mes connaissances que j'ai accumulées depuis plusieurs mois.
Peut-être que mon expérience est très petite par rapport aux programmeurs gourous, je vais toujours essayer de faire quelque chose d'utile pour vous.
Le résultat de notre travail sera une petite application Flutter qui prendra les données du JSONPlaceholder .
Notre plan
Partie 1 (article actuel) - Introduction au développement, première annexe, concept d'État;
Partie 2 - fichier pubspec.yaml et utilisation du flutter sur la ligne de commande;
Partie 3 - BottomNavigationBar et Navigator;
Partie 4 - MVC. Nous utiliserons ce modèle particulier comme l'un des plus simples;
Partie 5 - package http. Création de la classe Repository, premières demandes, liste des articles;
Partie 6 - Travailler avec des images, afficher des images sous forme de grille, recevoir des images du réseau, ajouter les vôtres à l'application;
Partie 7 - Création de votre propre thème, ajout de polices et d'animations personnalisées;
Partie 8 - Un peu sur les tests;
Première étape - Configuration et installation des composants
Eh bien, commençons.
Accédez à la page d'installation: Installez - Flutter et téléchargez Flutter pour votre plateforme
Ensuite, installez l'éditeur ou l'IDE en utilisant l'instruction Configurer un éditeur
J'utiliserai l'IDE Android Studio de Google.
Pour le développement sur Android Studio, vous devez installer le plugin Flutter (dans les instructions de configuration d'un éditeur , il est décrit comment procéder).
Deuxième étape - création de projet
Choisir l'application Flutter
Ensuite, nous indiquons le nom de l'application (le nom de l'application Flutter doit être en minuscules, les mots individuels peuvent être séparés par un trait de soulignement).
Ensuite, nous spécifions le nom du package (utilisé pour identifier notre application entre autres dans Google Play ou Apple Store, il peut être modifié ultérieurement, plus en détail sur l' identifiant d'application Android ou l' identifiant d'application Apple ):
Cliquez sur Terminer.
La troisième étape consiste à créer la structure initiale de l'application
Nous effaçons le fichier main.dart du code inutile:
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(),
);
}
}
Ensuite, nous créons un package (le code doit toujours être organisé pour le rendre plus clair):
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++;
});
},
),
);
}
}
:
! !
.
, ))
)
!