What widget i should use in flutter ,where user click on a photo and they redirect to the amazon.com-CodePudding

Beginner here

Padding( padding: const EdgeInsets.all(8.0), child: Container( width: 200, decoration: BoxDecoration( image: DecorationImage(

                            // ignore: prefer_const_constructors
                            image: AssetImage(
                                "assets/FeaturedPeoplePhotos/Top100/MostRecommendedBooks/1.png"),
                            fit: BoxFit.cover),
                        //color: Colors.amber,
                        borderRadius: BorderRadius.circular(8)),
                  ),
                ),

I have written a code in flutter which shows an image of a particular book and I want to know and need some help about how i add a affiliate link in image so that user can redirect to the product page like Amazon or any other e-commerce sites

CodePudding user response：

GestureDetector is the widget you're looking for. It detects all kinds of gestures on its child widget. In your case, you can wrap your Container() widget with GestureDetector() widget. Like this:

GestureDetector(
    onTap: (){
       //here you can redirect to your affiliate link by using url_launcher
       launch("www.yourlinkhere.com");
    },
    child: Container( //...your image container widget ),
),

The launch() function is provided by the url_launcher package. You have to include it as a dependency in your pubspec.yaml file. Check this out.

CodePudding user response：

You can use this url_launcher package and call from GestureDetector widget with onTap event.

https://pub.dev/packages/url_launcher

void launchAmazon() async {
const url = 'https://www.amazon.com/';
if (await canLaunch(Uri.encodeFull(url))) {
await launch(url);
} else {
throw ‘Could not launch $url’;
}

CodePudding user response：

There are two parts to your question first of all how to make an image clickable you could use InkWell Widget or GestureDetector Widget they both allow you to click on their child widget

The second part is how to open an URL in a flutter app you could use a package called url_launcher

Here is a demo of implementing clicking on an image and opening a link

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

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

const String _url = 'https://www.amazon.com/';

class _MyAppState extends State<MyApp> {
  void _launchURL() async {
    if (!await launch(_url)) throw 'Could not launch $_url';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: InkWell(
            onTap: _launchURL,
            child: Container(
              width: 200,
              decoration: BoxDecoration(
                  image: DecorationImage(

                      // ignore: prefer_const_constructors
                      image: AssetImage("assets/FeaturedPeoplePhotos/Top100/MostRecommendedBooks/1.png"),
                      fit: BoxFit.cover),
                  //color: Colors.amber,
                  borderRadius: BorderRadius.circular(8)),
            ),
          ),
        ),
      ),
    );
  }
}

Basically what I have done here is wrap the Container Widget containing the image with InkWell Widget and use the function launch from the package url_launcher in onTap to open the URL whenever the user click the image