Flutter展示案例插件flutter_showcase的使用

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

Flutter展示案例插件flutter_showcase的使用

A simple, fast and easy way to share your flutter project or mockups with the world.

示例动图

简介

移动设备截图

Flutter Showcase 是一个帮助你在线分享 Flutter 项目的工具包。虽然将你的项目构建为网站已经足够了，但此插件旨在增强你的演示效果。你可以拥有不同的外观、可操作的链接以及社交媒体元数据。

注意：Flutter Showcase 仅在构建 Web 项目时可见。编译到其他平台时，你的项目将保持原样。

目前只提供了 SimpleTemplate，但目标是提供多种选项，让你可以根据需要选择最适合的模板。

访问 Web Demo 查看来自 @gskinnerTeam 的精彩示例。

开始使用

1. 安装包

检查最新版本并安装：

flutter pub add flutter_showcase

2. 将你的应用包装在 Showcase 小部件中

runApp(Showcase(
  title: '我的优秀项目',
  description: '你好世界！欢迎来到我的优秀 Flutter 项目',
  app: MyApp()
));

3. 在 Material App 中添加 Frame 构建器

MaterialApp(
  ...
  builder: Frame.builder,
  ...
)

为什么需要这个？ 此构建器用于设置新的 MediaQuery 参数，使其适应移动设备尺寸。

4. 运行 Flutter build web

flutter build web

5. 发布 Web 项目

查看这些文章了解如何发布你的应用：

那么简单吗？ 是的！

继续阅读以了解更多详细功能。

自定义你的展示案例

1. 从 Templates 类中选择你喜欢的模板。

2. 添加可操作的链接

Showcase(
  // 添加 LinkData.github、LinkData.pub 或创建自定义的 LinkData()
  links: [
    LinkData.github(
      'https://github.com/jamesblasco/flutter_showcase'),
    LinkData.pub(
      'https://pub.dev/packages/flutter_showcase')
  ],
  // 在 Flutter Logo 旁边添加品牌标志
  logoLink: LinkData(
      icon: Image.asset('assets/jaime_logo.png',
          fit: BoxFit.fitHeight),
      url: 'https://github.com/jamesblasco')
)

3. 创建自定义主题

Showcase(
  theme : TemplateThemeData(
    brightness: Brightness.dark,
    backgroundColor: Colors.black,
    titleTextStyle: TextStyle(
      fontFamily: 'WorkSans',
      fontWeight: FontWeight.bold,
      color: Colors.white,
      height: 1.1,
      letterSpacing: 5),
    descriptionTextStyle: TextStyle(
        fontFamily: 'WorkSans',
        color: Colors.white70,
        fontWeight: FontWeight.w400,
        letterSpacing: 2),  
    flutterLogoColor: FlutterLogoColor.white,
    frameTheme: FrameThemeData(
      frameColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ),    
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.white,
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
      textTheme: ButtonTextTheme.accent,
      padding: EdgeInsets.all(16),
    ),
    buttonTextStyle: TextStyle(
        fontFamily: 'WorkSans',
        color: Colors.black,
        fontWeight: FontWeight.bold,
        letterSpacing: 2),
    buttonIconTheme: IconThemeData(color: Colors.black) 
  ),
)

当前包的问题

  • Flutter Web 仍有限制，某些功能不可用，性能有时较低。
  • 虽然大多数 UI 包在 Web 上可用，但有些包可能无法工作或不允许编译应用程序。
  • 在 Flutter Web 应用程序中创建移动框架会使所有手势的全局位置成为整个屏幕的参考，而不是框架内的应用。如果你在任何 GestureDetector 或更高级的小部件中使用 globalPosition，这可能会导致问题。

自动生成社交媒体标签 - 实验性功能

警告！此功能仍在实验阶段；它会生成一个新的 index.html 文件，如果你添加了自己的 JavaScript（如 Firebase），目前不会生效。

此项目的目标是为你的 Flutter 项目生成社交媒体标签的标题、描述、URL 和图像，这样你就无需手动设置。

1. 需要一个 WebDriver 来为项目拍摄截图

对于实验版本，我正在使用 ChromeDriver。

GitHub Actions 默认已安装 ChromeDriver 🎉 本地安装：

  • 对于安装了 Homebrew 的 Mac 用户：brew tap homebrew/cask && brew cask install chromedriver
  • 对于基于 Debian 的 Linux 发行版：sudo apt-get install chromium-chromedriver
  • 对于安装了 Chocolatey 的 Windows 用户：choco install chromedriver 更多信息请查看 这里。

2. 在 pubspec.yaml 文件末尾添加以下内容

showcase:
  title: 你的项目名称
  description: 这是你的项目描述
  url: https://showcase-custom-web.com

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

1 回复

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


flutter_showcase 是一个用于在 Flutter 应用中展示应用功能或特性的插件。它可以帮助开发者以美观的方式向用户展示应用的核心功能，通常用于应用首次启动时的引导页面或教程。

安装 flutter_showcase

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

dependencies:
  flutter:
    sdk: flutter
  flutter_showcase: ^0.1.0  # 请使用最新版本

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

使用 flutter_showcase

以下是一个简单的示例，展示如何使用 flutter_showcase 来创建一个引导页面。

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

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

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

class ShowcaseScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Showcase(
        title: 'Welcome to My App',
        description: 'Discover the amazing features of our app.',
        steps: [
          ShowcaseStep(
            title: 'Feature 1',
            description: 'This is the first feature of our app.',
            icon: Icons.star,
          ),
          ShowcaseStep(
            title: 'Feature 2',
            description: 'This is the second feature of our app.',
            icon: Icons.thumb_up,
          ),
          ShowcaseStep(
            title: 'Feature 3',
            description: 'This is the third feature of our app.',
            icon: Icons.verified_user,
          ),
        ],
        onFinish: () {
          // 当用户完成展示时执行的操作
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(builder: (context) => HomeScreen()),
          );
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

代码解释

  1. Showcase Widget: Showcase 是 flutter_showcase 的核心组件，用于展示多个步骤的引导页面。

    • title: 展示的标题。
    • description: 展示的描述。
    • steps: 一个 ShowcaseStep 列表，每个步骤包含一个标题、描述和图标。
    • onFinish: 当用户完成所有步骤时触发的回调函数。

  2. ShowcaseStep: 每个步骤包含以下属性：

    • title: 步骤的标题。
    • description: 步骤的描述。
    • icon: 步骤的图标。

  3. onFinish: 当用户完成所有步骤后，可以导航到应用的主页面或其他页面。

自定义样式

你可以通过 ShowcaseTheme 来自定义展示的样式，例如背景颜色、文本颜色等。

Showcase(
  theme: ShowcaseTheme(
    backgroundColor: Colors.blueGrey,
    titleTextStyle: TextStyle(color: Colors.white, fontSize: 24),
    descriptionTextStyle: TextStyle(color: Colors.white70, fontSize: 16),
  ),
  title: 'Welcome to My App',
  description: 'Discover the amazing features of our app.',
  steps: [
    // 步骤列表
  ],
  onFinish: () {
    // 完成后的操作
  },
);
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！