Flutter est un nouveau framework de développement d'applications mobiles lancé par Google qui permet aux développeurs d'utiliser un ensemble de bases de code pour développer des applications Android et iOS. Son concept de conception, sa structure de structure et son utilisation de widgets permettent aux développeurs de créer plus efficacement des applications de haute qualité.
1. Concept de conception flottante
La philosophie de conception de Flutter est « tout est un widget ». Cela signifie qu'il s'agit de boutons, de polices, de couleurs, de mises en page ou même de l'ensemble de votre application, elle est composée de widgets individuels. Dans Flutter, les widgets peuvent être imbriqués, encapsulés ou combinés pour former des composants d'interface utilisateur complexes, ce qui offre aux développeurs une grande flexibilité et créativité.
Deuxièmement, la structure du cadre Flutter
Le framework Flutter se compose d'une série de hiérarchies. De bas en haut, il comprend principalement :
-
Plateforme Dart : Flutter est écrit dans le langage Dart. La plate-forme Dart comprend un compilateur Dart JIT et AOT qui peut générer du code ARM natif pour Flutter.
-
Flutter Engine : principalement écrit en C++, il fournit un support de rendu de bas niveau. Il s'occupe également du système de plugins, de la mise en page du texte et de la configuration du type, des E/S réseau et fichiers, de la gestion des threads, etc.
-
Bibliothèque Foundation : fournit les mêmes types et utilitaires de base que Dart, afin que d'autres bibliothèques de niveau supérieur puissent partager la même conception et la même implémentation.
-
Widgets : modules qui décrivent l'interface utilisateur et les interactions de l'application. Les concepts clés incluent Widget, StatelessWidget, StatefulWidget, State, etc.
3. Widget dans Flutter
Le widget dans Flutter n'est pas seulement la vue qui déclare l'interface utilisateur, mais aussi le pont entre la vue et le changement d'interface. Un Widget peut définir :
Un élément structurel (comme un bouton ou un menu),
un élément de style (comme une police ou un jeu de couleurs)
ou même un élément de mise en page (comme un remplissage ou un alignement).
Dans Flutter, la tâche principale d'un Widget est de fournir un Méthode build() pour décrire ce qu’il faut voir dans l’interface utilisateur.
Quatre, StatelessWidget et StatefulWidget
Les StatelessWidgets sont immuables. Ils décrivent comment l'interface utilisateur doit être créée pour une configuration donnée. Le StatefulWidget peut changer d'état au cours du cycle de vie. L'implémentation d'un StatefulWidget nécessite au moins deux classes : 1) une classe StatefulWidget ; 2) une classe State.
5. Widgets de mise en page de base
Il existe de nombreux widgets de mise en page dans Flutter, tels que Row, Column et Stack. Row et Column sont les widgets de mise en page de base, ils acceptent tous deux une colonne de sous-widgets et les disposent horizontalement ou verticalement. Stack peut empiler des widgets pour obtenir diverses mises en page complexes.
6. Structure du programme Flutter
Un programme Flutter de base comprend généralement les parties suivantes :
- fonction principale : Le point d’entrée de l’application.
- Classe MyApp : StatelessWidget, renvoie un MaterialApp Widget qui contient le thème de l'application, le routage et la page d'accueil.
- Classe de page d'accueil : il peut s'agir de StatelessWidget ou StatefulWidget, incluant la partie principale de l'application.
- Autres classes de widgets : vos widgets personnalisés, qui peuvent être utilisés par la classe de page d'accueil ou d'autres classes de widgets.
Après avoir maîtrisé ces bases, vous pourrez mieux utiliser le framework Flutter pour le développement d'applications et créer de belles applications avec une bonne expérience utilisateur.
Seven, le widget de Flutter
7.1. Widgets de base
Dans Flutter, tous les éléments d'interface sont construits à partir de widgets. Chaque widget décrit ce qui doit être vu sur l'interface. Vous pouvez considérer un widget comme un élément constitutif d’une interface d’application. Ils incluent des éléments permettant d'afficher du texte, des images, des icônes, des zones de saisie, des actions, etc.
7.1.1 Texte : ce widget est utilisé pour afficher du texte de style simple et contient certaines propriétés pour contrôler le style d'affichage du texte. ####
Text(
'Hello, World!',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
)
7.1.2 Image : Le widget utilisé pour afficher les images prend en charge plusieurs manières de charger des images, telles que le réseau, la ressource, le système de fichiers, etc.
Image.network('https://example.com/images/sample.jpg')
7.1.3 Icône : Le widget icône de Material Design.
Icon(Icons.star, color: Colors.red[500])
7.2. Types de widgets : StatelessWidget et StatefulWidget.
7.2.1. Widget apatride
Les StatelessWidgets sont immuables et décrivent comment l'interface utilisateur doit être construite en fonction de la configuration. Par exemple, le code suivant montre comment créer un StatelessWidget personnalisé qui renvoie une icône en forme d'étoile rouge :
class MyIcon extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Icon(Icons.star, color: Colors.red[500]);
}
}
7.2.2. Widget avec état
Les StatefulWidgets sont dynamiques. Ils peuvent changer d’état au cours de leur vie, par exemple en réponse à une interaction de l’utilisateur. Un StatefulWidget nécessite au moins deux classes : la classe StatefulWidget et la classe State. Voici un exemple:
class Counter extends StatefulWidget {
Counter({Key key, this.title}) : super(key: key);
final String title;
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text('You have pushed the button $_counter times.'),
RaisedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}
Cet exemple crée un nouveau StatefulWidget nommé Counter. Chaque fois que l'utilisateur appuie sur le bouton "Incrémenter", la valeur de _counter est incrémentée et l'interface utilisateur est automatiquement mise à jour.
Huit, les widgets de mise en page de base de Flutter
Dans Flutter, nous disposons de nombreux widgets de mise en page prédéfinis tels que Row, Column et Stack.
8.1. Ligne et colonne
Les lignes et les colonnes sont les deux widgets de mise en page les plus couramment utilisés. Ils acceptent tous une liste de widgets enfants et les disposent horizontalement ou verticalement. Voici un exemple utilisant Row, qui contient trois icônes étoiles rouges :
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.star, color: Colors.red[500]),
Icon(Icons.star, color: Colors.red[500]),
Icon(Icons.star, color: Colors.red[500]),
],
)
8.2. Empiler
Stack est un widget de mise en page qui peut empiler des widgets enfants. Vous pouvez utiliser des widgets positionnés pour positionner les widgets enfants dans la pile. Voici un exemple simple de pile :
Stack(
alignment: const Alignment(0.6, 0.6),
children: [
CircleAvatar(
backgroundImage: AssetImage('images/pic.jpg'),
radius: 100.0,
),
Container(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
'Hello World',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
)
9. Ci-dessous, nous créons un exemple d'application de Flutter, incluant certains des concepts clés mentionnés précédemment, notamment les dispositions Widget, StatelessWidget, StatefulWidget et Row, Column et Stack.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({required this.title, key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
FloatingActionButton(
onPressed: _decrementCounter,
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
],
),
],
),
),
);
}
}
Grâce à cet article, vous devez avoir une compréhension de base de Flutter, y compris la philosophie de conception de Flutter, la structure du framework, le système de widgets et comment utiliser différents types de widgets pour créer des interfaces et des mises en page. Nous aborderons ensuite des sujets plus avancés, notamment comment gérer les interactions des utilisateurs, créer des animations, accéder aux données réseau, etc.