waveprogressbar_flutter 0.1.2

waveprogressbar #

pub package

双平台通用,可动态调整进度,可自定义大小尺寸等

It is a good widget,can compatible with Android and IOS,Adjustable progress,Customizable color and size

如果使用当中有什么问题,请在github里提出个issues,thankYou

If there is any problem with the use, please submit an issue in github,thankYou

My organization's github:https://github.com/OpenFlutter

Contact Me :OpenFlutter QQ群 892398530 #

Usage #

Add this to your package's pubspec.yaml file:

dependencies:
  waveprogressbar_flutter: "^0.1.2"

Add it to your dart file:

import 'package:waveprogressbar_flutter/waveprogressbar_flutter.dart';

Example #

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

class BezierCurveDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return BezierCurveDemoState();
  }
}

class BezierCurveDemoState extends State<BezierCurveDemo>{

  final TextEditingController _controller = new TextEditingController();
  //默认初始值为0.0
  double waterHeight=0.0;
  WaterController waterController=WaterController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding widgetsBinding=WidgetsBinding.instance;
    widgetsBinding.addPostFrameCallback((callback){
      //这里写你想要显示的百分比
      waterController.changeWaterHeight(0.82);
    });
  }


  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
        title: new Text("贝塞尔曲线测试"),
      ),
      body: new Column(
        children: <Widget>[
          new Row(
            children: <Widget>[
              new Text("高度调整:    ",
                style: new TextStyle(fontSize: 20.0),
              ),
              new Container(
                width: 150.0,
                child: new TextField(
                    controller: _controller,
                    decoration: new InputDecoration(
                      hintText: "请输入高度",
                    )
                ),
              ),
              new RaisedButton(onPressed: (){
                print("waterHeight is ${_controller.toString()}");
                FocusScope.of(context).requestFocus(FocusNode());
                waterController.changeWaterHeight(double.parse(_controller.text));
              },
                child: new Text("确定"),
              ),
            ],
          ),
          new Container(
            margin: EdgeInsets.only(top: 80.0),
            child: new Center(
              child: new WaveProgressBar(
                flowSpeed: 2.0,
                waveDistance:45.0,
                waterColor: Color(0xFF68BEFC),
                //strokeCircleColor: Color(0x50e16009),
                heightController: waterController,
                percentage: waterHeight,
                size: new Size (300,300),
                textStyle: new TextStyle(
                    color:Color(0x15000000),
                    fontSize: 60.0,
                    fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Properties #

propertiestypedescription
sizeSize控件大小 The size of widget
percentagedouble进度百分比 Percentage of progress
waveHeightdouble浪高 The wave height
textStyleTextStyle文字样式 text style
waveDistancedouble1/4波距 ;1/4 Wave distance
flowSpeeddouble波浪滚动的速度 The speed of wave
waterColorColor水的颜色 water color
strokeCircleColorColor圆环的颜色 Stroke Circle Color
circleStrokeWidthdouble圆环的宽度 Circle Stroke Width
heightControllerWaterController进度控制器 progress Controller

[0.1.1] - 2019.01.16

  • initial release.

example/example.dart

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

class BezierCurveDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return BezierCurveDemoState();
  }
}

class BezierCurveDemoState extends State<BezierCurveDemo>{

  final TextEditingController _controller = new TextEditingController();
  //默认初始值为0.0
  double waterHeight=0.0;
  WaterController waterController=WaterController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding widgetsBinding=WidgetsBinding.instance;
    widgetsBinding.addPostFrameCallback((callback){
      //这里写你想要显示的百分比
      waterController.changeWaterHeight(0.82);
    });
  }


  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
        title: new Text("贝塞尔曲线测试"),
      ),
      body: new Column(
        children: <Widget>[
          new Row(
            children: <Widget>[
              new Text("高度调整:    ",
                style: new TextStyle(fontSize: 20.0),
              ),
              new Container(
                width: 150.0,
                child: new TextField(
                    controller: _controller,
                    decoration: new InputDecoration(
                      hintText: "请输入高度",
                    )
                ),
              ),
              new RaisedButton(onPressed: (){
                print("waterHeight is ${_controller.toString()}");
                FocusScope.of(context).requestFocus(FocusNode());
                waterController.changeWaterHeight(double.parse(_controller.text));
              },
                child: new Text("确定"),
              ),
            ],
          ),
          new Container(
            margin: EdgeInsets.only(top: 80.0),
            child: new Center(
              child: new WaveProgressBar(
                flowSpeed: 2.0,
                waveDistance:45.0,
                waterColor: Color(0xFF68BEFC),
                //strokeCircleColor: Color(0x50e16009),
                heightController: waterController,
                percentage: waterHeight,
                size: new Size (300,300),
                textStyle: new TextStyle(
                    color:Color(0x15000000),
                    fontSize: 60.0,
                    fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  waveprogressbar_flutter: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:waveprogressbar_flutter/waveprogressbar_flutter.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
59
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
79
Learn more about scoring.

We analyzed this package on Jul 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/waveprogressbar_flutter.dart.

Run flutter format to format lib/waveprogressbar_flutter.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test

Admin