Flutter App Wordpress Website To Flutter App

Make Carousel Slider From Sticky Post -WordPress Website To Flutter App

August 24, 2024 3 Min Read

Now we make a carousel slider from WordPress sticky post. we convert a WordPress website to a Flutter app.

Add Dependency

You will need the get, http, shimmer, cached_network_image, and carousel_slider packages to make network requests in your Flutter app.

Add the following line to your pubspec.yaml file.

  get: ^4.6.1
  http: ^0.13.6
  shimmer: ^2.0.0
  cached_network_image: ^3.2.0
  carousel_slider: ^4.1.1

In this tutorial, we’ll start by creating HomeController, SliderModel, and RemoteSliderService to handle all kinds of server data and build a model list.

SliderModel Code

List<SliderBanner> sliderFromJson(String jsons) => List<SliderBanner>.from(
    json.decode(jsons).map((slider) => SliderBanner.fromJson(slider)));

class SliderBanner {
  final int id;
  final String image;

  SliderBanner({required this.id, required this.image});

  factory SliderBanner.fromJson(Map<String, dynamic> data) =>
      SliderBanner(id: data['term_id'], image: data['image']);
}

RemoteSliderService Code

Use the http package to make a GET request to the WordPress REST API to fetch sticky posts.

class RemoteSliderService {
  var client = http.Client();
  var url = stickySliderUrl;

  Future<dynamic> get() async {
    var response = await client.get(Uri.parse(url));
    return response;
  }
}

Set Up Your WordPress API
Ensure that the WordPress REST API is enabled on your WordPress site.
Sticky posts can be retrieved using the WordPress REST API by querying the /wp-json/wp/v2/posts?sticky=true endpoint.
If Need Custom THBD-Tools-App-API For Custom Category, Post etc Getting From WordPress Website, Then Contact With Us

HomeController Code

class HomeController extends GetxController {

  static HomeController instence = Get.find();
  RxList<SliderBanner> sliderList =
      List<SliderBanner>.empty(growable: true).obs;
  RxBool isSliderLoading = false.obs;

  @override
  void onInit() {
    getSliders();
    // TODO: implement onInit
    super.onInit();
  }

  void getSliders() async {
    try {
      isSliderLoading(true);
      var results = await RemoteSliderService().get();
      if (results != null) {
        sliderList.assignAll(sliderFromJson(results.body));
      }
    } finally {
      isSliderLoading(false);
    }
  }
}

AppRoute Code

class AppRoute{
  static const String dashboard = '/';
}

DashBoardBinding Code

class DashBoardBinding extends Bindings{
  @override
  void dependencies() {
    Get.put(HomeController());
  }
}

AppPage Code

class AppPage {
  static var list = [
    GetPage(
        name: AppRoute.dashboard,
        page: () => const Dashboard(),
        binding: DashBoardBinding())
  ];
}

main.dart Code

void main() {
  runApp(const MyApp());
}
class MyApp extends  StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      getPages: AppPage.list,
      initialRoute: AppRoute.dashboard,
      themeMode: ThemeMode.light,
      debugShowCheckedModeBanner: false,

    );
  }
}