Flutter ve WordPress Api ile Android Uygulama Yapmak Bölüm 1

Merhaba bugün sizlere Flutter ile wordpress websitenizin nasıl mobil uygulamasını yapabileceğinizi anlatacağım. Bunun için http package’ından yararlanacağız. Projemizi oluşturduktan sonra ben 2 dosya olarak devam edeceğim. Biri main.dart(burada herhangi bir işimiz olmayacak) diğeri de websitesinden yazıları çektikten sonra yayınlayacağımız ekranı içeren adına wordpressApi.dart dediğim bölüm.

Main.dart kodları

import 'package:flutter/material.dart';
import 'package:wordpressapi/wordpressApi.dart';//Asıl İşimiz olan Ekranı İmport Ettik

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       
        primarySwatch: Colors.blue,
      ),
      home: WordPressApi()//Ana ekranın yolunu belirttik,
    );
  }
}

WordPressApi.Dart Kodları

import 'package:flutter/material.dart';//Gerekli packageları import ettik.
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

class WordPressApi extends StatefulWidget {
  @override
  _WordpressApiState createState() => _WordpressApiState();
}

class _WordpressApiState extends State<WordpressApi> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wordpress Api'),
      ),
    );
  }
}

WordPress Verilerini Nasıl Çektik ?

  List postlar = []; //Çektiğimiz yazıları bu listeye aktarıcağız.
  final apiUrl =
      'https://blog.ekinabalioglu.com/wp-json/wp/v2/'; //Wordpressin Bize Sağladığı Api Url'si

  Future<void> postlariCek() async {
    var veriCek = await http
        .get(Uri.encodeFull(apiUrl + "posts?_embed"), headers: {
      "Accept": "application/json"
    }); //Api urlmizi belirttik ve Json formatında veri beklediğimizi söyledik
    setState(() {
      postlar = json.decode(veriCek.body);
    });
  }

Öncelikle kendi bloğumun api Url’si

Şimdi kodları açıklayayım. Öncelikle boş bir liste oluşturduk apiden çektiğimiz json verisi(PostlariCek fonksiyonunda çekiyoruz) bize liste şeklinde map tipinde dönüyor dolayısıyla liste şeklinde map olarak gelen veriyi boş listeye aktarıyoruz.

Örnek veri

PostlariCek fonksiyonunda ise öncelikle API’mize bağlanıp veriyi çekiyoruz. Daha sonra setState ile sayfamızın yeniden oluşmasını sağlıyoruz.PostlariCek fonksiyonunu initState içerisinde çağırdım.

 @override
  void initState() {
    postlariCek();
    super.initState();
  }

Şimdi Tasarım Kısmına Geçelim.

Gelen verileri Listview yardımıyla cardlar şeklinde göstereceğim.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wordpress Api'),
      ),
      body: ListView.builder(
        itemCount: postlar.length ?? 0,
        itemBuilder: (ctx, i) => Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                Image.network(postlar[i]["_embedded"]["wp:featuredmedia"][0]
                    ["source_url"],fit: BoxFit.cover,),
                SizedBox(
                  height: 10,
                ),
                Text(postlar[i]["title"]["rendered"],style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                Text(postlar[i]["excerpt"]["rendered"].replaceAll( RegExp(r'<[^>]*>'), ''))
              ],
            ),
          ),
        ),
      ),
    );
  }
Flutter
Ekran görüntüsü

Öncelikle listview.builder kullanırken itemCount’ın null olup olmamasına dikkat edip eğer null ise 0 değerini atamasını sağladım.(Exception kısımını ileriki yazılarda değineceğim.) daha sonra apimizin sağladığı key değerleri ile sırasıyla kapak fotoğrafına,başlığa ve yazı içeriğinin kısa özetine ulaştım. Yazı içeriğinin kısa içeriğine ulaşırken wordpress bunu HTML tag’leri ile birlikte bize sağlıyor.Bu tagleri yoketmek içinde Regex kullandım.

.replaceAll( RegExp(r'<[^>]*>’), ”)) bu kısım o işe yarıyor. Yine de bazı sıkıntıları çözmüyor. Daha güzel bir çözüm bulursam daha sonra sizlerle paylaşırım.

Sonuç Olarak

Bugünkü yazımda Flutter android uygulama oluştururken wordpress API’yı nasıl kullanacağımızı, çektiğimiz veriyi nasıl okuyacağımızı öğrendik ve daha sonra bu verileri tasarımsal widgetler ile kullanıcıya yansıttık. Eğer bir sorun yaşarsanız sormaktan çekinmeyin.

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

class WordPressApi extends StatefulWidget {
  @override
  _WordpressApiState createState() => _WordpressApiState();
}

class _WordpressApiState extends State<WordpressApi> {
  List postlar = []; //Çektiğimiz yazıları bu listeye aktarıcağız.
  final apiUrl =
      'https://blog.ekinabalioglu.com/wp-json/wp/v2/'; //Wordpressin Bize Sağladığı Api Url'si

  Future<void> postlariCek() async {
    var veriCek = await http
        .get(Uri.encodeFull(apiUrl + "posts?_embed"), headers: {
      "Accept": "application/json"
    }); //Api urlmizi belirttik ve Json formatında veri beklediğimizi söyledik
    setState(() {
      postlar = json.decode(veriCek.body);
    });
  }

  @override
  void initState() {
    postlariCek();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wordpress Api'),
      ),
      body: ListView.builder(
        itemCount: postlar.length ?? 0,
        itemBuilder: (ctx, i) => Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                Image.network(postlar[i]["_embedded"]["wp:featuredmedia"][0]
                    ["source_url"],fit: BoxFit.cover,),
                SizedBox(
                  height: 10,
                ),
                Text(postlar[i]["title"]["rendered"],style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                Text(postlar[i]["excerpt"]["rendered"].replaceAll( RegExp(r'<[^>]*>'), ''))
              ],
            ),
          ),
        ),
      ),
    );
  }
}


Ekin Abalıoğlu
HAKKIMDA

22 Ekim 1998 tarihinde Denizli'de doğdum.İlkokul ortaokul ve Lise öğrenimini burada tamamlayarak 2018 yılında Ege Üniversitesi Bilgisayar Mühendisliği bölümüne girmeye hak kazandım. Hala Ege Üniversitesi'nde öğrenimime devam ediyorum. Programcılık hayatım 7. Sınıfta online oyunlara hile yazmak istememle başladı.Bu sıralar web programlama ile daha çok ilgileniyorum.