Flutter自定义组件库插件flutterflow_widgets的使用

flutterflow_widgets 是一个专门为 FlutterFlow 开发的插件，但它也可以在普通的 Flutter 项目中使用。该插件不仅包含了一些小部件（widgets），还包括一些与 UI 设计相关的操作，如 Snackbar 等。

主要组件介绍

LinkifyText

LinkifyText 是一个简单的、方便的小部件，用于显示带有链接并可点击的文本。当用户点击链接时，它会打开链接中的 URL。这是一个 linkify 和 launcher 小部件的简单组合。

示例代码

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

class Linkify extends StatefulWidget {
  const Linkify({
    Key? key,
    this.width,
    this.height,
    this.text,
  }) : super(key: key);

  final double? width;
  final double? height;
  final String? text;

  @override
  _LinkifyState createState() => _LinkifyState();
}

class _LinkifyState extends State<Linkify> {
  @override
  Widget build(BuildContext context) {
    return LinkifyText(
      text: widget.text ?? '',
      style: TextStyle(fontSize: 14),
    );
  }
}

UrlPreview

UrlPreview 当文本中包含 URL 时，它会显示一个预览。

示例代码

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

class SitePreview extends StatefulWidget {
  const SitePreview({
    Key? key,
    this.width,
    this.height,
    this.text,
    this.padding,
    this.descriptionLength,
    required this.myMessage,
  }) : super(key: key);

  final double? width;
  final double? height;
  final String? text;
  final double? padding;
  final int? descriptionLength;
  final bool myMessage;

  @override
  createState() => SitePreviewState();
}

class SitePreviewState extends State<SitePreview> {
  @override
  Widget build(BuildContext context) {
    return UrlPreview(
      text: widget.text,
      descriptionLength: widget.descriptionLength,
      builder: (Widget child) => Container(
        margin: const EdgeInsets.only(top: 8),
        padding: const EdgeInsets.all(16),
        width: 260,
        decoration: BoxDecoration(
            color: Colors.amber.shade50.withAlpha(100),
            border: Border.all(color: Colors.black26.withAlpha(25)),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(widget.myMessage == false ? 0 : 16),
              topRight: Radius.circular(widget.myMessage ? 0 : 16),
              bottomLeft: Radius.circular(16),
              bottomRight: Radius.circular(16),
            )),
        child: child,
      ),
    );
  }
}

CustomPopup

CustomPopup 提供了一个类似于弹出菜单的功能，可以用来展示动态内容，并且允许用户自定义设计和动作。

示例代码

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

class PopupExample extends StatefulWidget {
  const PopupExample({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

  @override
  _PopupExampleSate createState() => _PopupExampleSate();
}

class _PopupExampleSate extends State<PopupExample> {
  @override
  Widget build(BuildContext context) {
    return CustomPopup(
      tooltip: 'This is the tooltip',
      dx: 32,
      dy: 38,
      child: Icon(Icons.more_vert),
      popup: Container(
        width: 150,
        height: 100,
        color: Colors.blue,
        child: Center(child: Text('Popup Content')),
      ),
    );
  }
}

DisplayMedia

DisplayMedia 接受一个 URL 字符串以及宽度和高度参数来显示各种类型的媒体文件，如照片、视频、音频、txt、pdf 等。

示例代码

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

class MediaDisplayExample extends StatelessWidget {
  final String mediaUrl = "https://example.com/image.jpg";

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
      child: DisplayMedia(
        url: mediaUrl,
        width: 300,
        height: 200,
      ),
    );
  }
}

Snackbar

Snackbar 是一种在页面上显示临时消息的操作。可以在页面加载时或用户按下按钮时显示。

成功 Snackbar 示例

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

Future successSnackbar(
  BuildContext context,
  String title,
  String message,
) async {
  snackBarSuccess(
    context: context,
    title: title,
    message: message,
  );
}

错误 Snackbar 示例

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

Future errorSnackbar(
  BuildContext context,
  String title,
  String message,
) async {
  snackBarWarning(
    context: context,
    title: title,
    message: message,
  );
}

CustomCalendar

CustomCalendar 可以在日历上显示事件的数量。需要设置一个名为 events 的变量类型为 List<JSON> 在 AppState 中，并创建一个自定义小部件来处理事件数据。

示例代码

import 'package:flutter/material.dart';
import 'package:flutterflow_widgets/flutterflow_widgets.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class MyCalendar extends StatefulWidget {
  const MyCalendar({
    Key? key,
    this.width,
    this.height,
    required this.collectionName,
    required this.onTap,
  }) : super(key: key);

  final double? width;
  final double? height;
  final String collectionName;
  final Future<dynamic> Function() onTap;

  @override
  _MyCalendarState createState() => _MyCalendarState();
}

class _MyCalendarState extends State<MyCalendar> {
  final Map<DateTime, dynamic> events = {};

  @override
  void initState() {
    super.initState();
    init();
  }

  init() async {
    FirebaseFirestore.instance.collection(widget.collectionName).snapshots().listen((QuerySnapshot querySnapshot) {
      if (querySnapshot.size == 0 || querySnapshot.docs.isEmpty) {
        return;
      }
      events.clear();
      for (final doc in querySnapshot.docs) {
        if (doc['date'] == null) continue;
        final data = doc.data() as Map<String, dynamic>;
        data['reference'] = doc.reference;
        events[doc['date'].toDate()] = data;
      }
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return CustomCalendar(
      events: events,
      onDaySelected: (events) {
        FFAppState().events = events ?? [];
        widget.onTap();
      },
    );
  }
}

以上是关于 flutterflow_widgets 插件的一些主要组件及其使用示例。通过这些组件，您可以快速构建具有丰富功能的应用程序界面。