I'm making a card that shows the details about one. The whole idea is to provide icons that can be clicked to take the user to the associated link in the app itself but ironically it's not working. There is no error thrown but when I try to click the Icon it doesn't take me to the link associated with it. Pleasecan someone help me and please let me know where I'm wrong. Here is what I'm using:

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

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

  @override
  State<BhaskarCard> createState() => _BhaskarCardState();
}

class _BhaskarCardState extends State<BhaskarCard> {
  final double coverHeight = 280;
  final double profileHeight = 144;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.white,
        iconTheme: const IconThemeData(color: Colors.black),
        title: const Text(
          "The Writing Paradigm",
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
      body: ListView(
        padding: EdgeInsets.zero,
        children: [
          buildTop(),
          buildContent(),
        ],
      ),
    );
  }

  Widget buildTop() {
    final top = coverHeight - profileHeight / 2;
    final bottom = profileHeight / 2;

    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        Container(
          margin: EdgeInsets.only(bottom: bottom),
          child: buildCoverImage(),
        ),
        Positioned(
          top: top,
          child: buildProfileImage(),
        ),
      ],
    );
  }

  Widget buildCoverImage() => Container(
        color: Colors.grey,
        child: Image.network(
          'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Y29kZXxlbnwwfHwwfHw=&w=1000&q=80',
          width: double.infinity,
          height: coverHeight,
          fit: BoxFit.cover,
        ),
      );
  Widget buildProfileImage() => CircleAvatar(
        radius: profileHeight / 2,
        backgroundColor: Colors.grey.shade800,
        backgroundImage: const AssetImage('images/bhaskar.jpg'),
      );
}

Widget buildContent() => Column(
      children: [
        const SizedBox(
          height: 16.0,
        ),
        const Text(
          'Bhaskar Sharma',
          style: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w700),
        ),
        const SizedBox(
          height: 12.0,
        ),
        const Text(
          'Founder',
          style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w500),
        ),
        const SizedBox(
          height: 21.0,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Link(
              builder:
                  (BuildContext context, Future<void> Function()? followLink) =>
                      buildSocialIcon(FontAwesomeIcons.facebook),
              uri: Uri.parse('https://www.facebook.com/bhaskar2510/'),
              target: LinkTarget.blank,
            ),
            const SizedBox(
              width: 16.0,
            ),
            buildSocialIcon(
              FontAwesomeIcons.github,
            ),
            const SizedBox(
              width: 16.0,
            ),
            buildSocialIcon(FontAwesomeIcons.twitter),
            const SizedBox(
              width: 16.0,
            ),
            buildSocialIcon(FontAwesomeIcons.linkedin),
          ],
        ),
        const SizedBox(
          height: 16.0,
        ),
        const Divider(
          height: 7.0,
        ),
        const SizedBox(
          height: 16.0,
        ),
        buildAbout(),
        const SizedBox(
          height: 32.0,
        ),
      ],
    );

Widget buildAbout() => Padding(
      padding: const EdgeInsets.symmetric(horizontal: 48.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text(
            'About',
            style: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w500),
          ),
          SizedBox(
            height: 16.0,
          ),
          Text(
            'Abcd',
            style: TextStyle(fontSize: 18.0, height: 1.4),
          ),
        ],
      ),
    );

Widget buildSocialIcon(IconData icon) => CircleAvatar(
    radius: 25.0,
    child: Material(
      shape: const CircleBorder(),
      clipBehavior: Clip.hardEdge,
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
        child: Center(
          child: Icon(
            icon,
            size: 30,
          ),
        ),
      ),
    ));

CodePudding user response：

There is no method invoked on the press of the icon. You can pass the url like how you passed the icon and try opening it with url launcher or any package of your choice.

Widget buildSocialIcon(IconData icon, Uri uri) => CircleAvatar(
radius: 25.0,
child: Material(
  shape: const CircleBorder(),
  clipBehavior: Clip.hardEdge,
  color: Colors.transparent,
  child: InkWell(
    onTap: () async{
     //Use url launcher package
      if (!await launchUrl(url)) print('Could not launch $_url');
    },
    child: Center(
      child: Icon(
        icon,
        size: 30,
      ),
    ),
  ),
));

When adding the icon use this

buildSocialIcon(Icons.mail, Uri(
scheme: 'mailto',
path: '[email protected]',
query: encodeQueryParameters(<String, String>{
  'subject': 'Example Subject & Symbols are allowed!'
}),
));
buildSocialIcon(Icons.fb, Uri.parse('https://www.facebook.com');

make sure to add these in AndroidManifest.xml too

<queries>
  <!-- If your app opens https URLs -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
  <!-- If your app makes calls -->
  <intent>
    <action android:name="android.intent.action.DIAL" />
    <data android:scheme="tel" />
  </intent>
  <!-- If your sends SMS messages -->
  <intent>
    <action android:name="android.intent.action.SENDTO" />
    <data android:scheme="smsto" />
  </intent>
  <!-- If your app sends emails -->
  <intent>
    <action android:name="android.intent.action.SEND" />
    <data android:mimeType="*/*" />
  </intent>
</queries>

CodePudding user response：

Use the widget named IconButton for this purpose.

IconButton(
  icon: Icon(Icons. ///your icon here),
  onPressed: (){
    ///your function here what to do
  }
)