Flutter动画加载边框插件animated_loading_border的使用

animated_loading_border

[] [] [] []

animated_loading_border 是一个Flutter包，它以现代的方式显示动画边框作为占位符，同时以简单的方式自定义和即用型来加载小部件。

Preview

Light Theme	Dark Theme

Basic Usage

1. 导入包

首先，在您的项目文件中导入 animated_loading_border 包：

import 'package:animated_loading_border/animated_loading_border.dart';

2. 使用AnimatedLoadingBorder Widget

将 AnimatedLoadingBorder 添加到您的代码中，最简单的形式如下：

AnimatedLoadingBorder(
  child: Container(),
  controller: (animationController) {
    // Here we get animationController     
  },
);

参数说明

必需参数

可选参数

示例代码

下面是一个完整的示例demo，展示了如何在应用中使用 AnimatedLoadingBorder：

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

void main() => runApp(MyApp());

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 4));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedLoadingBorder(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.grey[300],
          ),
          controller: (controller) {
            _controller = controller;
          },
          duration: Duration(seconds: 4),
          cornerRadius: 16.0,
          borderWidth: 2.0,
          borderColor: Colors.blue,
          trailingBorderColor: Colors.grey,
          padding: EdgeInsets.all(16.0),
          startWithRandomPosition: true,
          isTrailingTransparent: false,
        ),
      ),
    );
  }
}

贡献指南

贡献者可以随时为我的仓库做出贡献，我请求贡献者为开发创建一个拉取请求（Pull Request）。

报告问题/功能请求

如果您想报告问题或请求新功能，请尽可能提供以下信息以便我们更好地理解问题的根源：

• 库版本
• 代码片段
• 日志（如果适用）
• 设备规格（如制造商、操作系统版本等）
• 屏幕截图/视频及重现步骤
• 使用的库

LICENSE

animated_loading_border 遵循 MIT许可证。