Flutter进度指示插件progress_indicators的使用

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

Flutter进度指示插件 progress_indicators 的使用

在Flutter开发中,为了提供更好的用户体验,我们经常需要使用各种动画效果的进度指示器。progress_indicators 插件提供了多种酷炫且带有动画效果的进度指示器供开发者使用。

当前可用的进度指示器

示例

以下是这些进度指示器的效果示例:

Sample

使用方法

首先,在项目中导入 progress_indicators 包:

dependencies:
  progress_indicators: ^版本号

然后在代码中导入包:

import 'package:progress_indicators/progress_indicators.dart';

接下来,你可以使用以下提供的小部件:

  • FadingText
  • JumpingText
  • ScalingText
  • JumpingDots
  • HeartbeatProgressIndicator
  • GlowingProgressIndicator
  • CollectionSlideTranstion
  • CollectionScaleTransition

完整示例 Demo

下面是一个完整的示例代码,展示了如何使用这些进度指示器:

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

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Jumping dots'),
            JumpingDotsProgressIndicator(fontSize: 20.0),
            SizedBox(height: 60.0),
            Text('Heartbeat'),
            SizedBox(height: 16.0),
            HeartbeatProgressIndicator(child: Icon(Icons.home)),
            SizedBox(height: 60.0),
            Text('Glowing'),
            GlowingProgressIndicator(child: Icon(Icons.home)),
            SizedBox(height: 32.0),
            FadingText('Loading...'),
            SizedBox(height: 32.0),
            JumpingText('Loading...'),
            SizedBox(height: 32.0),
            ScalingText('Loading...'),
            SizedBox(height: 32.0),
            CollectionSlideTransition(
              children: [
                Icon(Icons.android),
                Icon(Icons.apps),
                Icon(Icons.announcement),
              ],
            ),
            SizedBox(height: 32.0),
            CollectionScaleTransition(
              children: [
                Icon(Icons.android),
                Icon(Icons.apps),
                Icon(Icons.announcement),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何使用不同的进度指示器,包括跳动的文字、心跳动画图标、发光图标以及一些过渡动画效果等。你可以根据实际需求选择合适的进度指示器来增强应用的用户体验。

完整示例可以参考 GitHub上的示例应用


更多关于Flutter进度指示插件progress_indicators的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter进度指示插件progress_indicators的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter中的progress_indicators插件,这里有一个详细的代码案例来展示如何使用它。在Flutter中,progress_indicators主要用于显示加载进度或其他类型的进度信息。Flutter本身已经包含了一些内置的进度指示器,如CircularProgressIndicatorLinearProgressIndicator,它们通常已经能满足大多数需求。不过,这里假设你想要了解如何自定义或使用一些扩展的进度指示器插件(虽然标准的Flutter SDK已经提供了大部分所需的功能)。

以下是一个简单的例子,展示如何在Flutter应用中使用内置的CircularProgressIndicatorLinearProgressIndicator

1. 使用CircularProgressIndicator

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: Scaffold(
        appBar: AppBar(
          title: Text('Circular Progress Indicator Demo'),
        ),
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

2. 使用LinearProgressIndicator

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: Scaffold(
        appBar: AppBar(
          title: Text('Linear Progress Indicator Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Linear Progress Indicator Example'),
              SizedBox(height: 20),
              LinearProgressIndicator(
                value: 0.5, // 当前进度值
                backgroundColor: Colors.grey[200],
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 自定义进度指示器(如果需要更复杂的UI)

如果你需要更复杂的进度指示器,可以通过组合Flutter的基本组件来自定义。例如,以下是一个简单的自定义环形进度条:

import 'package:flutter/material.dart';

class CustomCircularProgressIndicator extends StatelessWidget {
  final double value;
  final Color backgroundColor;
  final Color foregroundColor;

  CustomCircularProgressIndicator({
    Key? key,
    required this.value,
    this.backgroundColor = Colors.grey[200]!,
    this.foregroundColor = Colors.blue,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        // 背景圆环
        Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: backgroundColor,
          ),
        ),
        // 前景圆环(根据value动态绘制)
        CustomPaint(
          size: Size(100, 100),
          painter: CircularProgressPainter(
            value: value,
            foregroundColor: foregroundColor,
          ),
        ),
      ],
    );
  }
}

class CircularProgressPainter extends CustomPainter {
  final double value;
  final Color foregroundColor;

  CircularProgressPainter({required this.value, required this.foregroundColor});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = foregroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 10.0;

    final rect = Rect.fromCircle(center: size.center(Offset.zero), radius: size.width / 2);

    // 绘制圆弧,根据value调整起始和结束角度
    double startAngle = -pi / 2;
    double sweepAngle = 2 * pi * value;
    canvas.drawArc(rect, startAngle, sweepAngle, false, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Circular Progress Indicator Demo'),
        ),
        body: Center(
          child: CustomCircularProgressIndicator(
            value: 0.75, // 当前进度值
          ),
        ),
      ),
    );
  }
}

上述代码展示了如何创建一个自定义的环形进度指示器。这个例子通过组合ContainerStackCustomPaint来绘制一个圆环,并根据进度值动态调整圆弧的绘制范围。

希望这些代码示例能帮助你理解和使用Flutter中的进度指示器!如果你需要更高级的进度指示器插件,通常可以在pub.dev上找到并集成到你的项目中。

回到顶部