How To Add Swiper To Flutter App?

First, you'll need to add the carousel_slider package (reference) to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^latest_version

Then, you can fetch the images from the API and integrate the swiper in your widget tree

import 'package:carousel_slider/carousel_slider.dart';
// ... [other imports]

class _HomeState extends State<Home> {
  List<String> images = [];

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

  fetchImages() async {
    final response = await http.get(Uri.parse('https://api.example.com/api/fetch_product.php'));
    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      setState(() {
        images = [
          data['pro_img_1'],
          data['pro_img_2'],
          data['pro_img_3']
        ];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // ... [rest of your code]

    body: SingleChildScrollView(
      child: Column(
        children: [

          // Carousel for images
          if (images.isNotEmpty)
            CarouselSlider(
              options: CarouselOptions(
                height: 200.0,
                autoPlay: true,
                enlargeCenterPage: true,
              ),
              items: images.map((imgUrl) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 5.0),
                      child: Image.network(imgUrl, fit: BoxFit.fill),
                    );
                  },
                );
              }).toList(),
            ),

          
          // ... [rest of your code]
        ],
      ),
    );
  }
}