Flutter中如何为多个ElevatedButton分别配置不同URL跳转？

要实现多个ElevatedButton跳转不同URL，核心思路是借助url_launcher插件实现URL跳转，并封装通用方法减少重复代码，具体步骤如下：

1. 添加依赖 #

在项目的pubspec.yaml文件中添加url_launcher依赖：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.5 # 请使用最新版本

执行flutter pub get完成依赖安装。

2. 封装通用URL跳转方法 #

在Widget类中封装可复用的跳转方法，统一处理URL打开逻辑和异常：

import 'package:url_launcher/url_launcher.dart';

Future<void> _launchURL(String url) async {
  final Uri uri = Uri.parse(url);
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri, mode: LaunchMode.externalApplication);
  } else {
    throw '无法打开URL: $url';
  }
}

• LaunchMode.externalApplication表示调用系统默认浏览器打开URL，也可根据需求选择inAppWebView等其他模式。

3. 实现多个跳转按钮 #

在build方法中创建多个ElevatedButton，每个按钮调用通用方法并传入对应URL即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('URL跳转示例')),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () => _launchURL('https://www.google.com'),
            child: const Text('打开谷歌'),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () => _launchURL('https://github.com'),
            child: const Text('打开GitHub'),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () => _launchURL('https://flutter.dev'),
            child: const Text('打开Flutter官网'),
          ),
        ],
      ),
    ),
  );
}

4. iOS平台额外配置 #

iOS需要在Info.plist中添加允许查询的URL scheme，否则无法打开外部链接：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>http</string>
  <string>https</string>
</array>

注意事项 #

• 确保传入的URL格式合法（包含http/https前缀），否则Uri.parse会抛出异常。
• 可根据需求在跳转前添加加载提示，或处理跳转失败后的UI反馈。

内容的提问来源于stack exchange，提问作者Shakil Ahammed