Flutter底部进度条插件bottom

Flutter底部进度条插件bottom_progress的使用

此包提供了底部进度条的功能。你可以在页面路由、教程路由等场景中使用它。

图片展示

开始使用

① 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  bottom_progress:

② 获取依赖

点击 Pub get 按钮以获取所添加的依赖。

使用示例

以下是一个简单的使用示例，展示了如何将底部进度条添加到 Scaffold 的底部导航栏中：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 应用程序的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      // 使用BottomAppBar作为底部导航栏
      bottomNavigationBar: BottomAppBar(
        elevation: 0,
        // 将底部进度条添加到BottomAppBar中
        child: BottomProgress(
          // 当前进度点的数量
          pointCount: 1,
          // 总进度点的数量
          pageCount: 6,
          // 当前进度的颜色
          onColor: Colors.red,
          // 非当前进度的颜色
          offColor: Colors.grey,
          // 进度条上的字体大小
          fontSize: 40,
        ),
      ),
    );
  }
}

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

itying888 1楼

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

bottom_progress 是一个用于在 Flutter 应用中显示底部进度条的插件。它通常用于显示下载、上传或其他长时间操作的进度。以下是如何在 Flutter 项目中使用 bottom_progress 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 bottom_progress 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  bottom_progress: ^1.0.0  # 请确保使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 bottom_progress 插件：

import 'package:bottom_progress/bottom_progress.dart';

3. 使用 `BottomProgress`

你可以在你的应用中使用 BottomProgress 组件来显示进度条。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bottom Progress Example'),
        ),
        body: Center(
          child: ProgressButton(),
        ),
      ),
    );
  }
}

class ProgressButton extends StatefulWidget {
  [@override](/user/override)
  _ProgressButtonState createState() => _ProgressButtonState();
}

class _ProgressButtonState extends State<ProgressButton> {
  double _progress = 0.0;

  void _startProgress() {
    setState(() {
      _progress = 0.0;
    });

    Future.delayed(Duration(milliseconds: 100), () {
      setState(() {
        _progress = 0.25;
      });
    });

    Future.delayed(Duration(milliseconds: 200), () {
      setState(() {
        _progress = 0.5;
      });
    });

    Future.delayed(Duration(milliseconds: 300), () {
      setState(() {
        _progress = 0.75;
      });
    });

    Future.delayed(Duration(milliseconds: 400), () {
      setState(() {
        _progress = 1.0;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: _startProgress,
          child: Text('Start Progress'),
        ),
        SizedBox(height: 20),
        BottomProgress(
          progress: _progress,
          color: Colors.blue,
          height: 5.0,
        ),
      ],
    );
  }
}

Flutter底部进度条插件bottom_progress的使用