Projet Flutter : Application de Navigation et Gestion des Données
Projet Flutter : Application de Navigation et Gestion des Données
-
Objectif
- Réaliser une application Flutter simple qui permet la navigation entre différentes pages et la gestion de données utilisateur.
- Le projet comprend quatre pages : HomePage, AddDataPage, EndPage et une page supplémentaire pour les données ajoutées.
-
Description des Pages :
- HomePage :
- Affiche le titre de l’application et une liste des villes ajoutées.
- Contient un footer avec deux boutons : un bouton pour naviguer vers AddDataPage et un autre pour naviguer vers EndPage.
- AddDataPage :
- Contient un champ de texte pour saisir le nom d’une ville.
- Possède deux boutons : « Add » pour ajouter la ville à la liste et revenir à HomePage, et « Cancel » pour revenir à HomePage sans ajouter de ville.
- EndPage :
- Affiche un message de bienvenue.
- Contient un footer avec deux boutons : un bouton pour revenir à la page précédente (HomePage) et un bouton pour retourner à la page d’accueil en réinitialisant l’historique de navigation.
- Navigation :
- Utilisation des routes nommées pour la navigation entre les pages.
- Gestion du retour des données de AddDataPage à HomePage.
- Instructions :
- Configuration de l’Application :
- Créez un projet Flutter nommé flutter_navigation.
- Configurez les routes pour naviguer entre HomePage, AddDataPage, et EndPage.
- HomePage :
- Implémentez une HomePage avec un AppBar affichant le titre « Flutter 3 : Navigation ».
- Ajoutez une ListView pour afficher les villes ajoutées.
- Ajoutez un footer avec deux boutons : un bouton pour naviguer vers AddDataPage et un autre pour naviguer vers EndPage.
- Mettez à jour la ListView avec les nouvelles villes ajoutées lorsque l’utilisateur revient de AddDataPage.
- AddDataPage :
- Implémentez une AddDataPage avec un champ de texte pour saisir le nom de la ville.
- Ajoutez deux boutons : « Add » pour renvoyer le nom de la ville saisie à HomePage et « Cancel » pour annuler l’ajout et revenir à HomePage.
- EndPage :
- Implémentez une EndPage affichant un message de bienvenue.
- Ajoutez un footer avec deux boutons : un bouton pour revenir à la page précédente (HomePage) et un bouton pour retourner à la page d’accueil en réinitialisant l’historique de navigation.
- Personnalisation de l’AppBar :
- Assurez-vous que l’AppBar de chaque page a une couleur de fond appropriée et que les icônes de navigation sont bien visibles.
- Footer de Navigation :
- Assurez-vous que le footer de navigation sur chaque page contient les boutons appropriés et que les icônes sont bien visibles et fonctionnelles.
- Questions :
- Configuration des Routes :
- Comment avez-vous configuré les routes pour naviguer entre HomePage, AddDataPage, et EndPage ?
- HomePage :
- Décrivez comment vous avez implémenté la ListView pour afficher les villes ajoutées.
- Comment avez-vous ajouté les boutons de navigation dans le footer de HomePage ?
- Expliquez comment vous avez géré l’ajout d’une nouvelle ville depuis AddDataPage.
- AddDataPage :
- Décrivez la mise en place du champ de texte pour saisir le nom de la ville.
- Comment avez-vous implémenté les boutons « Add » et « Cancel » pour la gestion de la navigation et des données ?
- EndPage :
- Expliquez la mise en place du message de bienvenue sur EndPage.
- Comment avez-vous ajouté les boutons de navigation dans le footer de EndPage pour revenir à HomePage ou retourner à la page d’accueil ?
- Personnalisation de l’AppBar :
- Comment avez-vous personnalisé l’AppBar pour chaque page ?
- Comment avez-vous changé la couleur des icônes de navigation ?
- Footer de Navigation :
- Décrivez comment vous avez implémenté le footer de navigation sur chaque page.
- Comment avez-vous assuré que les icônes dans le footer sont bien visibles et fonctionnelles ?
- Retour des Données :
- Comment avez-vous géré le retour des données de AddDataPage à HomePage ?
- Comment avez-vous mis à jour la liste des villes ajoutées sur HomePage après le retour des données ?
-
Page: main.dart
-
Page: adddatapage.dart
-
Page: endpage.dart
-
Page: homepage.dart
Solution
import 'package:flutter/material.dart';
import 'package:flutter3_navigation/pages/adddatapage.dart';
import 'package:flutter3_navigation/pages/endpage.dart';
import 'package:flutter3_navigation/pages/homepage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
routes: {
'/': (BuildContext context) => HomePage(title: 'Flutter 3 : Navigation'),
'/adddata': (BuildContext context) => AddDataPage(),
'/endpage': (BuildContext context) => EndPage(),
},
initialRoute: '/',
);
}
}
import 'package:flutter/material.dart';
class AddDataPage extends StatelessWidget {
final TextEditingController _cityNameController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 8, 123, 247), // Utiliser la couleur noire pour l'appBar
iconTheme: IconThemeData(
color: Colors.white, // Change la couleur de la flèche de retour en arrière en blanc
),
title: Text(
"Add City",
style: TextStyle(fontSize: 16.0 ,color: Colors.white),
),
),
body: SafeArea(
child: Container(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
decoration: InputDecoration(
labelText: "City Name",
),
controller: _cityNameController,
),
ButtonBar(
alignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("Cancel"),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context, _cityNameController.text);
},
child: Text("Add"),
),
],
),
],
),
),
),
bottomNavigationBar: _getBottomNavigationBarWidget(context),
);
}
Widget _getBottomNavigationBarWidget(BuildContext context) {
return Container(
color: Colors.black87,
child: ButtonBar(
mainAxisSize: MainAxisSize.max,
alignment: MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(
Icons.arrow_forward,
size: 24.0,
color: Colors.white,
),
onPressed: () {
Navigator.pushNamed(context, "/endpage");
},
)
],
),
);
}
}
import 'package:flutter/material.dart';
class EndPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 8, 123, 247), // Utiliser la couleur noire pour l'appBar
iconTheme: IconThemeData(
color: Colors.white, // Change la couleur de la flèche de retour en arrière en blanc
),
title: Text(
"End Page",
style: TextStyle(fontSize: 16.0, color: Colors.white),
),
),
body: Center(
child: Text("Welcome to End Page",style: TextStyle(fontSize: 24.0,fontWeight: FontWeight.bold),),
),
bottomNavigationBar: _getbottomNavigationBarWidget(context),
);
}
Widget _getbottomNavigationBarWidget(BuildContext context) {
return Container(
color: Colors.white,
child: ButtonBar(
mainAxisSize: MainAxisSize.max,
alignment: MainAxisAlignment.end,
children: [
IconButton(icon: Icon(Icons.arrow_back,size: 24.0,color: Colors.white,), onPressed: (){
Navigator.pop(context);
}),
IconButton(icon: Icon(Icons.home,size: 24.0,color: Colors.white,), onPressed: (){
Navigator.pushNamedAndRemoveUntil(context, "/", (Route route){ return false;});
})
],
),
);
}
}
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
final String title;
const HomePage({required this.title, Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State {
final List _lstCities = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 8, 123, 247), // Utiliser la couleur noire pour l'appBar
title: Text(
widget.title,
style: TextStyle(fontSize: 16.0, color: Colors.white), // Assurez-vous que le texte est visible sur l'appBar sombre
),
),
body: Column(
children: [
Expanded(child: _getListViewFromBuilder()),
],
),
bottomNavigationBar: _getBottomNavigationBarWidget(context),
);
}
Widget _getListViewFromBuilder() {
return ListView.builder(
itemCount: _lstCities.length,
shrinkWrap: true,
padding: const EdgeInsets.all(16.0),
itemBuilder: getListItems,
);
}
Widget getListItems(BuildContext context, int index) {
return _lstCities[index];
}
Widget _getBottomNavigationBarWidget(BuildContext context) {
return Container(
color: Colors.black87,
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: ButtonBar(
mainAxisSize: MainAxisSize.max,
alignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(
Icons.add,
size: 24.0,
color: Colors.white,
),
onPressed: () {
Navigator.pushNamed(context, '/adddata').then((result) {
if (result != null) {
setState(() {
_lstCities.add(
Text(
"${_lstCities.length + 1} ${result.toString()}",
textAlign: TextAlign.justify,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
);
});
}
});
},
),
IconButton(
icon: Icon(
Icons.arrow_forward,
size: 24.0,
color: Colors.white,
),
onPressed: () {
Navigator.pushNamed(context, '/endpage');
},
),
],
),
);
}
}