7 étapes pour créer une application Android et IOS pour votre blog WordPress via Flutter

@flutternerdFlutterNerd

Chez FlutterNerd by Sanskar Tiwari, vous pouvez apprendre et maîtriser le développement d’applications de flutter en créant des applications du monde réel.

Je voulais donc créer une application pour notre site Web et bien, il s’est avéré que c’était plus facile que je ne le pensais.

Alors, commençons

Étape 1: Télécharger et activer le plugin pour le blog WordPress

Relier: https://wordpress.org/plugins/easily-generate-rest-api-url/

Étape 2: Dans le tableau de bord WordPress

Allez dans les paramètres (survolez-le)> (Cliquez sur) Générer l’URL de l’API Rest, faites défiler vers le bas, vous aurez une URL d’API. Vous pouvez le modifier si vous le souhaitez.

Étape 3: Créer un projet Flutter

Si vous ne l’avez pas déjà fait, installez et configurez Flutter à partir de flutter.dev

J’ai utilisé vs code mais vous pouvez également utiliser Android Studio. Cela fonctionnera de la même manière.

Étape 4: Créer des fonctions pour récupérer les articles et l’URL de l’image des articles

Créez un fichier nommé wp-api.dart puis ajoutez package http, et ajoutez cette fonction:

Future<List> fetchWpPosts() async {
  final response = await http.get(
      "https://flutternerd.com/index.php/wp-json/wp/v2/posts",
      headers: {"Accept": "application/json"});
  var convertDatatoJson = jsonDecode(response.body);
  return convertDatatoJson;
}

Étape 5: Créez un frontend et utilisez cette fonction en important le fichier

import 'package:flutter/material.dart';
import 'package:nativewordpress/views/PostPage.dart';
import 'package:nativewordpress/wp-api.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String removeAllHtmlTags(String htmlText) {
    RegExp exp = RegExp(r"<[^>]*>", multiLine: true, caseSensitive: true);

    return htmlText.replaceAll(exp, '');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FlutterNerd"),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 24),
        child: FutureBuilder(
          future: fetchWpPosts(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    Map wppost = snapshot.data[index];
                    return PostTile(
                        imageApiUrl: wppost['_links']["wp:featuredmedia"][0]
                            ["href"],
                        excerpt: removeAllHtmlTags(wppost['excerpt']['rendered']
                            .replaceAll("&#8217;", "")),
                        desc: wppost['content']['rendered'],
                        title: wppost['title']['rendered']
                            .replaceAll("#038;", ""));
                  });
            }

            return Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }
}

class PostTile extends StatefulWidget {
  final String imageApiUrl, title, desc, excerpt;
  PostTile({this.imageApiUrl, this.title, this.desc, this.excerpt});

  @override
  _PostTileState createState() => _PostTileState();
}

class _PostTileState extends State<PostTile> {
  String imageUrl = "";

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (imageUrl != "") {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => PostPage(
                        title: widget.title,
                        imageUrl: imageUrl,
                        desc: widget.desc,
                      )));
        }
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            FutureBuilder(
                future: fetchWpPostImageUrl(widget.imageApiUrl),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    imageUrl = snapshot.data["guid"]["rendered"];
                    return Image.network(imageUrl);
                  }
                  return Center(child: CircularProgressIndicator());
                }),
            SizedBox(height: 8),
            Text(
              widget.title,
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 5),
            Text(widget.excerpt)
          ],
        ),
      ),
    );
  }
}

Étape 6: Nous devrons créer une fonction distincte pour obtenir l’url de l’image de chaque message

fetchWpPostImageUrl(url) async {
  final response = await http.get(url, headers: {"Accept": "application/json"});
  var convertDatatoJson = jsonDecode(response.body);
  return convertDatatoJson;
}

Étape 7: Créons maintenant une page de publication

Nous devons ajouter flutter_html_view paquet puis

import 'package:flutter/material.dart';
import 'package:flutter_html_view/flutter_html_view.dart';

class PostPage extends StatefulWidget {
  final String imageUrl, title, desc;
  PostPage({this.title, this.desc, this.imageUrl});

  @override
  _PostPageState createState() => _PostPageState();
}

class _PostPageState extends State<PostPage> {
  Widget postContent(htmlContent) {
    return HtmlView(
      data: htmlContent, // optional, type String
      onLaunchFail: (url) {
        // optional, type Function
        print("launch $url failed");
      },
      scrollable: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              widget.imageUrl != null
                  ? Image.network(widget.imageUrl)
                  : Container(),
              SizedBox(height: 8),
              Text(
                widget.title,
                style: TextStyle(fontSize: 18),
              ),
              SizedBox(height: 6),
              postContent(
                widget.desc,
              )
            ],
          ),
        ),
      ),
    );
  }
}

C’est ça!

Et c’est ainsi que nous pouvons créer une application Android et iOS pour votre blog WordPress. Si vous rencontrez des problèmes, n’hésitez pas à commenter ci-dessous.

Publié à l’origine à FlutterNerd.com

Histoires liées

Mots clés

Rejoignez Hacker Noon
Créez votre compte gratuit pour débloquer votre expérience de lecture personnalisée.

— to hackernoon.com