Flutter新手求助：如何点击应用内图标在应用内打开任意URL？

Hey there! I see you're building a neat business card app and stuck on getting those LinkedIn/GitHub icons to open links inside the app. No worries—let's get this sorted step by step.

Step 1: Add the Required Dependency #

First, you'll need the url_launcher package to handle opening links in-app. Add it to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.5 # Use the latest version available on pub.dev

Run flutter pub get in your terminal to install the package.

Step 2: Update Your Dart Code #

Import the package at the top of your file, then add an onTap callback to your InkWell widgets. This is where you'll trigger the link opening logic.

Here's the modified version of your code with the fix included:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:url_launcher/url_launcher.dart'; // Add this import

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // Helper function to launch links in-app
 Future<void> _launchUrl(String url) async {
  final Uri uri = Uri.parse(url);
  // Use inAppWebView mode to open links inside your app
  if (!await launchUrl(uri, mode: LaunchMode.inAppWebView)) {
    throw Exception('Could not launch $url');
  }
 }

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 backgroundColor: Colors.teal[300],
 body: SafeArea(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: <Widget>[
 CircleAvatar(
 radius: 60,
 backgroundColor: Colors.redAccent,
 backgroundImage: AssetImage('images/myself.jpg'),
 ),
 Text('Manish', style: TextStyle(
 fontFamily: 'Pacifico',
 fontSize: 20.0,
 color: Colors.white,
 fontWeight: FontWeight.bold,
 )),
 Text(
 'FLUTTER DEVELOPER',
 style: TextStyle(
 fontFamily: 'Source Sans Pro',
 fontSize: 13.0,
 color: Colors.indigo[900],
 letterSpacing: 1.8,
 fontWeight: FontWeight.bold,
 ),
 ),
 SizedBox(
 height: 25.0,
 width: 200.0,
 child: Divider(
 color: Colors.lightGreenAccent,
 ),
 ),
 Card(
 color: Colors.white,
 margin: EdgeInsets.symmetric(
 vertical: 1.0,
 horizontal: 10.0,
 ),
 child: Padding(
 padding: EdgeInsets.all( 7.0, ),
 child: ListTile(
 leading: Icon(
 Icons.phone,
 color: Colors.teal[500],
 size: 30.0,
 ),
 title: Text(
 '+91 9876543211',
 style: TextStyle(
 color: Colors.black,
 fontFamily: 'Source Sans Pro',
 fontWeight: FontWeight.bold,
 fontSize: 18.0,
 ),
 ),
 )),
 ),
 Card(
 color: Colors.white,
 margin: EdgeInsets.symmetric(
 vertical: 10.0,
 horizontal: 10.0,
 ),
 child: Padding(
 padding: const EdgeInsets.all(7.0),
 child: ListTile(
 leading: Icon(
 Icons.email,
 color: Colors.teal[500],
 size: 30.0,
 ),
 title: Text(
 'xfgbxgfbxfg@gmail.com',
 style: TextStyle(
 color: Colors.black,
 fontFamily: 'Source Sans Pro',
 fontWeight: FontWeight.bold,
 fontSize: 18.0,
 ),
 ),
 )),
 ),
 Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: <Widget>[
 Card(
 shape: RoundedRectangleBorder(
 borderRadius: const BorderRadius.all(
 Radius.circular(13.0),
 ),
 ),
 child: InkWell(
 // Replace with your actual LinkedIn profile URL
 onTap: () => _launchUrl('https://www.linkedin.com/in/your-profile'),
 child: Container(
 width: 69.5,
 height: 69.5,
 decoration: BoxDecoration(
 image: DecorationImage(
 image: AssetImage('images/LinkedInIcon.png'),
 fit: BoxFit.fill,
 ),
 ),
 ),
 ),
 ),
 Card(
 shape: RoundedRectangleBorder(
 borderRadius: const BorderRadius.all(
 Radius.circular(13.0),
 ),
 ),
 child: InkWell(
 // Replace with your actual GitHub profile URL
 onTap: () => _launchUrl('https://github.com/your-username'),
 child: Container(
 width: 70,
 height: 69,
 decoration: BoxDecoration(
 image: DecorationImage(
 image: AssetImage('images/GitHubIcon.png'),
 fit: BoxFit.fill,
 ),
 ),
 ),
 ),
 ),
 ],
 ),
 ),
 ),
 );
 }
}

Key Changes Explained: #

• Added url_launcher import: This package provides the tools to handle URL launching in Flutter.
• Created _launchUrl helper function: This function converts your URL string to a Uri and uses launchUrl with LaunchMode.inAppWebView to open the link directly inside your app (instead of switching to an external browser).
• Added onTap to InkWell: Each icon now has an onTap callback that triggers the link opening. Just replace the placeholder URLs with your actual profile links.

Quick Notes: #

• For iOS, you don't need extra setup for web links like LinkedIn/GitHub— the in-app web view will work out of the box.
• Always use the latest version of url_launcher (check pub.dev for updates).

That should do it! Now when users tap your LinkedIn or GitHub icons, the links will open right inside your business card app. 😊

内容的提问来源于stack exchange，提问作者Manish Shah