Flutter高效组件插件edmax_super_widget_lite的使用

edmax_super_widget_lite 是一个为 Flutter 提供高效预构建组件的插件。该插件包含一系列可定制化的组件，如英雄区块（Hero Section）、视频播放器和图像展示组件，旨在提高开发效率并优化用户体验。

特性

• SWHero: 支持背景渐变、模糊效果及媒体内容（图片和视频）的多功能英雄区块。
• SWVideo: 带有自动播放、静音和自定义控制选项的视频播放器。
• SWImage: 简单易用的图像组件，支持响应式调整大小和背景图像适配。

安装

在你的 Flutter 项目中添加以下依赖到 pubspec.yaml 文件：

dependencies:
  edmax_super_widget_lite: ^1.0.0

然后运行以下命令以获取依赖：

flutter pub get

使用方法

SWHero

SWHero 允许创建带有可定制背景和媒体内容的英雄区块。它支持图片和视频，并提供了灵活的布局以添加操作按钮。

示例代码

import 'package:flutter/material.dart';
import 'package:edmax_super_widget_lite/edmax_super_widget_lite.dart';
import 'package:google_fonts/google_fonts.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Edmax Super Widget"),
      ),
      body: ListView(
        children: [
          // 英雄区块 - 视频
          SWHero(
            responsive: true,
            blurryBackground: false,
            title: "A Flutter Package 'Edmax Super Widget' Lite",
            description: "Providing pre-built widgets focusing on efficiency and performance.",
            media: Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'),
            actions: [
              Text("Examples", style: GoogleFonts.poppins(textStyle: TextStyle(color: Colors.white, fontSize: 15))),
              "Learn More"
            ],
            actionsOrientation: ActionsOrientation.horizontal,
            action: (index) {
              // 处理操作
            },
          ),
          // 英雄区块 - 图片
          SWHero(
            responsive: true,
            blurryBackground: false,
            title: "Another Hero Section",
            description: "With different media content.",
            media: Uri.parse('https://th.bing.com/th/id/OIP.6bbE2siJf7TZKeEmByhZqQHaEK?w=328&h=184&c=7&r=0&o=5&dpr=1.3&pid=1.7'),
            actions: [
              Text("Examples", style: GoogleFonts.poppins(textStyle: TextStyle(color: Colors.white, fontSize: 15))),
              "Learn More"
            ],
            actionsOrientation: ActionsOrientation.horizontal,
            action: (index) {
              // 处理操作
            },
          ),
          // 视频播放器
          SWVideo(
            uri: Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'),
            responsive: true,
            height: 200,
            autoplay: true,
            muted: true,
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 增加计数器
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

SWVideo

SWVideo 组件用于播放视频，支持自动播放、静音和自定义控件。

示例代码

SWVideo(
  uri: Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'),
  responsive: true,
  height: 200,
  autoplay: true,
  muted: true,
)

SWImage

SWImage 组件用于显示图片，支持响应式调整大小和背景图像适配。

示例代码

SWImage(
  url: 'https://example.com/image.png',
  responsive: true,
  width: 200,
  height: 200,
)