Are you looking to add a launcher chooser dialog to your Flutter app for Android? This tutorial will guide you through the process, step-by-step. By the end, you'll have a fully functional launcher chooser dialog that allows users to select their preferred app for performing certain actions within your Flutter app.
Prerequisites
Before we begin, it is assumed that you have a basic understanding of Flutter and Dart programming language. If you're new to Flutter, we recommend checking out the official Flutter documentation to get started.
Step 1: Creating a New Flutter Project
To get started, open your terminal or command prompt and run the following command to create a new Flutter project:
flutter create launcher\_chooser
Once the project has been created, navigate to the project directory and open it in your preferred code editor.
Step 2: Adding Dependencies
In order to implement a launcher chooser dialog in our Flutter app, we need to add a few dependencies. Open the pubspec.yaml file in the root of your project and add the following dependencies:
dependencies:
flutter:
sdk: flutter
url\_launcher: ^6.0.10
package\_info: ^0.4.3+2
Once you have added the dependencies, save the file and run the following command in your terminal or command prompt to install them:
flutter pub get
Step 3: Implementing the Launcher Chooser Dialog
Now that we have added the necessary dependencies, let's implement the launcher chooser dialog. In your Flutter app, create a new file called launcher\_chooser.dart and add the following code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:url\_launcher/url\_launcher.dart';
import 'package:package\_info/package\_info.dart';
class LauncherChooser extends StatefulWidget {
final String url;
final String androidPackageName;
LauncherChooser({required this.url, required this.androidPackageName});
@override
_LauncherChooserState createState() => _LauncherChooserState();
}
class _LauncherChooserState extends State {
late PackageInfo _packageInfo;
@override
void initState() {
super.initState();
initPackageInfo();
}
Future initPackageInfo() async {
final PackageInfo info = await PackageInfo.fromPlatform();
setState(() {
_packageInfo = info;
});
}
Future _launchURL() async {
if (Platform.isAndroid) {
// Launch the launcher chooser dialog for Android
final AndroidIntent intent = AndroidIntent(
action: 'action\_view',
data: widget.url,
package: widget.androidPackageName,
referrer: 'package:${_packageInfo.packageName}',
);
await intent.launch();
} else if (Platform.isIOS) {
// Launch the URL directly on iOS
if (await canLaunch(widget.url)) {
await launch(widget.url);
} else {
throw 'Could not launch $widget.url';
}
}
}
@override
Widget build(BuildContext context) {
return Container(
child: ElevatedButton(
onPressed: _launchURL,
child: Text('Open in Browser'),
),
);
}
}
Let's break down the code:
-
LauncherChooseris a stateful widget that takes two parameters:urlandandroidPackageName. Theurlparameter is the URL that we want to open in the user's preferred browser, while theandroidPackageNameparameter is the package name of the default browser on the user's Android device. -
In the
initState()method, we initialize thePackageInfopackage to get information about our app, such as the package name. -
The
_launchURL()method is where we launch the launcher chooser dialog on Android and launch the URL directly on iOS. We use theurl\_launcherpackage to launch the URL, and theAndroidIntentclass to launch the launcher chooser dialog on Android. -
In the
build()method, we create a simple button that calls the_launchURL()method when pressed.
Now that we have implemented the launcher chooser dialog, let's use it in our Flutter app.
Step 4: Using the Launcher Chooser Dialog in Our Flutter App
In your Flutter app, open the main.dart file and add the following code:
import 'package:flutter/material.dart';
import 'launcher\_chooser.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
String _url = 'https://www.google.com';
String _androidPackageName = 'com.google.android.browser';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Tap the button to open the URL in your preferred browser:',
),
SizedBox(height: 16),
LauncherChooser(
url: _url,
androidPackageName: _androidPackageName,
),
],
),
),
);
}
}
In this example, we are using the LauncherChooser widget in our home page. We pass the _url and _androidPackageName variables as parameters. The _url variable is the URL that we want to open in the user's preferred browser, while the _androidPackageName variable is the package name of the default browser on the user's Android device.
In this tutorial, we have learned how to implement a launcher chooser dialog in a Flutter app for Android. We have added the necessary dependencies, implemented the launcher chooser dialog, and used it in our Flutter app. With this knowledge, you can now add a launcher chooser dialog to your Flutter app for Android, giving your users the ability to choose their preferred app for performing certain actions within your Flutter app.
References
| Reference | Description |
|---|---|
| Flutter Documentation - Get Started | Official Flutter documentation for getting started with Flutter. |
| url\_launcher | A Flutter plugin for launching URLs. |
| package\_info | A Flutter plugin for getting information about the current package. |
| android\_intent | A Flutter plugin for launching Android intents. |