Comment utiliser WordPress et Flutter ensemble dans un même projet ?

Tu es à l’aise avec WordPress, tu tripotes Flutter depuis quelques temps, et tu te demandes : est-ce que je peux combiner les deux dans un seul projet cohérent ?
Bonne nouvelle : oui, et c’est même une très bonne idée ! 🎯

Dans cet article, on va voir comment utiliser WordPress comme CMS headless et Flutter comme interface utilisateur cross-platform. Prêt ? Allez, on plonge.

Pourquoi combiner WordPress et Flutter ?

WordPress, tu connais. C’est le CMS le plus utilisé au monde. Interface d’admin super pratique, système d’extension, grosse communauté.
Flutter, de son côté, te permet de créer des applis mobiles et web en un seul codebase. C’est rapide, beau et cross-platform (Andoird, iOS, Web, …).

En combinant les deux :

• Tu gères ton contenu facilement dans WordPress.
• Tu affiches ce contenu dans une app Flutter, fluide et moderne.
• Tu sépares frontend et backend comme un vrai pro (hello architecture headless).

Vue d’ensemble de l’architecture

Voici le schéma de base :[Admin WordPress] → [API REST JSON] → [App Flutter]

Concrètement :

• WordPress fournit les données via son API REST.
• Flutter interroge cette API pour afficher les contenus.

Étape 1 – Préparer WordPress

WordPress possède déjà une API REST native (wp-json/wp/v2/). Mais tu vas probablement vouloir aller plus loin que les articles de base.

Créer des types de contenu personnalisés

Si ton appli a des besoins spécifiques, pense à créer des Custom Post Types (CPT). Tu peux le faire :

• avec un peu de code dans functions.php
• ou avec des extensions comme Advanced Custom Fields (ACF) ou Custom Post Type UI.

Ajouter des champs personnalisés

Installe ACF. Tu pourras ajouter des champs (texte, image, relation, etc.) à tes publications.

Pour que ces champs soient exposés dans l’API REST, installe aussi :
ACF to REST API → https://wordpress.org/plugins/acf-to-rest-api/

🔐 Authentification

Si ton app Flutter doit poster des commentaires, créer des users, etc., il faut sécuriser l’API. Le plus simple :

• Installe JWT Authentication for WP REST API
• Configure le fichier .htaccess et wp-config.php pour activer les tokens

Étape 2 – Configurer Flutter

Côté Flutter, tu vas interroger l’API de WordPress avec un client HTTP. Pour l’exemple, on va utiliser le package http.

dependencies:
  http: ^1.13

🧪 Récupérer la liste des articles

Voici un exemple de code pour récupérer des articles depuis ton site WordPress :

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<dynamic>> fetchPosts() async {
  final response = await http.get(Uri.parse('https://tonsite.com/wp-json/wp/v2/posts'));

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Échec de la récupération des articles');
  }
}

Tu peux ensuite afficher ça dans un ListView, ou un widget plus sexy.

Étape 3 – Créer des modèles propres

Plutôt que de manipuler du JSON brut, crée des classes Dart pour tes données. Par exemple :

class Post {
  final int id;
  final String title;
  final String content;

  Post({required this.id, required this.title, required this.content});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title']['rendered'],
      content: json['content']['rendered'],
    );
  }
}

Et adapte ton fetchPosts() :

Future<List<Post>> fetchPosts() async {
  final response = await http.get(Uri.parse('https://tonsite.com/wp-json/wp/v2/posts'));

  if (response.statusCode == 200) {
    final List<dynamic> jsonList = jsonDecode(response.body);
    return jsonList.map((json) => Post.fromJson(json)).toList();
  } else {
    throw Exception('Erreur');
  }
}

Étape 4 – Authentification avec JWT (optionnel)

Pour certaines actions (ajout de commentaire, login…), tu devras t’authentifier.

En Flutter :

Future<String?> loginUser(String username, String password) async {
  final response = await http.post(
    Uri.parse('https://tonsite.com/wp-json/jwt-auth/v1/token'),
    body: {
      'username': username,
      'password': password,
    },
  );

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    return data['token']; // À stocker avec flutter_secure_storage
  } else {
    return null;
  }
}

Ensuite, pour faire une requête protégée avec un token :

final token = await getStoredToken(); // via secure_storage
final response = await http.get(
  Uri.parse('https://tonsite.com/wp-json/wp/v2/users/me'),
  headers: {
    'Authorization': 'Bearer $token',
  },
);

Cas d’usage concrets

Voici quelques idées de projets concrets que tu peux développer avec cette stack :

• Une app mobile de blog ou de news connectée à WordPress
• Un back-office Flutter Web customisé pour un client (plus clean que l’admin WP) mais bon, il ne faut pas réinventer la roue !
• Une appli événementielle avec inscription, agenda, etc.

Extensions et packages utiles

• http ou dio pour les requêtes HTTP
• flutter_riverpod ou bloc pour gérer l’état
• flutter_secure_storage pour stocker les tokens JWT
• ACF et ACF to REST API côté WordPress
• JWT Auth Plugin pour sécuriser l’API

Avantages de cette approche

• Tu profites de l’écosystème WordPress sans te taper le PHP côté frontend
• Tu crées une app Flutter modernisée, rapide et multiplateforme
• Tu peux scaler ton app plus facilement (déploiement indépendant)

Points d’attention

• L’API REST de WordPress peut être un peu limitée dans certains cas, mais bon avec GraphQL tu devrais trouver ton bonheur.
• Il faut bien penser à la sécurité (auth, permissions, etc.)
• Le SEO est plus complexe avec Flutter Web (pas idéal pour un site public pur)

Associer WordPress et Flutter est une solution puissante pour créer des apps performantes avec un backend rodé et une UI moderne. Tu gardes la souplesse de WordPress pour la gestion de contenu, tout en proposant une expérience utilisateur top niveau grâce à Flutter.

C’est une architecture très pertinente pour un projet de blog, d’application de contenu, ou même un site vitrine plus interactif.