Flutter自定义导航栏插件wi_custom_bar的使用

关于wi_custom_bar

wi_custom_bar 是一个由wannai团队创建的自定义导航栏小部件，实现了温度计风格的仪表条。

安装

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

dependencies:
  wi_custom_bar: ^0.0.1

然后在你的 Dart 文件中导入该包：

import 'package:wi_custom_bar/wi_custom_bar.dart';

基本用法

TemperatureVerticalBar(10, 5),

TemperatureHorizontalBar(10, 6)

使用场景

它可以用来展示某个任务或成就的完成率。例如，显示一天内完成10个任务中的5个。

如何使用

步骤1: 输入最大刻度值和当前刻度值（必要）

输入的当前刻度值不应超过最大刻度值。

步骤2: 显示当前进度数值（可选）

设置 showCountView 为 true 来显示当前进度数值，默认为 false。

TemperatureVerticalBar(10, 5, showCountView: true),

步骤3: 设置仪表条的颜色渐变（可选）

从底部到顶部、从左到右输入颜色值。默认有预设值。

TemperatureHorizontalBar(10, 6, 
  gradientStartColor: Colors.blueAccent, 
  gradientEndColor: Colors.yellowAccent, 
  showCountView: true,
);

步骤4: 调整仪表条的长度和圆角大小（可选）

可以调整仪表条的高度、宽度和刻度线的数量。

自定义用法

示例代码

以下是从示例文件中提取的代码：

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:wi_custom_bar/wi_custom_bar.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: 'wi_custom_bar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'wi_custom_bar'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int? _currentIndex;
  int? _currentIndex2;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TemperatureVerticalBar(10, _currentIndex ?? 1, showCountView: true),
            TemperatureHorizontalBar(10, _currentIndex2 ?? 1,
              gradientStartColor: Colors.blueAccent,
              gradientEndColor: Colors.yellowAccent,
              showCountView: true,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (mounted) {
            setState(() {
              _currentIndex = Random().nextInt(11);
              _currentIndex2 = Random().nextInt(11);
            });
          }
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}