Comment dynamiser l’adresse de son api en Flutter ?
Published in
5 min readJul 9, 2019
TABLE DES MATIERES
1- Création d’un projet Flutter
2- Installation de quelques dépendances
3- Création d’une base de données avec le package sqflite
4- Mise en place d’une interface
5- Création d’un widget && Exécution d’une requête http
6- Rendu de l’Application
1- Création d’un projet Flutter
2- Installation de quelques dépendances
- sqflite => disponible ici : https://pub.dev/packages/sqflite
- path_provider => https://pub.dev/packages/path_provider
- http => disponible ici : https://pub.dev/packages/http
Ce résultat “exit code 0” vous indique que l’installation des packages à réussie.
3- Création d’une base de données avec le package sqflite
Créer un répertoire dans le dossier lib
Model/
Dans ce repertoire vous créerai deux fichiers :
- databaseClient.dart
- ip.dart
# databaseClient.dart
import 'package:sqflite/sqflite.dart';
import 'dart:async';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
// Import du model
import 'package:myapi/Model/ip.dart';class DatabaseClient { Database _database;
/* Quand dans une class on commence l'écriture d'une variable par _ (enderscore)
celà veut dire tout simplement que cette variable est privée.
on y accède via une clause FUTURE & get
*/ Future<Database> get database async {
if(_database != null){
return _database;
} else{
// Crée cette base de données
_database = await create();
return _database;
}
} // Fonction de création de base de données
Future create() async {
Directory directory = await getApplicationDocumentsDirectory();
String databaseDirectory = join(directory.path, 'database.db');
// Déclaration de la variable contenant la base de données bdd
var bdd = await openDatabase(databaseDirectory, version:1, onCreate: _onCreate);
return bdd; }
// Fonction enfant de Create()
Future _onCreate(Database db,int version) async {
await db.execute('''
CREATE TABLE ip (
id INTEGER PRIMARY KEY autoincrement,
adresseIp TEXT
)
''');
}
//*********************** ECRITURE DE DONNEES *********************** Future<Ip> ajoutIp(Ip ip) async {
// le database du Future get qui verifie l'etat de la base de données
Database maDatabase = await database;
ip.id = await maDatabase.insert('ip', ip.toMap());
return ip;
} //*********************** LECTURE DE DONNEES *********************** Future<List<Ip>> allIp() async {
// le database du Future get qui verifie l'etat de la base de données
Database maDatabase = await database;
// Création d'une liste pour récupérer le contenu d'une table dans notre cas.
List<Map<String, dynamic>> resultat = await maDatabase.rawQuery('SELECT * FROM ip ');
//List<Map<String, dynamic>> resultat = await maDatabase.rawQuery('SELECT * FROM ip order by id desc LIMIT 1');
// ips ou ip_all recupère tout les enregistrements.
List<Ip> ips = [];
resultat.forEach((map) {
Ip ip = new Ip();
ip.fromMap(map);
//--
ips.add(ip);
// Ajout
});
return ips;
}
Future<List<Ip>> oneIp() async {
// le database du Future get qui verifie l'etat de la base de données
Database maDatabase = await database;
// Création d'une liste pour récupérer le contenu d'une table dans notre cas.
//List<Map<String, dynamic>> resultat = await maDatabase.rawQuery('SELECT * FROM ip ');
List<Map<String, dynamic>> resultat = await maDatabase.rawQuery('SELECT * FROM ip order by id desc LIMIT 1');
// ips ou ip_all recupère tout les enregistrements.
List<Ip> ips = [];
resultat.forEach((map) {
Ip ip = new Ip();
ip.fromMap(map);
//--
ips.add(ip);
// Ajout
});
return ips;
}
//*********************** DE DONNEES ***********************
}
# ip.dart
class Ip{
int id;
String adresseIp; // Déclaration du constructeur
Ip(); // Reception de valeur par une map
void fromMap(Map<String, dynamic> map){
this.id = map['id'];
this.adresseIp = map['adresseIp'];
} // Envoie de valeur par une map
Map<String, dynamic> toMap(){
Map<String, dynamic> map ={
'adresseIp': this.adresseIp
};
if(id != null) {
map['id'] = this.id;
}
return map;
}
}
4- Mise en place d’une interface
#Fichier main.dart
import 'package:flutter/material.dart';
import 'package:myapi/Model/databaseClient.dart';
import 'package:myapi/Model/ip.dart';
import 'package:myapi/Article.dart';
void main() => runApp(MyApp());class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApi',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'MyApi'),
);
}
}class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title; @override
_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {
// Déclaration de la liste de données ip initialement null
String nouvelleListe;
String ipservers;
// Déclaration de la liste de données ip initialement
List<Ip>ips = [];
@override
void initState() {
// TODO: implement initState
super.initState();
recuperer();
}
void recuperer(){
DatabaseClient().oneIp().then((ips) {
setState(() {
this.ips = ips;
print(ips.length);
});
});
} Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: <Widget>[
FlatButton(
onPressed: (){
ipServer();
},
child: new Text("Ajouter une adresse ip", style: TextStyle(color:Colors.white),) ,
)
] ,
),
body: (ips == null || ips.length == 0)
? Center(
child: Text('Aucune Addresse ip configurée',
textScaleFactor: 2.0,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
fontStyle: FontStyle.italic
),
),
) : new ListView.builder(itemCount: ips.length,
itemBuilder: (context, int i) {
Ip ip = ips[i];
return new ListTile(
title: new Text(ip.adresseIp ?? ''),
);
}
),
floatingActionButton: FloatingActionButton(
onPressed: (){versArticle();},
tooltip: 'Article',
child: Icon(Icons.settings_remote),
),
);
} // Mes Fonctions
Future ipServer() async{
return showDialog(context: context,
barrierDismissible: false,
builder: (BuildContext context){
return AlertDialog(
// Ajustement à faire en fonction des écrans (Ecran S8)
//title: Text('CONFIGURATION IP SERVER',textScaleFactor: 0.9,),
title: Text('CONFIGURATION IP SERVER',textScaleFactor: 1.0,),
content: new TextField(
decoration: InputDecoration(
labelText: 'IP SERVER',
// placeholder
hintText: "http://192.168.1.1"
),
onChanged: (String str){
nouvelleListe = str;
},
),
contentPadding: EdgeInsets.all(5.0),
actions: <Widget>[
new FlatButton(
onPressed: (){
Navigator.pop(context);
},
child: Text('ANNULER',style: TextStyle(color: Colors.red,fontWeight:FontWeight.bold),),
),
new FlatButton(
onPressed: (){
if(nouvelleListe != null){
Map<String, dynamic> map = {'adresseIp': nouvelleListe};
Ip ip = new Ip();
ip.fromMap(map);
DatabaseClient().ajoutIp(ip).then((i) => recuperer());
//print(nouvelleListe);
nouvelleListe = null;
Navigator.pop(context);
}
// Navigator.pushNamed(context, '/IpList');
},
child: Text('ENREGISTRER',style: TextStyle(color: Colors.green,fontWeight:FontWeight.bold),),
)
],
);
}
);
}void versArticle(){
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return new Article(title: 'Article');
}));
}}
5- Création d’un widget && Exécution d’une requête http
# Créer un fichier article.dart
import 'package:flutter/material.dart';
import 'package:myapi/Model/databaseClient.dart';
import 'package:myapi/Model/ip.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
import 'dart:io';class Article extends StatefulWidget {
Article({Key key, this.title}) : super(key: key);
final String title;
@override
_ArticleState createState() => _ArticleState();
}class _ArticleState extends State<Article> {
Map data;
List<Ip>ips = [];
List Consultation;
@override
void initState() {
super.initState();
recuperer();
_afficherFacture();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: new ListView.builder(
itemCount: Consultation == null ? 0 : Consultation.length,
itemBuilder: (BuildContext context, int index) {
return new ListTile(
title: Text(" ${Consultation == null ? '' : 'title :'+ Consultation[index]['title']}",style: TextStyle(fontSize: 15.0),),
);
}
),
);
}
void recuperer(){
DatabaseClient().oneIp().then((ips) {
setState(() => this.ips = ips);
var serverIp =ips[0].adresseIp ?? '';
// print(serverIp);
});
} Future<List> _afficherFacture() async {
DatabaseClient().oneIp().then((ips) async {
setState(() => this.ips = ips);
var serverIp =ips[0].adresseIp ?? '';
print(serverIp);
//https://jsonplaceholder.typicode.com/todos/1 final response = await http.get(
"http://$serverIp.typicode.com/todos",
headers:{
HttpHeaders.acceptHeader:'application/json',
HttpHeaders.contentTypeHeader: 'application/json',
});//------------------------------------------------------------------------
var dataUser = json.decode(response.body);
//print(dataUser); setState(() {
Consultation = dataUser;
print(Consultation);
});
});
}}
6- Rendu de l’Application
Vous avez le dépôt git ici : https://github.com/YvesBoah/Configuration-dynamique-d-une-adresse-ip-en-Flutter.git
FIN.
Je vous remercie d’avoir suivie ce tutoriel et vous invite à vous abonnez à ma page médium et à jettez un coup d’oeil sur ma page youtube :
