Flutter URL展示插件url_tile的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter URL展示插件url_tile的使用

url_tile 是一个 Flutter 插件，它允许你在应用中展示多种格式的 URL 内容，包括图片（jpg, jpeg, png, gif, webp, bmp, wbmp, heic）、PDF、视频（mp4, mov, mkv, flv, webm）和音频（mp3, flac, wav, aac, m4a）。该插件还提供了图像预览选项、PDF预览选项以及视频和音频播放器选项。

url_tile 示例

开始使用

首先，你需要在 pubspec.yaml 文件中添加 url_tile 依赖：

dependencies:
  url_tile: ^版本号

然后，导入 url_tile 包：

import 'package:url_tile/url_tile.dart';

使用示例

以下是一个完整的示例，展示了如何使用 url_tile 插件来展示不同类型的 URL 内容。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'URL Tile Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'URL Tile Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: [
            // 图片URL
            const Text(
              '插件提供的图片（jpg, jpeg, png, bmp, wbmp, gif, webp）卡片',
              style: TextStyle(fontSize: 20),
            ),
            // jpg
            const Text(
              'jpg',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/download.jpeg',
            ),
            // jpeg
            const Text(
              'jpeg',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://www.nasa.gov/sites/default/files/styles/full_width/public/thumbnails/image/main_image_star-forming_region_carina_nircam_final-1280.jpg',
            ),
            // png
            const Text(
              'png',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/100-1009816_png-images-buttons-download-red-download-button-png.png',
            ),
            // wbmp
            const Text(
              'wbmp',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/download-_1_.wbmp',
            ),
            // webp
            const Text(
              'webp',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/ezgif.com-gif-maker.webp',
            ),
            // gif
            const Text(
              'gif',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5eeea355389655.59822ff824b72.gif',
            ),
            // bmp
            const Text(
              'bmp',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/pexels-pixabay-247615.bmp',
            ),
            // HEIC
            const Text(
              'HEIC',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/IMG_4151.HEIC',
            ),
            // 自定义高度和预览AppBar的图片卡片
            const Text(
                '带有自定义高度和预览AppBar的图片卡片（jpg, jpeg, png）'),
            const URLTile(
              url: 'https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg',
              imageHeight: 150,
              imageFit: BoxFit.fitWidth,
            ),
            // 带有自定义内容的图片卡片
            const Text(
                '带有自定义内容的图片卡片（jpg, jpeg, png）'),
            URLTile(
              url: 'https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg',
              customTile: Container(
                color: Colors.green,
                child: const Text(
                  '用户图片卡片',
                  style: TextStyle(fontSize: 30),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            // 视频URL
            const Text(
              '插件提供的视频卡片',
              style: TextStyle(fontSize: 20),
            ),
            // mp4
            const Text(
              'mp4',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
            ),
            // mov
            const Text(
              'mov',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/One+Piece++The+Greatest+Story+Ever+Told%E3%80%8CASMV%E3%80%8D.mov',
            ),
            // mkv
            const Text(
              'mkv',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/One+Piece+The+Greatest+Story+Ever+Told%E3%80%8CASMV.mkv',
            ),
            // flv
            const Text(
              'flv',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/ONE+PIECE+AMVASMV+THE+PIRATE+KING++Monkey+D.+Luffy.flv',
            ),
            // webm
            const Text(
              'webm',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/One+Piece+The+Greatest+Story+Ever+Told%E3%80%8CASMV.webm',
            ),
            // 自定义卡片和预览AppBar的mp4卡片
            const Text(
                '带有自定义卡片和预览AppBar的mp4卡片'),
            URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/Onepiece.mp4',
              customTile: Container(
                color: Colors.blue,
                child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    'MP4文件',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ),
              previewAppBar: AppBar(
                backgroundColor: Colors.blue,
                title: const Text('视频预览',
                    style: TextStyle(fontFamily: 'SemiBold', fontSize: 18)),
              ),
            ),
            // PDF URL
            // 基本
            const Text('插件提供的PDF卡片'),
            const URLTile(
              url: 'https://www.africau.edu/images/default/sample.pdf',
            ),
            // 自定义预览AppBar的PDF卡片
            const Text(
                '带有自定义预览AppBar的PDF卡片'),
            URLTile(
              url: 'https://www.africau.edu/images/default/sample.pdf',
              previewAppBar: AppBar(
                title: const Text('自定义标题'),
              ),
            ),
            // 自定义卡片的PDF卡片
            const Text('带有自定义卡片的PDF卡片'),
            const URLTile(
              url: 'https://www.africau.edu/images/default/sample.pdf',
              customTile: Text(
                'PDF文件',
                style: TextStyle(fontSize: 30),
                textAlign: TextAlign.center,
              ),
            ),
            // 音频URL
            const Text('插件提供的音频URL卡片'),
            // mp3
            const Text(
              'mp3',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
            ),
            // flac
            const Text(
              'flac',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/Luffys_Baka_Song_(getmp3.pro).flac',
            ),
            // wav
            const Text(
              'wav',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/Luffys_Baka_Song_(getmp3.pro).wav',
            ),
            // aac
            const Text(
              'aac',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/One_piece_Rumbar_Kaizoku_Binks_n_(getmp3.pro).aac',
            ),
            // m4a
            const Text(
              'm4a',
              style: TextStyle(fontSize: 16),
            ),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/One_piece_Rumbar_Kaizoku_Binks_n_(getmp3.pro).m4a',
            ),
            // 不支持的URL
            const Text('插件提供的不支持的URL卡片'),
            const URLTile(
              url: 'https://docs.google.com/document/d/1jryXhAXp35O4vtjv-vIPVNxu3t5UbgpcUMVEiiXwtWA/edit',
            ),
            // apk
            const Text('插件提供的不支持的URL卡片'),
            const URLTile(
              url: 'https://flutter-coe.s3.us-east-2.amazonaws.com/app-release.apk',
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter URL展示插件url_tile的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter URL展示插件url_tile的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用url_launcher插件（注意：虽然帖子中提到的是url_tile，但Flutter社区中更常见和官方的插件是url_launcher，用于在应用中打开URL）的示例代码。

首先，你需要在你的pubspec.yaml文件中添加url_launcher依赖：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.3  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Dart文件中使用url_launcher插件来打开URL。下面是一个完整的示例，展示了如何在Flutter应用中创建一个按钮，点击该按钮后打开指定的URL。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Launcher Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String _url = 'https://flutter.dev';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('URL Launcher Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _launchURL,
          child: Text('Open Flutter Website'),
        ),
      ),
    );
  }

  _launchURL() async {
    if (await canLaunch(_url)) {
      await launch(_url);
    } else {
      throw 'Could not launch $_url';
    }
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml文件中添加了url_launcher依赖。
  2. 创建了一个简单的Flutter应用，其中包含一个按钮。
  3. 当按钮被点击时，调用_launchURL函数。
  4. _launchURL函数首先检查是否可以打开指定的URL（这对于在不同平台上运行的应用来说很重要，因为某些平台可能不支持某些类型的URL），然后使用launch函数打开URL。

这个示例展示了如何在Flutter应用中使用url_launcher插件来打开URL。如果你确实是在寻找一个名为url_tile的特定插件，并且它在Flutter社区中存在（尽管不太常见），那么你可能需要查找该插件的官方文档或仓库以获取正确的使用方法和示例代码。不过，基于Flutter社区的标准和常见做法，url_launcher是实现这一功能的首选插件。

回到顶部