Académique Documents
Professionnel Documents
Culture Documents
Résumé Flutter
Résumé Flutter
I- Généralités :
Flutter est un framework Open Source de développement
d'applications multiplateforme, conçu par Google
1- Avantages:
Un seul code pour iOS et Android
Développement et Exécution Rapides
Contrairement à React Native qui utilise JavaScript
pour créer des composants natifs, Flutter propose des
widgets personnalisés
2- Architecture
Une application Mobile Flutter est composé d'un ensemble de
widgets, ressources et fichiers de configuration
Un Widget est une classe Dart qui retourne un élément
graphique
Il existe deux types principaux de widgets dans Flutter :
- StatelessWidget (Widget sans état) : Ces widgets sont
statiques, ce qui signifie qu'ils ne changent pas d'état une
fois créés. Ils sont généralement utilisés pour des
éléments d'interface utilisateur qui ne changent pas en
réponse à une interaction de l'utilisateur ou à d'autres
événements. Par exemple, un texte statique, une icône ou
un bouton simple peuvent être des StatelessWidgets.
3- Installation
______________________________________________________________
______
//main.dart
import 'package:flutter/material.dart';
import 'MyApp.dart';
void main() {
runApp(const MyApp());
}
______________________________________________________________
______
//MyApp.dart
import 'package:flutter/material.dart';
import 'screens/Login.dart';
- //screens/Login.dart
-
- import 'Register.dart';
- import 'package:flutter/material.dart';
- class Login extends StatefulWidget {
- const Login({Key? key}) : super(key: key);
-
- @override
- State<Login> createState() =>_LoginState();
- }
-
- class _LoginState extends State<Login> {
- String email = '';
- String password = '';
- final _formKey = GlobalKey<FormState>();
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- backgroundColor: Colors.pink[50],
- appBar: AppBar(
- title: Text('Covid Tracker'),
- actions: [
- FlatButton.icon(
- onPressed: (){
- Navigator.push(context, MaterialPageRoute(builder:
(context)=>Register()));
- },
- icon: Icon(Icons.person),
- label: Text('Register'))
- ],
- ),
- body: Container(
- padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
- child: Form(
- key: _formKey,
- child: ListView(
- children: [
- Image.asset('assets/images/covid.png'),
- SizedBox(height: 50.0,),
- TextFormField(
- decoration: InputDecoration(
- hintText: 'email',
- prefixIcon: Icon(Icons.person),
- fillColor: Colors.white,
- filled: true
- ),
- onChanged: (val) {
- setState(() {
- email = val;
- });
- },
- validator: (val) => val!.isEmpty ? 'Enter a valid
email':null,
- ),
- SizedBox(height: 20.0,),
- TextFormField(
- decoration: InputDecoration(
- hintText: 'password',
- prefixIcon: Icon(Icons.lock),
- fillColor: Colors.white,
- filled: true
- ),
- onChanged: (val) {
- setState(() {
- password = val;
- });
- },
- validator: (val) => val!.length < 6 ?
- 'Enter a valid password 6+ Chars':null,
- obscureText: true,
- ),
- SizedBox(height: 20.0,),
- RaisedButton(
- color: Colors.pink,
- child: Text('Sign In',style: TextStyle(color:
Colors.white),),
- onPressed: () {
- if(_formKey.currentState!.validate()){
- print('ok !!!');
- }
-
- },
-
- )
-
- ],
- ),
- ),
- ),
- );
- }
- }