简体   繁体   中英

Flutter's ListView needs clickable elements, and leading images don't show in ListTile

I am writing a small application in Dart/Flutter with ListView (that shows data - text, and images - from the Internet). I have two problems two solve in this code.

Here is my code (the part that shows data in ListView):

  ListView _testsListView(data) {
    return ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return _tile(data[index].title, data[index].lead, data[index].href, data[index].imageHref);
        });
  }

  ListTile _tile(String title, String lead, String href, String imageHref) => ListTile(

    subtitle: Text(lead,
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 12,
          color: Colors.green,
        )),
    title: Text(title,
      style: TextStyle(color: Colors.blue),
    ),
    leading: CachedNetworkImage(
      imageUrl: imageHref,
      fit: BoxFit.cover,
      alignment: Alignment.centerLeft,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    ),
  );
}

void launchWeb(String URL) async
{
    if (await canLaunch(URL)) {
      await launch(URL);
    } else {
      throw 'Could not launch $URL';
    }
}

The first problem is I need clickable element, one element of ListView:

title ( title here),

subtitile ( lead in my code),

leading (image with imageHref ),

...needs to be clickable. When the user clicks it should open a website (in a default web browser) where URL is href. I tried random codes from Internet and tried with flutter_linkify and url_launcher, but it does not work. On the other hand, when I use onTap: application automatically (without pressing anything) opens web page, which is of course not desired here.

The second problem is that I need images in ListView (the leading property). Images I wanted to use from some website which address starts with htpps:// and I got "handshake" error:

(2) Exception caught by image resource service ════════════════════════════════════════════
Handshake error in client (OS Error: 
    CERTIFICATE_VERIFY_FAILED: unable to get local issuer certificate(handshake.cc:354))

I used the Image.network(), but it did not work (I have read that this method changes user agent), so I decided to use CachedNetworkImage, but still have problems to view those images. URLs of images are correct and when I use them from the Chrome browser there are no problems with viewing images.

   return ListTile(
            onTap:(){
            //list tile tap
              }
             ),
             title: InkWell(
                 child: Text('Title'),
                 onTap:(){
               //title tap
                 }
             ),
             subtitle:InkWell(
                 child: Text('Sub Title'),onTap:(){
               //sub title tap
                 }
             ),),
             leading:InkWell(
                 onTap:(){
                 //title tap
                  }
                 ),
                 child: CachedNetworkImage(
                      imageUrl: imageHref,
                      fit: BoxFit.cover,
                      alignment: Alignment.centerLeft,
                      placeholder: (context, url) => CircularProgressIndicator(),
                      errorWidget: (context, url, error) => Icon(Icons.error),
                    ),
                  )
                )

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM