Flutter字体与进度对话框插件simple_fontellico_progress_dialog的使用

描述

Simple Fontellico Progress Dialog ⌛ 是一个用于渲染不同类型的加载指示器进度对话框窗口的Flutter包。以下是该插件的一些新特性、安装方法、使用示例以及更多详细信息。

新特性 💥

• 内部改进
• 构造函数中的可选参数
• 修复bug
• 更新示例

安装

要在您的项目中使用这个包，需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_fontellico_progress_dialog: latest_version # 请替换为最新版本号

使用方法

首先，导入此包到您的Dart文件中：

import 'package:simple_fontellico_progress_dialog/simple_fontico_loading.dart';

然后创建一个新的实例并传递上下文作为参数（必需）。

示例代码

下面是一个完整的示例应用程序，演示了如何使用 simple_fontellico_progress_dialog 包来显示不同类型的进度对话框：

import 'package:flutter/material.dart';
import 'package:simple_fontellico_progress_dialog/simple_fontico_loading.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Fontellico Progress Dialog Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  SimpleFontelicoProgressDialog? _dialog;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Fontellico Progress Dialog Demo'),
      ),
      body: Center(
        child: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          crossAxisCount: 2,
          children: <Widget>[
            ElevatedButton(
              onPressed: (){ _showDialog(context, SimpleFontelicoProgressDialogType.normal, 'Normal'); }, 
              child: const Text('Normal'),
            ),
            ElevatedButton(
              onPressed: (){ _showDialog(context, SimpleFontelicoProgressDialogType.normal, 'Normal Vertical'); }, 
              child: const Text('Normal Vertical'),
            ),
            // 更多按钮...
            ElevatedButton(
              onPressed: (){ _showDialog(context, SimpleFontelicoProgressDialogType.custom, 'Custom'); }, 
              child: const Text('Custom'),
            ),
            // 注意：为了简洁起见，省略了一些ElevatedButton，实际应用中应包含所有类型
          ],
        ),
      ),
    );
  }

  void _showDialog(BuildContext context, SimpleFontelicoProgressDialogType type, String text) async{
    _dialog ??= SimpleFontelicoProgressDialog(context: context);
    
    // 根据不同的类型和文本设置对话框属性
    if(type == SimpleFontelicoProgressDialogType.custom) {
      _dialog!.show(message: text, type: type, width: 150.0, height: 75.0, loadingIndicator: const Text('C', style: TextStyle(fontSize: 24.0),));
    } else if (text == 'Normal Vertical') {
      _dialog!.show(message: text, type: SimpleFontelicoProgressDialogType.normal, horizontal: false, width: 150.0, height: 75.0, hideText: false, indicatorColor: Colors.red);
    } else if (text == 'Updating') {
      _dialog!.show(message: text, type: SimpleFontelicoProgressDialogType.normal, horizontal: true, width: 150.0, height: 75.0, hideText: false, indicatorColor: Colors.red);
      await Future.delayed(const Duration(seconds: 1));
      _dialog!.updateMessageText('Changing text');
    } else {
      _dialog!.show(message: text, type: type, horizontal: true, width: 150.0, height: 75.0, hideText: false, indicatorColor: Colors.red);
    }
    
    // 模拟异步操作后隐藏对话框
    await Future.delayed(const Duration(seconds: 1));
    _dialog!.hide();
  }
}

构造函数

构造函数接受以下两个必需参数：

show 方法属性

updateMessageText 方法属性

以上就是关于 simple_fontellico_progress_dialog 的基本介绍和使用指南。希望对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。