Flutter进度指示器插件native_progress_indicator的使用

Flutter动画可能会阻塞，并对性能产生负面影响。

此库用平台视图实现替换Flutter的CircularProgressIndicator和LinearProgressIndicator。

Demo:

为什么

Flutter动画可能会阻塞，这在某些情况下可能导致性能问题。例如，在从Firestore缓存读取大数据集时。

使用

NativeCircularProgressIndicator() // 代替 CircularProgressIndicator()

// 或者

NativeLinearProgressIndicator() // 代替 LinearProgressIndicator()

在Android上，你可能需要将主题更改为兼容Material3的主题。例如，将styles.xml修改为：

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- ... -->
</style>

你可以在这里找到更多详细信息: Material3主题继承指南

示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double progress = 0.5;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.orange, brightness: Brightness.dark),
      ),
      themeMode: ThemeMode.dark,
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
              title: Text(
            'Native progress indicators',
            style: TextStyle(color: Theme.of(context).primaryColor),
          )),
          body: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: SizedBox(
                width: 400,
                child: Column(
                  spacing: 8,
                  children: [
                    Row(
                      spacing: 8,
                      children: [
                        Expanded(
                          flex: 1,
                          child: Column(
                            spacing: 8,
                            children: [
                              Text('Flutter'),
                              CircularProgressIndicator(),
                              CircularProgressIndicator(
                                value: progress,
                              ),
                              LinearProgressIndicator(),
                              LinearProgressIndicator(
                                value: progress,
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: Column(
                            spacing: 8,
                            children: [
                              Text('Native'),
                              NativeCircularProgressIndicator(),
                              NativeCircularProgressIndicator(
                                value: progress,
                              ),
                              NativeLinearProgressIndicator(),
                              NativeLinearProgressIndicator(
                                value: progress,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Slider(
                      value: progress,
                      onChanged: (newValue) =>
                          setState(() => progress = newValue),
                      min: 0,
                      max: 1,
                    ),
                    Text(progress.toString())
                  ],
                ),
              ),
            ),
          ),
        );
      }),
    );
  }
}

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

h691938207 1楼

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

当然，以下是如何在Flutter应用中使用native_progress_indicator插件的一个简单示例。这个插件允许你创建漂亮的进度指示器，适用于各种加载场景。

首先，确保你已经在pubspec.yaml文件中添加了native_progress_indicator依赖项：

dependencies:
  flutter:
    sdk: flutter
  native_progress_indicator: ^1.0.4  # 请注意版本号，使用最新版本

然后运行flutter pub get来获取依赖项。

接下来，在你的Dart文件中，你可以按照以下方式使用NativeProgressIndicator：

import 'package:flutter/material.dart';
import 'package:native_progress_indicator/native_progress_indicator.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(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Native Progress Indicator Demo'),
      ),
      body: Center(
        child: NativeProgressIndicator(
          value: _animation.value,
          backgroundColor: Colors.grey[200]!,
          progressColor: Colors.blue,
          borderRadius: 5.0,
          indicatorWidth: 20.0,
          indicatorHeight: 20.0,
          isCircular: true,
        ),
      ),
    );
  }
}

在这个示例中：

我们创建了一个_MyHomePageState类，该类持有一个AnimationController来控制进度动画。
AnimationController的持续时间设置为3秒，并且在初始化时开始循环动画。
NativeProgressIndicator组件接收一个value参数，该参数是动画的当前值（在0到1之间）。
你可以自定义NativeProgressIndicator的多个属性，如backgroundColor、progressColor、borderRadius、indicatorWidth和indicatorHeight。
isCircular属性设置为true，表示这是一个圆形进度指示器。你也可以将其设置为false以使用线性进度指示器。

这个示例展示了如何动态地更新进度指示器，并允许你根据需要进一步自定义它的外观和行为。