Creating a News App with Grid View Flutter and WordPress Api

Creating a News App with Grid View Flutter and WordPress Api

Hello everyone, welcome back at porkaone. On this occasion we will learn how to create a simple news application using the grid view widget and WordPress api. Are you curious? Come on, follow the details below.

I have previously made a news application with WordPress API at the following link But the display still uses a list view. So, for those of you who are still confused about how to use grid view, then this is the right tutorial for those of you who want to implement this widget. Scroll down to immediately see the results.

How to Create a Grid View Flutter Application with WordPress Api

1. Create a new project with the name you want. Use flutter version 3+ which supports null safety.

2. Then open the pubspec.yaml file. Then add the http: and flutter_widget_from_html_core: packages. Follow the example as below.

Menambahkan Package Flutter - Sahretech
Add Package

3. Create a new file in the lib folder with the name api.dart. Copy the script below.

import 'dart:convert'; import 'package:http/http.dart' as http; class Api { //method untuk mengambil data Future fetchData() async { //get data from api //we get data from the website hipwee and store it into dataJson variable //you can use url from the other website var dataJson = await http.get(Uri.parse('')); //convert string into dart object //This change aims to ensure that data can be managed easily var data = jsonDecode(dataJson.body); //get data return data; } }

4. Create a new file in the lib folder with the name detail.dart. Copy the script below.

import 'package:flutter/material.dart'; import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart'; class Detail extends StatelessWidget { final String title; final String content; final String image; Detail({ required this.title, required this.content, required this.image, }); @override Widget build(BuildContext context) { //remove the text 'data' in 'data-src', this is usually found in String modifiedHtmlString = this.content.replaceAll('data-src', 'src'); return Scaffold( appBar: AppBar( title: Text('Detail'), ), body: ListView( padding:, children: [ Container( //device-wide image size width: double.infinity, height: MediaQuery.of(context).size.height * 0.33, //you can fill the container with images using this property decoration: BoxDecoration( image: DecorationImage( image: NetworkImage(this.image), // show image fit: BoxFit.cover, ), ), ), SizedBox( height: 10, //distance between image and content ), Padding( padding: EdgeInsets.only(left: 16, right: 16, top: 5, bottom: 16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( this.title, //show title style: TextStyle( fontSize: 22, //font size fontWeight: FontWeight.w400, //letter thickness ), ), SizedBox( height: 20, //distance between title and content ), HtmlWidget( modifiedHtmlString, ), ], ), ) ], ), ); } }

5. Open the main.dart file. Then edit with the script below.

// ignore_for_file: prefer_const_constructors import 'package:flutter/material.dart'; import 'api.dart'; import 'detail.dart'; void main() { runApp( MaterialApp( debugShowCheckedModeBanner: false, home: MyApp(), ), ); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { Api api = Api(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter News'), ), body: FutureBuilder( future: api.fetchData(), builder: (_, snapshot) { if (snapshot.connectionState == ConnectionState.done) { var list = as List; return GridView.builder( itemCount: list.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // multiple grids displayed in one row crossAxisCount: 2, ), itemBuilder: (_, index) { return Container( margin: EdgeInsets.all(8.0), decoration: BoxDecoration( border: Border.all( color: Colors.grey, width: 1.0, ), ), child: InkWell( onTap: () { Navigator.push( context, // DetailPage is the destination page MaterialPageRoute( builder: (context) => Detail( title: list[index]['title']['rendered'], content: list[index]['content']['rendered'], image: list[index]['_embedded'] ['wp:featuredmedia'][0]['source_url'], ), ), ); }, child: Column( children: [ Flexible( child: list[index]['_embedded']['wp:featuredmedia'][0] ['source_url'], height: 100, fit: BoxFit.cover, width: MediaQuery.of(context).size.width, ), ), Padding( padding: const EdgeInsets.only( left: 5, right: 5, top: 5, bottom: 5,), child: Text( list[index]['title'] ['rendered'], style: TextStyle( fontSize: 16, ), maxLines: 3, ), ), ], ), ), ); }, ); } else { return Center( child: CircularProgressIndicator(), ); } }, )); } }

6. Ok, now we have done all the steps. Try running it now with the emulator. If successful, the display will look like the image below.

flutter grid viewflutter grid view

That's it for our short tutorial this time on how to create a news application with Flutter grid view and WordPress API. Hopefully this short tutorial is useful, that's all and thank you.

Post a Comment