Flutter半圆指示器插件semicircle_indicator的使用

Semicircle Indicator

使用semicircle_indicator插件可以轻松创建半圆指示器。

以下是三个示例的效果图：

Features

• 自定义大小、颜色、描边宽度、线条结束样式、底部中心子组件等。

Getting started

在需要绘制半圆形指示器的地方使用类SemicircularIndicator（安装后）。

代码中有详细的注释以帮助您使用它。

示例代码

以下是一个完整的示例demo，展示了如何在Flutter项目中使用semicircle_indicator插件。

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

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

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

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

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(
                height: 100,
                width: double.infinity,
              ),
              // Example 1: Basic usage with orange color
              const SemicircularIndicator(
                color: Colors.orange,
                bottomPadding: 0,
                child: Text(
                  '75%',
                  style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.w600,
                      color: Colors.orange),
                ),
              ),
              const SizedBox(height: 50),
              // Example 2: Square stroke cap with blue accent color
              const SemicircularIndicator(
                strokeCap: StrokeCap.square,
                color: Colors.blueAccent,
                bottomPadding: 0,
                child: Text(
                  '75%',
                  style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.w600,
                      color: Colors.blueAccent),
                ),
              ),
              const SizedBox(height: 50),
              // Example 3: Custom radius, background color, and stroke width
              const SemicircularIndicator(
                radius: 100,
                color: Colors.yellow,
                backgroundColor: Colors.orange,
                strokeWidth: 13,
                bottomPadding: 0,
                child: Text(
                  '75%',
                  style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.w600,
                      color: Colors.orange),
                ),
              ),
              const SizedBox(height: 50),
              Container(
                height: 40,
                width: double.infinity,
                color: Colors.grey,
              ),
              const SemicircularIndicator(
                radius: 100,
                color: Colors.yellow,
                backgroundColor: Colors.orange,
                strokeWidth: 13,
                bottomPadding: 0,
                child: Text(
                  '75%',
                  style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.w600,
                      color: Colors.orange),
                ),
              ),
              Container(
                height: 40,
                width: double.infinity,
                color: Colors.grey,
              ),
              const SemicircularIndicator(
                radius: 100,
                color: Colors.yellow,
                backgroundColor: Colors.orange,
                strokeWidth: 13,
                bottomPadding: 0,
                contain: true,
                child: Text(
                  '75%',
                  style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.w600,
                      color: Colors.orange),
                ),
              ),
              Container(
                height: 40,
                width: double.infinity,
                color: Colors.grey,
              ),
              const SizedBox(height: 400),
            ],
          ),
        ),
      ),
    );
  }
}

使用说明

1. 添加依赖：在您的pubspec.yaml文件中添加semicircle_indicator依赖。

   dependencies:
     flutter:
       sdk: flutter
     semicircle_indicator: ^latest_version
   

2. 导入包：在Dart文件顶部导入semicircle_indicator包。

   import 'package:semicircle_indicator/semicircle_indicator.dart';
   

3. 使用SemicircularIndicator：根据需要自定义属性，如颜色、描边宽度、背景颜色等，并将其嵌入到您的UI布局中。

通过上述步骤，您可以轻松地在Flutter应用中集成和使用semicircle_indicator插件。希望这个示例能帮助您更好地理解和使用该插件。