Flutter演示文稿展示插件easy_presentation的使用

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

Flutter演示文稿展示插件easy_presentation的使用

Easy Presentation

Easy Presentation 是一个用于在 Flutter 应用中创建和展示演示文稿的插件。它支持本地和网络图片、YouTube 视频、Markdown 格式的内容，并且可以轻松地集成到您的应用中。

功能特性

  • 支持本地和网络图片
  • 支持 YouTube 视频
  • 支持 Markdown 格式
  • 可自定义的 Sliver AppBar
  • 输入 JSON 格式的数据

演示文稿示例

使用方法

1. 独立应用模式 (Stand-Alone App mode)

您可以将 EasyPresentationApp.launchApp 作为独立的应用启动，适用于需要全屏展示演示文稿的场景。

EasyPresentationApp.launchApp(
  context,
  presentationData: PresentationData(),
  title: 'Title',
  bgImage: 'https://nicolasgallagher.com/flexible-css-cover-images/cover.jpg',
);

2. 添加到 Widget 树 (Add to Widget-Tree)

您也可以将 EasyPresentationApp 作为一个普通的 Widget 添加到现有的 Widget 树中，适用于需要在应用的某个页面展示演示文稿的场景。

EasyPresentationApp(
  title: 'Title',
  bgImage: 'https://nicolasgallagher.com/flexible-css-cover-images/cover.jpg',
  presentationData: PresentationData(),
);

数据模型

准备一个 PresentationData 列表并传递给 EasyPresentationApp Widget。每个 PresentationData 对象可以包含标题、图片、YouTube 链接、详细文本等信息。

final presentationData = [
  PresentationData(
    title: 'Lorem Ipsum',
    imgSrc: 'assets/images/home/tips.jpg',
    youtubeLink: "https://youtu.be/YGbiPnxUG9U",
    detailText: 'Lorem Ipsum is simply dummy text ....',
  ),
  PresentationData(
    title: 'Lorem Ipsum',
    imgSrc: 'https://nicolasgallagher.com/flexible-css-cover-images/cover.jpg',
    detailText: 'Lorem Ipsum is simply dummy text ....',
  ),
  PresentationData(
    title: 'Lorem Ipsum',
    imgSrc: 'https://nicolasgallagher.com/flexible-css-cover-images/cover.jpg',
    subCategories: [
      PresentationData(
        title: 'Lorem Ipsum',
        imgSrc: 'https://nicolasgallagher.com/flexible-css-cover-images/cover.jpg',
        youtubeLink: "https://youtu.be/YGbiPnxUG9U",
        detailText: 'Lorem Ipsum is simply dummy text ....',
      ),
      PresentationData(
        title: 'Lorem Ipsum',
        imgSrc: 'assets/images/home/tips.jpg',
        imageMode: ImageMode.landscape.name,
        youtubeLink: "https://youtu.be/YGbiPnxUG9U",
        detailText: 'Lorem Ipsum is simply dummy text ....',
      ),
      PresentationData(
        title: 'Lorem Ipsum',
        imgSrc: 'https://nicolasgallagher.com/flexible-css-cover-images/cover.jpg',
        youtubeLink: "https://youtu.be/YGbiPnxUG9U",
        detailText: 'Lorem Ipsum is simply dummy text ....',
      ),
    ],
  ),
];

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 easy_presentation 插件来展示演示文稿。

import 'package:easy_ads_flutter/easy_ads_flutter.dart';
import 'package:easy_presentation/easy_presentation.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

// 模拟数据
List<PresentationData> modelData = [
  PresentationData(
    title: 'Flutter Demo',
    imgSrc: 'assets/images/home/tips.jpg',
    youtubeLink: "https://youtu.be/YGbiPnxUG9U",
    detailText: 'This is a demo of easy_presentation package.',
  ),
  PresentationData(
    title: 'Another Slide',
    imgSrc: 'https://nicolasgallagher.com/flexible-css-cover-images/cover.jpg',
    detailText: 'More content here....',
  ),
];

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化广告（如果需要）
  await EasyAds.instance.initialize(
    const TestAdIdManager(),
    fbiOSAdvertiserTrackingEnabled: true,
    fbTestMode: true,
    unityTestMode: true,
    admobConfiguration: RequestConfiguration(
        testDeviceIds: [], maxAdContentRating: MaxAdContentRating.pg),
    adMobAdRequest:
        const AdRequest(nonPersonalizedAds: false, keywords: <String>[]),
  );

  runApp(const MyApp());
}

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

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

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    EasyAds.instance.loadAd();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<PresentationData>>(
        // 加载 Markdown (.txt) 文件数据
        future: loadAllData(modelData),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.data == null) {
              return const Text('Some error occur !!!');
            }

            return EasyPresentationApp(
              leadingTitle: 'FF',
              title: 'Data',
              bgImage:
                  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=576&q=80',
              presentationData: snapshot.data!,
              onTapEvent: _handleEventActions,
              placementBuilder: _addPlacements,
            );
          }

          return const Center(child: CircularProgressIndicator());
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 使用 [EasyPresentationApp.launchApp()] 以独立应用模式启动
          EasyPresentationApp.launchApp(
            context,
            title: 'Data',
            bgImage:
                'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=576&q=80',
            leadingTitle: 'Mock',
            presentationData: modelData,
            onTapEvent: _handleEventActions,
          );
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  // 自定义放置小部件
  Widget _addPlacements(BuildContext context, PresentationPlacement placement) {
    switch (placement) {
      case PresentationPlacement.presentationCategoryTop:
        return const EasyBannerAd(adNetwork: AdNetwork.admob);
      case PresentationPlacement.coverDetailBottom:
        return Container(height: 50, width: double.infinity, color: Colors.red);
      case PresentationPlacement.tabDetailBottom:
        return Container(
            height: 50, width: double.infinity, color: Colors.green);
      case PresentationPlacement.youtubeDetailBottom:
        return Container(
            height: 50, width: double.infinity, color: Colors.orange);
      default:
        return const SizedBox();
    }
  }

  // 处理用户操作事件
  void _handleEventActions(
      BuildContext context, PresentationEventAction event) {
    if (event == PresentationEventAction.cardTap) {
      EasyAds.instance.showAd(AdUnitType.interstitial);
    } else if (event == PresentationEventAction.backTap) {
      printLog('Back Pressed');
    } else if (event == PresentationEventAction.tabChanged) {
      printLog('Tab Swiped');
    }
  }

  void printLog(String str) {
    if (kDebugMode) {
      print(str);
    }
  }

  // 加载 Markdown (.txt) 文件
  static Future<List<PresentationData>> loadAllData(
      List<PresentationData> data) async {
    for (int i = 0; i < data.length; i++) {
      final category = data[i];
      if (category.detailText != null &&
          category.detailText!.startsWith("assets/data/")) {
        category.detailText = await rootBundle.loadString(category.detailText!);
      }

      if (category.subCategories != null) {
        await loadAllData(category.subCategories!);
      }
    }
    return data;
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用easy_presentation插件来展示演示文稿的示例代码。easy_presentation插件允许你以简单的方式在Flutter应用中创建和展示幻灯片。

首先，确保你的Flutter项目已经创建，并且你已经在pubspec.yaml文件中添加了easy_presentation依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_presentation: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，我们编写一个示例应用，展示如何使用easy_presentation插件。

main.dart

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

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

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

class PresentationScreen extends StatefulWidget {
  @override
  _PresentationScreenState createState() => _PresentationScreenState();
}

class _PresentationScreenState extends State<PresentationScreen> {
  final List<PresentationSlide> slides = [
    PresentationSlide(
      title: Text('Slide 1'),
      content: Text('This is the first slide of the presentation.'),
      background: Colors.white,
    ),
    PresentationSlide(
      title: Text('Slide 2'),
      content: Text('This is the second slide with an image.'),
      background: Colors.grey[200]!,
      children: <Widget>[
        Image.network(
          'https://via.placeholder.com/600x400',
          fit: BoxFit.cover,
        ),
      ],
    ),
    PresentationSlide(
      title: Text('Slide 3'),
      content: Text('This is the final slide with a button.'),
      background: Colors.blueGrey[100]!,
      children: <Widget>[
        Center(
          child: ElevatedButton(
            onPressed: () {
              // Handle button press, e.g., navigate to another screen
              print('Button pressed on Slide 3');
            },
            child: Text('Click Me!'),
          ),
        ),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Presentation Demo'),
      ),
      body: Presentation(
        slides: slides,
        onEnd: () {
          // Handle the end of the presentation
          print('Presentation ended');
        },
      ),
    );
  }
}

PresentationSlide 类定义

由于easy_presentation插件可能不包含内置的PresentationSlide类，这里我们假设你需要自定义一个PresentationSlide类来封装幻灯片的内容。如果你使用的easy_presentation版本已经包含类似的类，请直接使用它。

import 'package:flutter/material.dart';

class PresentationSlide {
  final Widget title;
  final Widget content;
  final Color background;
  final List<Widget> children;

  PresentationSlide({
    required this.title,
    required this.content,
    required this.background,
    this.children = const [],
  });

  Widget build() {
    return Container(
      color: background,
      padding: EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          title,
          SizedBox(height: 10.0),
          content,
          SizedBox(height: 10.0),
          ...children,
        ],
      ),
    );
  }
}

使用说明

  1. 将上述代码分别添加到你的main.dart文件中。
  2. 确保easy_presentation插件已经正确安装。
  3. 运行你的Flutter应用，你应该能看到一个简单的演示文稿，包含三个幻灯片，每个幻灯片都有不同的内容和背景。

这个示例展示了如何使用easy_presentation插件的基本功能。根据需求，你可以进一步自定义幻灯片的内容、动画效果和导航逻辑。

回到顶部