flutter_custom_tabs

一个用于使用 Chrome 自定义标签的 Flutter 插件。

flutter_custom_tabs

自定义标签页仅支持安卓Chrome浏览器。因此，界面相同，但行为如下：

  • Android
    如果安装了Chrome，则在您已自定义外观和风格的自定义标签页中打开网页URL。如果未安装，则在其他浏览器中打开。
  • iOS
    使用url_launcher打开SFSafariViewController，启动时的所有选项均被忽略。

入门

将flutter_custom_tabs添加到您的pubspec.yaml文件的依赖项中。

dependencies:
  flutter_custom_tabs: ^0.6.0

用法

像url_launcher一样打开网页URL。

示例

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: TextButton(
            child: const Text('Show Flutter homepage'),
            onPressed: () => _launchURL(context),
          ),
        ),
      ),
    );
  }

  void _launchURL(BuildContext context) async {
    try {
      await launch(
        'https://flutterdart.cn',
        option: CustomTabsOption(
          toolbarColor: Theme.of(context).primaryColor,
          enableDefaultShare: true,
          enableUrlBarHiding: true,
          showPageTitle: true,
          animation: CustomTabsAnimation.slideIn()
          // or user defined animation.
          animation: const CustomTabsAnimation(
            startEnter: 'slide_up',
            startExit: 'android:anim/fade_out',
            endEnter: 'android:anim/fade_in',
            endExit: 'slide_down',
          ),
          extraCustomTabs: const <String>[
            // ref. https://play.google.com/store/apps/details?id=org.mozilla.firefox
            'org.mozilla.firefox',
            // ref. https://play.google.com/store/apps/details?id=com.microsoft.emmx
            'com.microsoft.emmx',
          ],        
        ),
      );
    } catch (e) {
      // An exception is thrown if browser app is not installed on Android device.
      debugPrint(e.toString());
    }
  }
}

GitHub

https://github.com/droibit/flutter_custom_tabs