Opening links within our flutter app

#flutter #dart #android #ios

Subsequent to the previous post. Sometimes we might want our users to be able to interact with links in our app. You could decide to send the user to their default web browser app but in order to incrreas etime spent on your app, you could include in app url laucher. This is a kind of webview properties for links in your app.

Let's start

Create a new flutter project. I called mine launcher_app

flutter create launcher_app

Then open in any code editor of your choice.
Then add the url_launcher plugin

# This installs the latest version for us.
url_launcher:

Then in your AndroidManifest.xml file add this lines of code. The comments explains what each intent does.

<queries>
  <!-- If your app checks for https support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
   <!-- If your app checks for http support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="http" />
  </intent>
   <!-- If your app checks for SMS support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="sms" />
  </intent>
  <!-- If your app checks for call support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tel" />
  </intent>
</queries>

Then in your Info.plist file add this lines of code.

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

Then create your homescreen and import into main.dart

import 'package:flutter/material.dart';
import 'package:launcher_app/home.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Launcher App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const HomeScreen(),
    );
  }
}

Then create your homescreen and add three elevated buttons. The first to open a link. The second to make a call and the third to send a message.

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

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Codenjobs app'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                String url = 'https://codenjobs.com/';
                final parseUrl = Uri.parse(url);

                if (await canLaunchUrl(parseUrl)) {
                  await launchUrl(parseUrl,
                      mode: LaunchMode.inAppWebView,
                      webViewConfiguration: const WebViewConfiguration(
                        enableJavaScript: true,
                      ));
                }
              },
              child: const Text('Open Link'),
            ),
            ElevatedButton(
              onPressed: () async {
                String url = 'tel:+233803458767';
                final parseUrl = Uri.parse(url);

                if (await canLaunchUrl(parseUrl)) {
                  await launchUrl(
                    parseUrl,
                  );
                }
              },
              child: const Text('make phone call'),
            ),
            ElevatedButton(
              onPressed: () async {
                String url = 'sms:+233803458767';
                final parseUrl = Uri.parse(url);

                if (await canLaunchUrl(parseUrl)) {
                  await launchUrl(
                    parseUrl,
                  );
                }
              },
              child: const Text('Send Message'),
            ),
          ],
        ),
      ),
    );
  }
}

The first button opens the codenjobs website link in an inappwebview and we enable javascript.

That's all for this article.
Originally posted at codenjobs.com

The you can get the source code at https://github.com/Obikwelu/launcher_app

Don't forget to follow me on codenjobs.
Codenjobs is a building an ecosystem in the blockchain and cryptocurrency space to allow developers secure more jobs. You can learn more about code&jobs here about page. If you're crypto savvy, you can read the whitepaper to know more and follow the project. To get latest update about code & jobs join their social media handle by clicking the links below.

[x] Telegram: https://t.me/codenjobs

[x] Twitter: https://twitter.com/codenjobs

[x] Discord: https://discord.gg/eWTXzPrsJ3