├── .gitignore ├── .metadata ├── CHANGELOG.md ├── LICENSE ├── README.md ├── analysis_options.yaml ├── android ├── .gitignore ├── build.gradle ├── settings.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── kotlin │ └── com │ └── example │ └── simple_aniatiom_progress_bar │ └── simple_animation_progress_bar │ └── SimpleAnimationProgressBarPlugin.kt ├── example ├── .gitignore ├── README.md ├── analysis_options.yaml ├── lib │ └── main.dart └── pubspec.yaml ├── ios ├── .gitignore ├── Assets │ └── .gitkeep ├── Classes │ └── SimpleAnimationProgressBarPlugin.swift └── simple_animation_progress_bar.podspec ├── lib ├── simple_animation_progress_bar.dart ├── simple_animation_progress_bar_method_channel.dart ├── simple_animation_progress_bar_platform_interface.dart └── src │ └── simple_animation_container.dart └── pubspec.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | migrate_working_dir/ 12 | 13 | # IntelliJ related 14 | *.iml 15 | *.ipr 16 | *.iws 17 | .idea/ 18 | 19 | # The .vscode folder contains launch configuration and tasks you configure in 20 | # VS Code which you may wish to be included in version control, so this line 21 | # is commented out by default. 22 | #.vscode/ 23 | 24 | # Flutter/Dart/Pub related 25 | **/ios/Runner/GoogleService-Info.plist 26 | **/android/app/google-service.json 27 | **/doc/api/ 28 | **/ios/Flutter/.last_build_id 29 | .dart_tool/ 30 | .vscode/ 31 | .flutter-plugins 32 | .flutter-plugins-dependencies 33 | .packages 34 | .pubspec.lock 35 | .pub-cache/ 36 | .pub/ 37 | /build/ 38 | pubspec.lock 39 | 40 | # Symbolication related 41 | app.*.symbols 42 | 43 | # Obfuscation related 44 | app.*.map.json 45 | 46 | # Android Studio will place build artifacts here 47 | /android/app/debug 48 | /android/app/profile 49 | /android/app/release 50 | 51 | # Flutter platforms 52 | /macos/ 53 | /windows/ 54 | /web/ 55 | /linux/ 56 | 57 | # Android Gradle related 58 | /android/.gradle/ 59 | /android/app/.cxx/ 60 | /android/local.properties 61 | 62 | # iOS CocoaPods related 63 | /ios/Pods/ 64 | /ios/.symlinks/ 65 | /ios/.flutter-plugins/ 66 | /ios/.flutter-plugins-dependencies/ 67 | /ios/Podfile.lock -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled. 5 | 6 | version: 7 | revision: 4b12645012342076800eb701bcdfe18f87da21cf 8 | channel: stable 9 | 10 | project_type: plugin 11 | 12 | # Tracks metadata for the flutter migrate command 13 | migration: 14 | platforms: 15 | - platform: root 16 | create_revision: 4b12645012342076800eb701bcdfe18f87da21cf 17 | base_revision: 4b12645012342076800eb701bcdfe18f87da21cf 18 | - platform: android 19 | create_revision: 4b12645012342076800eb701bcdfe18f87da21cf 20 | base_revision: 4b12645012342076800eb701bcdfe18f87da21cf 21 | - platform: ios 22 | create_revision: 4b12645012342076800eb701bcdfe18f87da21cf 23 | base_revision: 4b12645012342076800eb701bcdfe18f87da21cf 24 | - platform: linux 25 | create_revision: 4b12645012342076800eb701bcdfe18f87da21cf 26 | base_revision: 4b12645012342076800eb701bcdfe18f87da21cf 27 | - platform: macos 28 | create_revision: 4b12645012342076800eb701bcdfe18f87da21cf 29 | base_revision: 4b12645012342076800eb701bcdfe18f87da21cf 30 | - platform: windows 31 | create_revision: 4b12645012342076800eb701bcdfe18f87da21cf 32 | base_revision: 4b12645012342076800eb701bcdfe18f87da21cf 33 | 34 | # User provided section 35 | 36 | # List of Local paths (relative to this file) that should be 37 | # ignored by the migrate tool. 38 | # 39 | # Files that are not part of the templates will be ignored by default. 40 | unmanaged_files: 41 | - 'lib/main.dart' 42 | - 'ios/Runner.xcodeproj/project.pbxproj' 43 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 1.9.2 2 | - Changed foreground variable name. 3 | 4 | # 1.9.1 5 | - Updated Changelog and Readme. 6 | 7 | # 1.9.0 8 | - Added ClipRRect to improve border radius rendering. 9 | - Added separate shadow options for background and progress bar. 10 | - Deprecated boxShadow in favor of progressBarShadow and backgroundShadow. 11 | 12 | # 1.8.1 13 | - Fixed ```doesn't have a main class``` error. 14 | 15 | # 1.8.0 16 | - Fixed ```:simple_animation_progress_bar:processDebugManifest``` error. 17 | - Fixed sdk errors. 18 | 19 | # 1.7.0 20 | - Fixed ```Namespace not specified``` error. 21 | - Fixed sdk errors. 22 | 23 | # 1.6.0 24 | - Fixed bugs on different platforms. 25 | 26 | # 1.5.0 27 | - Some bugs fixed. 28 | 29 | # 1.4.0 30 | - Fixed Support Platforms. 31 | - Fixed settings.gradle error. 32 | 33 | # 1.3.0 34 | - Fixed code errors and some optimization issues. 35 | - Fixed Starting Timer. 36 | - Added Shadow Box. 37 | 38 | # 1.2.0 39 | - Fixed code errors and some optimization issues. 40 | 41 | # 1.1.0 42 | - Some bugs fixed. 43 | 44 | # 1.0.0 45 | - Initial release. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 2-Clause License 2 | 3 | Copyright (c) 2023, Turkey,Kocaeli 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | 1. Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | 2. Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # simple_animation_progress_bar 2 | 3 | This Flutter widget pack aims to show a reactive style animation progress bar. It also supports both vertical and horizontal bar. 4 | 5 | 6 | 7 | ## Features 8 | 9 | - Fixed ```Namespace not specified``` error. 10 | - Linear progress bar 11 | - Gradient Color 12 | - Set ratio value 13 | - Set border value 14 | - Set border radius value 15 | - Set background color 16 | - Set foreground color 17 | - Set animation type 18 | - Set delay value 19 | - Set direction 20 | - Set reverse bar 21 | - Set separate shadows for background and progress bar 22 | - Improved border radius rendering with ClipRRect 23 | 24 | ## Getting started 25 | 26 | You should ensure that you add the router as a dependency in your flutter project. 27 | ```yaml 28 | dependencies: 29 | simple_animation_progress_bar: ^1.9.2 30 | ``` 31 | 32 | You should then run `flutter packages upgrade` or update your packages in IntelliJ. 33 | 34 | ## Example Project 35 | 36 | There is a example project in the `example` folder. Check it out. Otherwise, keep reading to get up and running. 37 | 38 | ## Usage 39 | 40 | Need to include the import the package to the dart file where it will be used, use the below command, 41 | 42 | ```dart 43 | import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart'; 44 | ``` 45 | 46 | Basic Widget usage with Linear Progress Bar 47 | ```dart 48 | SimpleAnimationProgressBar( 49 | height: 30, 50 | width: 300, 51 | backgroundColor: Colors.grey.shade800, 52 | foregroundColor: Colors.purple, 53 | ratio: 0.5, 54 | direction: Axis.horizontal, 55 | curve: Curves.fastLinearToSlowEaseIn, 56 | duration: const Duration(seconds: 3), 57 | borderRadius: BorderRadius.circular(10), 58 | progressBarShadow: [ 59 | BoxShadow( 60 | color: Colors.pink, 61 | offset: const Offset( 62 | 5.0, 63 | 5.0, 64 | ), 65 | blurRadius: 10.0, 66 | spreadRadius: 2.0, 67 | ), 68 | ], 69 | ) 70 | ``` 71 | 72 | 73 | Gradient Widget usage with Linear Progress Bar 74 | ```dart 75 | SimpleAnimationProgressBar( 76 | height: 30, 77 | width: 300, 78 | backgroundColor: Colors.grey.shade800, 79 | foregroundColor: Colors.purple, 80 | ratio: 0.5, 81 | direction: Axis.horizontal, 82 | curve: Curves.fastLinearToSlowEaseIn, 83 | duration: const Duration(seconds: 3), 84 | borderRadius: BorderRadius.circular(10), 85 | gradientColor: const LinearGradient( 86 | colors: [Colors.pink, Colors.purple]), 87 | progressBarShadow: [ 88 | BoxShadow( 89 | color: Colors.pink, 90 | offset: const Offset( 91 | 5.0, 92 | 5.0, 93 | ), 94 | blurRadius: 10.0, 95 | spreadRadius: 2.0, 96 | ), 97 | ], 98 | backgroundShadow: [ 99 | BoxShadow( 100 | color: Colors.black45, 101 | offset: const Offset( 102 | 2.0, 103 | 2.0, 104 | ), 105 | blurRadius: 5.0, 106 | spreadRadius: 1.0, 107 | ), 108 | ], 109 | ) 110 | ``` 111 | -------------------------------------------------------------------------------- /analysis_options.yaml: -------------------------------------------------------------------------------- 1 | include: package:flutter_lints/flutter.yaml 2 | 3 | # Additional information about this file can be found at 4 | # https://dart.dev/guides/language/analysis-options 5 | -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/workspace.xml 5 | /.idea/libraries 6 | .DS_Store 7 | /build 8 | /captures 9 | .cxx 10 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | group 'com.example.simple_aniatiom_progress_bar.simple_animation_progress_bar' 2 | version '1.0-SNAPSHOT' 3 | 4 | buildscript { 5 | ext.kotlin_version = '1.7.10' 6 | repositories { 7 | google() 8 | mavenCentral() 9 | } 10 | 11 | dependencies { 12 | classpath 'com.android.tools.build:gradle:7.2.0' 13 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 14 | } 15 | } 16 | 17 | allprojects { 18 | repositories { 19 | google() 20 | mavenCentral() 21 | } 22 | } 23 | 24 | apply plugin: 'com.android.library' 25 | apply plugin: 'kotlin-android' 26 | 27 | android { 28 | namespace 'com.example.simple_aniatiom_progress_bar.simple_animation_progress_bar' 29 | compileSdkVersion 31 30 | 31 | compileOptions { 32 | sourceCompatibility JavaVersion.VERSION_1_8 33 | targetCompatibility JavaVersion.VERSION_1_8 34 | } 35 | 36 | kotlinOptions { 37 | jvmTarget = '1.8' 38 | } 39 | 40 | sourceSets { 41 | main.java.srcDirs += 'src/main/kotlin' 42 | } 43 | 44 | defaultConfig { 45 | minSdkVersion 16 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'simple_animation_progress_bar' 2 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/kotlin/com/example/simple_aniatiom_progress_bar/simple_animation_progress_bar/SimpleAnimationProgressBarPlugin.kt: -------------------------------------------------------------------------------- 1 | package com.example.simple_aniatiom_progress_bar.simple_animation_progress_bar 2 | 3 | import androidx.annotation.NonNull 4 | 5 | import io.flutter.embedding.engine.plugins.FlutterPlugin 6 | import io.flutter.plugin.common.MethodCall 7 | import io.flutter.plugin.common.MethodChannel 8 | import io.flutter.plugin.common.MethodChannel.MethodCallHandler 9 | import io.flutter.plugin.common.MethodChannel.Result 10 | 11 | /** SimpleAnimationProgressBarPlugin */ 12 | class SimpleAnimationProgressBarPlugin: FlutterPlugin, MethodCallHandler { 13 | /// The MethodChannel that will the communication between Flutter and native Android 14 | /// 15 | /// This local reference serves to register the plugin with the Flutter Engine and unregister it 16 | /// when the Flutter Engine is detached from the Activity 17 | private lateinit var channel : MethodChannel 18 | 19 | override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) { 20 | channel = MethodChannel(flutterPluginBinding.binaryMessenger, "simple_animation_progress_bar") 21 | channel.setMethodCallHandler(this) 22 | } 23 | 24 | override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) { 25 | if (call.method == "getPlatformVersion") { 26 | result.success("Android ${android.os.Build.VERSION.RELEASE}") 27 | } else { 28 | result.notImplemented() 29 | } 30 | } 31 | 32 | override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) { 33 | channel.setMethodCallHandler(null) 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .build/ 9 | .buildlog/ 10 | .history 11 | .svn/ 12 | .swiftpm/ 13 | migrate_working_dir/ 14 | 15 | # IntelliJ related 16 | *.iml 17 | *.ipr 18 | *.iws 19 | .idea/ 20 | 21 | # The .vscode folder contains launch configuration and tasks you configure in 22 | # VS Code which you may wish to be included in version control, so this line 23 | # is commented out by default. 24 | #.vscode/ 25 | 26 | # Flutter/Dart/Pub related 27 | **/ios/Runner/GoogleService-Info.plist 28 | **/android/app/google-service.json 29 | **/doc/api/ 30 | **/ios/Flutter/.last_build_id 31 | .dart_tool/ 32 | .vscode/ 33 | .flutter-plugins 34 | .flutter-plugins-dependencies 35 | .packages 36 | .pub-cache/ 37 | .metadata 38 | .pub/ 39 | /build/ 40 | pubspec.lock 41 | 42 | # Symbolication related 43 | app.*.symbols 44 | 45 | # Obfuscation related 46 | app.*.map.json 47 | 48 | # Android Studio will place build artifacts here 49 | /android/app/debug 50 | /android/app/profile 51 | /android/app/release 52 | 53 | # Flutter example folder platforms 54 | /android/ 55 | /ios/ 56 | /macos/ 57 | /windows/ 58 | /web/ 59 | /linux/ 60 | /build/ 61 | /test/ -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # simple_animation_progress_bar 2 | 3 | This Flutter widget pack aims to show a reactive style animation progress bar. It also supports both vertical and horizontal bar. 4 | 5 | 6 | 7 | ## Features 8 | 9 | - Fixed ```Namespace not specified``` error. 10 | - Linear progress bar 11 | - Gradient Color 12 | - Set ratio value 13 | - Set border value 14 | - Set border radius value 15 | - Set background color 16 | - Set foreground color 17 | - Set animation type 18 | - Set delay value 19 | - Set direction 20 | - Set reverse bar 21 | - Set box shadow 22 | 23 | ## Getting started 24 | 25 | You should ensure that you add the router as a dependency in your flutter project. 26 | ```yaml 27 | dependencies: 28 | simple_animation_progress_bar: "^1.8.1" 29 | ``` 30 | y 31 | You should then run `flutter packages upgrade` or update your packages in IntelliJ. 32 | 33 | ## Example Project 34 | 35 | There is a example project in the `example` folder. Check it out. Otherwise, keep reading to get up and running. 36 | 37 | ## Usage 38 | 39 | Need to include the import the package to the dart file where it will be used, use the below command, 40 | 41 | ```dart 42 | import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart'; 43 | ``` 44 | 45 | Basic Widget usage with Linear Progress Bar 46 | ```dart 47 | SimpleAnimationProgressBar( 48 | height: 30, 49 | width: 300, 50 | backgroundColor: Colors.grey.shade800, 51 | foregroundColor: Colors.purple, 52 | ratio: 0.5, 53 | direction: Axis.horizontal, 54 | curve: Curves.fastLinearToSlowEaseIn, 55 | duration: const Duration(seconds: 3), 56 | borderRadius: BorderRadius.circular(10), 57 | boxShadow: [ 58 | BoxShadow( 59 | color: Colors.pink, 60 | offset: const Offset( 61 | 5.0, 62 | 5.0, 63 | ), 64 | blurRadius: 10.0, 65 | spreadRadius: 2.0, 66 | ), 67 | ], 68 | ) 69 | ``` 70 | 71 | 72 | Gradient Widget usage with Linear Progress Bar 73 | ```dart 74 | SimpleAnimationProgressBar( 75 | height: 30, 76 | width: 300, 77 | backgroundColor: Colors.grey.shade800, 78 | foregroundColor: Colors.purple, 79 | ratio: 0.5, 80 | direction: Axis.horizontal, 81 | curve: Curves.fastLinearToSlowEaseIn, 82 | duration: const Duration(seconds: 3), 83 | borderRadius: BorderRadius.circular(10), 84 | gradientColor: const LinearGradient( 85 | colors: [Colors.pink, Colors.purple]), 86 | boxShadow: [ 87 | BoxShadow( 88 | color: Colors.pink, 89 | offset: const Offset( 90 | 5.0, 91 | 5.0, 92 | ), 93 | blurRadius: 10.0, 94 | spreadRadius: 2.0, 95 | ), 96 | ], 97 | ) 98 | ``` 99 | -------------------------------------------------------------------------------- /example/analysis_options.yaml: -------------------------------------------------------------------------------- 1 | # This file configures the analyzer, which statically analyzes Dart code to 2 | # check for errors, warnings, and lints. 3 | # 4 | # The issues identified by the analyzer are surfaced in the UI of Dart-enabled 5 | # IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be 6 | # invoked from the command line by running `flutter analyze`. 7 | 8 | # The following line activates a set of recommended lints for Flutter apps, 9 | # packages, and plugins designed to encourage good coding practices. 10 | include: package:flutter_lints/flutter.yaml 11 | 12 | linter: 13 | # The lint rules applied to this project can be customized in the 14 | # section below to disable rules from the `package:flutter_lints/flutter.yaml` 15 | # included above or to enable additional rules. A list of all available lints 16 | # and their documentation is published at 17 | # https://dart-lang.github.io/linter/lints/index.html. 18 | # 19 | # Instead of disabling a lint rule for the entire project in the 20 | # section below, it can also be suppressed for a single line of code 21 | # or a specific dart file by using the `// ignore: name_of_lint` and 22 | # `// ignore_for_file: name_of_lint` syntax on the line or in the file 23 | # producing the lint. 24 | rules: 25 | # avoid_print: false # Uncomment to disable the `avoid_print` rule 26 | # prefer_single_quotes: true # Uncomment to enable the `prefer_single_quotes` rule 27 | 28 | # Additional information about this file can be found at 29 | # https://dart.dev/guides/language/analysis-options 30 | -------------------------------------------------------------------------------- /example/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart'; 5 | 6 | void main() { 7 | runApp(const MyApp()); 8 | } 9 | 10 | class MyApp extends StatelessWidget { 11 | const MyApp({super.key}); 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return MaterialApp( 16 | title: 'Flutter Demo', 17 | theme: ThemeData( 18 | primarySwatch: Colors.blue, 19 | ), 20 | home: const SimpleAnimationProgressBarTestPage(), 21 | ); 22 | } 23 | } 24 | 25 | class SimpleAnimationProgressBarTestPage extends StatefulWidget { 26 | const SimpleAnimationProgressBarTestPage({super.key}); 27 | 28 | @override 29 | State createState() => 30 | _SimpleAnimationProgressBarTestPageState(); 31 | } 32 | 33 | class _SimpleAnimationProgressBarTestPageState 34 | extends State { 35 | double ratio = 0; 36 | void ratioVal() { 37 | if (ratio == 0) { 38 | Future.delayed(const Duration(seconds: 2), () { 39 | setState(() { 40 | ratio = 0.2; 41 | }); 42 | if (ratio == 0.2) { 43 | Future.delayed(const Duration(seconds: 1), () { 44 | setState(() { 45 | ratio = 0.4; 46 | }); 47 | if (ratio == 0.4) { 48 | Future.delayed(const Duration(seconds: 1), () { 49 | setState(() { 50 | ratio = 0.7; 51 | }); 52 | if (ratio == 0.7) { 53 | Future.delayed(const Duration(seconds: 1), () { 54 | setState(() { 55 | ratio = 1; 56 | }); 57 | if (ratio == 1) { 58 | Future.delayed(const Duration(seconds: 1), () { 59 | setState(() { 60 | ratio = 0; 61 | }); 62 | }); 63 | } 64 | }); 65 | } 66 | }); 67 | } 68 | }); 69 | } 70 | }); 71 | } 72 | } 73 | 74 | @override 75 | Widget build(BuildContext context) { 76 | ratioVal(); 77 | return Scaffold( 78 | backgroundColor: Colors.grey.shade900, 79 | body: Center( 80 | child: Row( 81 | mainAxisAlignment: MainAxisAlignment.center, 82 | children: [ 83 | Column( 84 | mainAxisAlignment: MainAxisAlignment.center, 85 | children: [ 86 | Padding( 87 | padding: const EdgeInsets.all(8.0), 88 | child: SimpleAnimationProgressBar( 89 | height: 30, 90 | width: 300, 91 | backgroundColor: Colors.grey.shade800, 92 | foregroundColor: Colors.purple, 93 | ratio: ratio, 94 | direction: Axis.horizontal, 95 | curve: Curves.fastLinearToSlowEaseIn, 96 | duration: const Duration(seconds: 3), 97 | borderRadius: BorderRadius.circular(10), 98 | gradientColor: const LinearGradient( 99 | colors: [Colors.pink, Colors.purple]), 100 | progressBarShadow: const [ 101 | BoxShadow( 102 | color: Colors.pink, 103 | offset: Offset( 104 | 5.0, 105 | 5.0, 106 | ), 107 | blurRadius: 10.0, 108 | spreadRadius: 2.0, 109 | ), 110 | ], 111 | backgroundShadow: [ 112 | BoxShadow( 113 | color: Colors.blue.withValues(alpha: 0.3), 114 | blurRadius: 5, 115 | spreadRadius: 0.4, 116 | ), 117 | ]), 118 | ), 119 | Padding( 120 | padding: const EdgeInsets.all(8.0), 121 | child: SimpleAnimationProgressBar( 122 | height: 30, 123 | width: 300, 124 | backgroundColor: Colors.grey.shade800, 125 | foregroundColor: Colors.blue, 126 | ratio: ratio, 127 | direction: Axis.horizontal, 128 | curve: Curves.fastLinearToSlowEaseIn, 129 | duration: const Duration(seconds: 3), 130 | borderRadius: BorderRadius.circular(10), 131 | progressBarShadow: const [ 132 | BoxShadow( 133 | color: Colors.pink, 134 | offset: Offset( 135 | 5.0, 136 | 5.0, 137 | ), 138 | blurRadius: 10.0, 139 | spreadRadius: 2.0, 140 | ), 141 | ], 142 | ), 143 | ), 144 | Padding( 145 | padding: const EdgeInsets.all(8.0), 146 | child: SimpleAnimationProgressBar( 147 | height: 30, 148 | width: 300, 149 | backgroundColor: Colors.grey.shade800, 150 | foregroundColor: Colors.blue, 151 | ratio: ratio, 152 | direction: Axis.horizontal, 153 | curve: Curves.fastLinearToSlowEaseIn, 154 | duration: const Duration(seconds: 3), 155 | borderRadius: BorderRadius.circular(10), 156 | reverseAlignment: true, 157 | progressBarShadow: const [ 158 | BoxShadow( 159 | color: Colors.pink, 160 | offset: Offset( 161 | 5.0, 162 | 5.0, 163 | ), 164 | blurRadius: 10.0, 165 | spreadRadius: 2.0, 166 | ), 167 | ], 168 | ), 169 | ), 170 | ], 171 | ), 172 | SimpleAnimationProgressBar( 173 | height: 130, 174 | width: 30, 175 | backgroundColor: Colors.grey.shade800, 176 | foregroundColor: Colors.purple, 177 | ratio: ratio, 178 | direction: Axis.vertical, 179 | curve: Curves.fastLinearToSlowEaseIn, 180 | duration: const Duration(seconds: 3), 181 | borderRadius: BorderRadius.circular(10), 182 | gradientColor: const LinearGradient( 183 | colors: [Colors.pink, Colors.purple], 184 | begin: Alignment.bottomCenter, 185 | end: Alignment.topCenter), 186 | ), 187 | Padding( 188 | padding: const EdgeInsets.only(left: 2), 189 | child: SimpleAnimationProgressBar( 190 | height: 130, 191 | width: 30, 192 | backgroundColor: Colors.grey.shade800, 193 | foregroundColor: Colors.purple, 194 | ratio: ratio, 195 | direction: Axis.vertical, 196 | curve: Curves.fastLinearToSlowEaseIn, 197 | duration: const Duration(seconds: 3), 198 | borderRadius: BorderRadius.circular(10), 199 | gradientColor: const LinearGradient( 200 | colors: [Colors.pink, Colors.purple], 201 | begin: Alignment.bottomCenter, 202 | end: Alignment.topCenter), 203 | reverseAlignment: true, 204 | ), 205 | ), 206 | ], 207 | ), 208 | ), 209 | ); 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: simple_animation_progress_bar_example 2 | description: Demonstrates how to use the simple_animation_progress_bar plugin. 3 | # The following line prevents the package from being accidentally published to 4 | # pub.dev using `flutter pub publish`. This is preferred for private packages. 5 | publish_to: 'none' # Remove this line if you wish to publish to pub.dev 6 | 7 | environment: 8 | sdk: '>=2.19.6 <3.0.0' 9 | 10 | # Dependencies specify other packages that your package needs in order to work. 11 | # To automatically upgrade your package dependencies to the latest versions 12 | # consider running `flutter pub upgrade --major-versions`. Alternatively, 13 | # dependencies can be manually updated by changing the version numbers below to 14 | # the latest version available on pub.dev. To see which dependencies have newer 15 | # versions available, run `flutter pub outdated`. 16 | dependencies: 17 | flutter: 18 | sdk: flutter 19 | 20 | simple_animation_progress_bar: 21 | # When depending on this package from a real application you should use: 22 | # simple_animation_progress_bar: ^x.y.z 23 | # See https://dart.dev/tools/pub/dependencies#version-constraints 24 | # The example app is bundled with the plugin so we use a path dependency on 25 | # the parent directory to use the current plugin's version. 26 | path: ../ 27 | 28 | # The following adds the Cupertino Icons font to your application. 29 | # Use with the CupertinoIcons class for iOS style icons. 30 | cupertino_icons: ^1.0.2 31 | 32 | dev_dependencies: 33 | flutter_test: 34 | sdk: flutter 35 | 36 | # The "flutter_lints" package below contains a set of recommended lints to 37 | # encourage good coding practices. The lint set provided by the package is 38 | # activated in the `analysis_options.yaml` file located at the root of your 39 | # package. See that file for information about deactivating specific lint 40 | # rules and activating additional ones. 41 | flutter_lints: ^2.0.0 42 | 43 | # For information on the generic Dart part of this file, see the 44 | # following page: https://dart.dev/tools/pub/pubspec 45 | 46 | # The following section is specific to Flutter packages. 47 | flutter: 48 | 49 | # The following line ensures that the Material Icons font is 50 | # included with your application, so that you can use the icons in 51 | # the material Icons class. 52 | uses-material-design: true 53 | 54 | # To add assets to your application, add an assets section, like this: 55 | # assets: 56 | # - images/a_dot_burr.jpeg 57 | # - images/a_dot_ham.jpeg 58 | 59 | # An image asset can refer to one or more resolution-specific "variants", see 60 | # https://flutter.dev/assets-and-images/#resolution-aware 61 | 62 | # For details regarding adding assets from package dependencies, see 63 | # https://flutter.dev/assets-and-images/#from-packages 64 | 65 | # To add custom fonts to your application, add a fonts section here, 66 | # in this "flutter" section. Each entry in this list should have a 67 | # "family" key with the font family name, and a "fonts" key with a 68 | # list giving the asset and other descriptors for the font. For 69 | # example: 70 | # fonts: 71 | # - family: Schyler 72 | # fonts: 73 | # - asset: fonts/Schyler-Regular.ttf 74 | # - asset: fonts/Schyler-Italic.ttf 75 | # style: italic 76 | # - family: Trajan Pro 77 | # fonts: 78 | # - asset: fonts/TrajanPro.ttf 79 | # - asset: fonts/TrajanPro_Bold.ttf 80 | # weight: 700 81 | # 82 | # For details regarding fonts from package dependencies, 83 | # see https://flutter.dev/custom-fonts/#from-packages 84 | -------------------------------------------------------------------------------- /ios/.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vagrant/ 3 | .sconsign.dblite 4 | .svn/ 5 | 6 | .DS_Store 7 | *.swp 8 | profile 9 | 10 | DerivedData/ 11 | build/ 12 | GeneratedPluginRegistrant.h 13 | GeneratedPluginRegistrant.m 14 | 15 | .generated/ 16 | 17 | *.pbxuser 18 | *.mode1v3 19 | *.mode2v3 20 | *.perspectivev3 21 | 22 | !default.pbxuser 23 | !default.mode1v3 24 | !default.mode2v3 25 | !default.perspectivev3 26 | 27 | xcuserdata 28 | 29 | *.moved-aside 30 | 31 | *.pyc 32 | *sync/ 33 | Icon? 34 | .tags* 35 | 36 | /Flutter/Generated.xcconfig 37 | /Flutter/ephemeral/ 38 | /Flutter/flutter_export_environment.sh -------------------------------------------------------------------------------- /ios/Assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CanArslanDev/simple_animation_progress_bar/0c7507b232402c9b35e93af9bc7855457ad0d429/ios/Assets/.gitkeep -------------------------------------------------------------------------------- /ios/Classes/SimpleAnimationProgressBarPlugin.swift: -------------------------------------------------------------------------------- 1 | import Flutter 2 | import UIKit 3 | 4 | public class SimpleAnimationProgressBarPlugin: NSObject, FlutterPlugin { 5 | public static func register(with registrar: FlutterPluginRegistrar) { 6 | let channel = FlutterMethodChannel(name: "simple_animation_progress_bar", binaryMessenger: registrar.messenger()) 7 | let instance = SimpleAnimationProgressBarPlugin() 8 | registrar.addMethodCallDelegate(instance, channel: channel) 9 | } 10 | 11 | public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) { 12 | result("iOS " + UIDevice.current.systemVersion) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /ios/simple_animation_progress_bar.podspec: -------------------------------------------------------------------------------- 1 | # 2 | # To learn more about a Podspec see http://guides.cocoapods.org/syntax/podspec.html. 3 | # Run `pod lib lint simple_animation_progress_bar.podspec` to validate before publishing. 4 | # 5 | Pod::Spec.new do |s| 6 | s.name = 'simple_animation_progress_bar' 7 | s.version = '0.0.1' 8 | s.summary = 'A new Flutter plugin project.' 9 | s.description = <<-DESC 10 | A new Flutter plugin project. 11 | DESC 12 | s.homepage = 'http://example.com' 13 | s.license = { :file => '../LICENSE' } 14 | s.author = { 'Your Company' => 'email@example.com' } 15 | s.source = { :path => '.' } 16 | s.source_files = 'Classes/**/*' 17 | s.dependency 'Flutter' 18 | s.platform = :ios, '9.0' 19 | 20 | # Flutter.framework does not contain a i386 slice. 21 | s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES', 'EXCLUDED_ARCHS[sdk=iphonesimulator*]' => 'i386' } 22 | s.swift_version = '5.0' 23 | end 24 | -------------------------------------------------------------------------------- /lib/simple_animation_progress_bar.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | 3 | import 'package:flutter/cupertino.dart'; 4 | 5 | import '../simple_animation_progress_bar_platform_interface.dart'; 6 | 7 | class SimpleAnimationProgressBar extends StatefulWidget { 8 | Future getPlatformVersion() { 9 | return SimpleAnimationProgressBarPlatform.instance.getPlatformVersion(); 10 | } 11 | 12 | const SimpleAnimationProgressBar( 13 | {super.key, 14 | required this.ratio, 15 | required this.width, 16 | required this.height, 17 | required this.direction, 18 | this.borderRadius, 19 | this.border, 20 | required this.backgroundColor, 21 | required this.foregroundColor, 22 | required this.duration, 23 | required this.curve, 24 | this.reverseAlignment, 25 | this.waitDelay, 26 | this.gradientColor, 27 | this.boxShadow, 28 | this.progressBarShadow, 29 | this.backgroundShadow}); 30 | final double ratio; //Sets the progress bar value 31 | final double width; //Sets progress bar width 32 | final double height; //Sets progress bar height 33 | final Axis 34 | direction; //Allows to set the progress bar direction horizontally and vertically 35 | final BorderRadius? borderRadius; //Gives border radius for progress bar 36 | final Border? border; //Gives border radius for progress bar 37 | final Color backgroundColor; //Sets the background of the progress bar 38 | final Color foregroundColor; //Sets the foreground of the progress bar 39 | final Duration duration; //Sets the animation speed in the progress bar 40 | final Curve curve; //Sets the animation type 41 | final bool? 42 | reverseAlignment; //Reverses the bar alignment, such as left-to-right or right-to-left 43 | final Duration? waitDelay; //Sets you to delay the start of animation 44 | final Gradient? gradientColor; //Sets gardient color in progress bar 45 | @Deprecated( 46 | "boxShadow will be removed soon, please use progressBarShadow or backgroundShadow instead") 47 | final List? boxShadow; //Sets shadow in progress bar 48 | final List? progressBarShadow; //Sets shadow in progress bar 49 | final List? backgroundShadow; //Sets shadow in progress bar 50 | @override 51 | State createState() => 52 | _SimpleAnimationProgressBarState(); 53 | } 54 | 55 | class _SimpleAnimationProgressBarState 56 | extends State { 57 | ValueNotifier ratio = ValueNotifier( 58 | 0); //Since the ratio value can change again with the new value, it is defined as ValueNotifier. 59 | @override 60 | void initState() { 61 | super.initState(); 62 | if (ratio.value == 0) { 63 | /* 64 | Here, the animation is started by assigning a value to the ratio 65 | double variable at the beginning of the progress bar. 66 | */ 67 | (widget.waitDelay != null) 68 | ? widget.waitDelay! 69 | : Timer( 70 | const Duration(), 71 | () { 72 | /* 73 | Duration() command is used to transfer the value later and 74 | display it as animated by the animated container. 75 | */ 76 | ratio.value = widget.ratio; 77 | }, 78 | ); 79 | } 80 | } 81 | 82 | @override 83 | Widget build(BuildContext context) { 84 | if (ratio.value != widget.ratio) { 85 | /* 86 | Here, a condition is created for the values ​​that may come after the ratio value is defined. 87 | This condition sets the new incoming value equal to the ratio value. 88 | */ 89 | Future.delayed( 90 | (widget.waitDelay != null) ? widget.waitDelay! : const Duration(), 91 | () { 92 | /* 93 | Duration() command is used to transfer the value later and 94 | display it as animated by the animated container. 95 | */ 96 | ratio.value = widget.ratio; 97 | }); 98 | } 99 | return ValueListenableBuilder( 100 | //With ValueListener, the changed value is controlled and the new value is transferred to the widgets again. 101 | valueListenable: ratio, 102 | builder: (BuildContext context, double ratioValue, Widget? child) { 103 | return Container( 104 | decoration: BoxDecoration( 105 | boxShadow: (widget.backgroundShadow != null) 106 | ? widget.backgroundShadow 107 | : null, 108 | ), 109 | child: ClipRRect( 110 | borderRadius: widget.borderRadius ?? BorderRadius.circular(0), 111 | child: Container( 112 | //The container here creates the background of the progress bar, then returns the widget to be created with the direction variable. 113 | height: widget.height, 114 | width: widget.width, 115 | decoration: BoxDecoration( 116 | color: widget.backgroundColor, 117 | border: widget.border, 118 | borderRadius: widget.borderRadius, 119 | ), 120 | child: (widget.direction == Axis.horizontal) 121 | ? _HorizontalBar( 122 | widget: widget, 123 | ratio: ratio.value, 124 | ) 125 | : _VerticalBar( 126 | widget: widget, 127 | ratio: ratio.value, 128 | )), 129 | ), 130 | ); 131 | }); 132 | } 133 | } 134 | 135 | class _VerticalBar extends StatelessWidget { 136 | const _VerticalBar({ 137 | required this.widget, 138 | required this.ratio, 139 | }); 140 | 141 | final SimpleAnimationProgressBar 142 | widget; //Widget variable is created so that the values ​​from the main class can be read. 143 | final double 144 | ratio; //Ratio variable is created so that the animation value can be read.. 145 | @override 146 | Widget build(BuildContext context) { 147 | return Align( 148 | //The Align widget is used for the direction of the AnimatedContainer. It reverses the direction of the progress bar according to the incoming direction. 149 | alignment: (widget.reverseAlignment == true) 150 | ? Alignment.topCenter 151 | : Alignment.bottomCenter, 152 | child: AnimatedContainer( 153 | //Animated Container Widget is used for animation. 154 | duration: widget.duration, 155 | curve: widget.curve, 156 | alignment: Alignment.centerLeft, 157 | height: (ratio * widget.height) / 1, 158 | width: widget.width, 159 | decoration: BoxDecoration( 160 | gradient: 161 | (widget.gradientColor != null) ? widget.gradientColor : null, 162 | color: (widget.gradientColor != null) ? null : widget.foregroundColor, 163 | borderRadius: widget.borderRadius, 164 | boxShadow: (widget.progressBarShadow != null) 165 | ? widget.progressBarShadow 166 | : (widget.boxShadow != null) 167 | ? widget.boxShadow 168 | : null, 169 | ), 170 | ), 171 | ); 172 | } 173 | } 174 | 175 | class _HorizontalBar extends StatelessWidget { 176 | const _HorizontalBar({ 177 | required this.widget, 178 | required this.ratio, 179 | }); 180 | 181 | final SimpleAnimationProgressBar 182 | widget; //Widget variable is created so that the values ​​from the main class can be read. 183 | final double 184 | ratio; //Ratio variable is created so that the animation value can be read.. 185 | @override 186 | Widget build(BuildContext context) { 187 | return Align( 188 | //The Align widget is used for the direction of the AnimatedContainer. It reverses the direction of the progress bar according to the incoming direction. 189 | alignment: (widget.reverseAlignment == true) 190 | ? Alignment.centerRight 191 | : Alignment.centerLeft, 192 | child: AnimatedContainer( 193 | //Animated Container Widget is used for animation. 194 | duration: widget.duration, 195 | curve: widget.curve, 196 | alignment: Alignment.centerLeft, 197 | height: widget.height, 198 | width: (ratio * widget.width) / 1, 199 | decoration: BoxDecoration( 200 | gradient: 201 | (widget.gradientColor != null) ? widget.gradientColor : null, 202 | color: (widget.gradientColor != null) ? null : widget.foregroundColor, 203 | borderRadius: widget.borderRadius, 204 | boxShadow: (widget.progressBarShadow != null) 205 | ? widget.progressBarShadow 206 | : (widget.boxShadow != null) 207 | ? widget.boxShadow 208 | : null, 209 | ), 210 | ), 211 | ); 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /lib/simple_animation_progress_bar_method_channel.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/foundation.dart'; 2 | import 'package:flutter/services.dart'; 3 | 4 | import 'simple_animation_progress_bar_platform_interface.dart'; 5 | 6 | /// An implementation of [SimpleAnimationProgressBarPlatform] that uses method channels. 7 | class MethodChannelSimpleAnimationProgressBar extends SimpleAnimationProgressBarPlatform { 8 | /// The method channel used to interact with the native platform. 9 | @visibleForTesting 10 | final methodChannel = const MethodChannel('simple_animation_progress_bar'); 11 | 12 | @override 13 | Future getPlatformVersion() async { 14 | final version = await methodChannel.invokeMethod('getPlatformVersion'); 15 | return version; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/simple_animation_progress_bar_platform_interface.dart: -------------------------------------------------------------------------------- 1 | import 'package:plugin_platform_interface/plugin_platform_interface.dart'; 2 | 3 | import 'simple_animation_progress_bar_method_channel.dart'; 4 | 5 | abstract class SimpleAnimationProgressBarPlatform extends PlatformInterface { 6 | /// Constructs a SimpleAnimationProgressBarPlatform. 7 | SimpleAnimationProgressBarPlatform() : super(token: _token); 8 | 9 | static final Object _token = Object(); 10 | 11 | static SimpleAnimationProgressBarPlatform _instance = MethodChannelSimpleAnimationProgressBar(); 12 | 13 | /// The default instance of [SimpleAnimationProgressBarPlatform] to use. 14 | /// 15 | /// Defaults to [MethodChannelSimpleAnimationProgressBar]. 16 | static SimpleAnimationProgressBarPlatform get instance => _instance; 17 | 18 | /// Platform-specific implementations should set this with their own 19 | /// platform-specific class that extends [SimpleAnimationProgressBarPlatform] when 20 | /// they register themselves. 21 | static set instance(SimpleAnimationProgressBarPlatform instance) { 22 | PlatformInterface.verifyToken(instance, _token); 23 | _instance = instance; 24 | } 25 | 26 | Future getPlatformVersion() { 27 | throw UnimplementedError('platformVersion() has not been implemented.'); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /lib/src/simple_animation_container.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | 3 | import 'package:flutter/cupertino.dart'; 4 | 5 | import '../simple_animation_progress_bar_platform_interface.dart'; 6 | 7 | class SimpleAnimationProgressBar extends StatefulWidget { 8 | Future getPlatformVersion() { 9 | return SimpleAnimationProgressBarPlatform.instance.getPlatformVersion(); 10 | } 11 | 12 | const SimpleAnimationProgressBar( 13 | {super.key, 14 | required this.ratio, 15 | required this.width, 16 | required this.height, 17 | required this.direction, 18 | this.borderRadius, 19 | this.border, 20 | required this.backgroundColor, 21 | required this.foregroundColor, 22 | required this.duration, 23 | required this.curve, 24 | this.reverseAlignment, 25 | this.waitDelay, 26 | this.gradientColor, 27 | this.boxShadow}); 28 | final double ratio; //Sets the progress bar value 29 | final double width; //Sets progress bar width 30 | final double height; //Sets progress bar height 31 | final Axis 32 | direction; //Allows to set the progress bar direction horizontally and vertically 33 | final BorderRadius? borderRadius; //Gives border radius for progress bar 34 | final Border? border; //Gives border radius for progress bar 35 | final Color backgroundColor; //Sets the background of the progress bar 36 | final Color foregroundColor; //Sets the foreground of the progress bar 37 | final Duration duration; //Sets the animation speed in the progress bar 38 | final Curve curve; //Sets the animation type 39 | final bool? 40 | reverseAlignment; //Reverses the bar alignment, such as left-to-right or right-to-left 41 | final Duration? waitDelay; //Sets you to delay the start of animation 42 | final Gradient? gradientColor; //Sets gardient color in progress bar 43 | final List? boxShadow; //Sets shadow in progress bar 44 | @override 45 | State createState() => 46 | _SimpleAnimationProgressBarState(); 47 | } 48 | 49 | class _SimpleAnimationProgressBarState 50 | extends State { 51 | ValueNotifier ratio = ValueNotifier( 52 | 0); //Since the ratio value can change again with the new value, it is defined as ValueNotifier. 53 | @override 54 | void initState() { 55 | super.initState(); 56 | if (ratio.value == 0) { 57 | /* 58 | Here, the animation is started by assigning a value to the ratio 59 | double variable at the beginning of the progress bar. 60 | */ 61 | (widget.waitDelay != null) 62 | ? widget.waitDelay! 63 | : Timer( 64 | const Duration(), 65 | () { 66 | /* 67 | Duration() command is used to transfer the value later and 68 | display it as animated by the animated container. 69 | */ 70 | ratio.value = widget.ratio; 71 | }, 72 | ); 73 | } 74 | } 75 | 76 | @override 77 | Widget build(BuildContext context) { 78 | if (ratio.value != widget.ratio) { 79 | /* 80 | Here, a condition is created for the values ​​that may come after the ratio value is defined. 81 | This condition sets the new incoming value equal to the ratio value. 82 | */ 83 | Future.delayed( 84 | (widget.waitDelay != null) ? widget.waitDelay! : const Duration(), 85 | () { 86 | /* 87 | Duration() command is used to transfer the value later and 88 | display it as animated by the animated container. 89 | */ 90 | ratio.value = widget.ratio; 91 | }); 92 | } 93 | return ValueListenableBuilder( 94 | //With ValueListener, the changed value is controlled and the new value is transferred to the widgets again. 95 | valueListenable: ratio, 96 | builder: (BuildContext context, double ratioValue, Widget? child) { 97 | return Container( 98 | //The container here creates the background of the progress bar, then returns the widget to be created with the direction variable. 99 | height: widget.height, 100 | width: widget.width, 101 | decoration: BoxDecoration( 102 | color: widget.backgroundColor, 103 | border: widget.border, 104 | borderRadius: widget.borderRadius, 105 | ), 106 | child: (widget.direction == Axis.horizontal) 107 | ? _HorizontalBar( 108 | widget: widget, 109 | ratio: ratio.value, 110 | ) 111 | : _VerticalBar( 112 | widget: widget, 113 | ratio: ratio.value, 114 | )); 115 | }); 116 | } 117 | } 118 | 119 | class _VerticalBar extends StatelessWidget { 120 | const _VerticalBar({ 121 | required this.widget, 122 | required this.ratio, 123 | }); 124 | 125 | final SimpleAnimationProgressBar 126 | widget; //Widget variable is created so that the values ​​from the main class can be read. 127 | final double 128 | ratio; //Ratio variable is created so that the animation value can be read.. 129 | @override 130 | Widget build(BuildContext context) { 131 | return Align( 132 | //The Align widget is used for the direction of the AnimatedContainer. It reverses the direction of the progress bar according to the incoming direction. 133 | alignment: (widget.reverseAlignment == true) 134 | ? Alignment.topCenter 135 | : Alignment.bottomCenter, 136 | child: AnimatedContainer( 137 | //Animated Container Widget is used for animation. 138 | duration: widget.duration, 139 | curve: widget.curve, 140 | alignment: Alignment.centerLeft, 141 | height: (ratio * widget.height) / 1, 142 | width: widget.width, 143 | decoration: BoxDecoration( 144 | gradient: 145 | (widget.gradientColor != null) ? widget.gradientColor : null, 146 | color: (widget.gradientColor != null) ? null : widget.foregroundColor, 147 | borderRadius: widget.borderRadius, 148 | boxShadow: (widget.boxShadow != null) ? widget.boxShadow : null, 149 | ), 150 | ), 151 | ); 152 | } 153 | } 154 | 155 | class _HorizontalBar extends StatelessWidget { 156 | const _HorizontalBar({ 157 | required this.widget, 158 | required this.ratio, 159 | }); 160 | 161 | final SimpleAnimationProgressBar 162 | widget; //Widget variable is created so that the values ​​from the main class can be read. 163 | final double 164 | ratio; //Ratio variable is created so that the animation value can be read.. 165 | @override 166 | Widget build(BuildContext context) { 167 | return Align( 168 | //The Align widget is used for the direction of the AnimatedContainer. It reverses the direction of the progress bar according to the incoming direction. 169 | alignment: (widget.reverseAlignment == true) 170 | ? Alignment.centerRight 171 | : Alignment.centerLeft, 172 | child: AnimatedContainer( 173 | //Animated Container Widget is used for animation. 174 | duration: widget.duration, 175 | curve: widget.curve, 176 | alignment: Alignment.centerLeft, 177 | height: widget.height, 178 | width: (ratio * widget.width) / 1, 179 | decoration: BoxDecoration( 180 | gradient: 181 | (widget.gradientColor != null) ? widget.gradientColor : null, 182 | color: (widget.gradientColor != null) ? null : widget.foregroundColor, 183 | borderRadius: widget.borderRadius, 184 | boxShadow: (widget.boxShadow != null) ? widget.boxShadow : null, 185 | ), 186 | ), 187 | ); 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: simple_animation_progress_bar 2 | description: This Flutter widget pack aims to show a reactive style animation progress bar. It also supports both vertical and horizontal bar. 3 | version: 1.9.2 4 | homepage: https://github.com/CanArslanDev/simple_animation_progress_bar 5 | 6 | environment: 7 | sdk: '>=2.19.6 <4.0.0' 8 | flutter: ">=2.5.0" 9 | 10 | dependencies: 11 | flutter: 12 | sdk: flutter 13 | plugin_platform_interface: ^2.0.2 14 | 15 | dev_dependencies: 16 | flutter_test: 17 | sdk: flutter 18 | flutter_lints: ^2.0.0 19 | 20 | # For information on the generic Dart part of this file, see the 21 | # following page: https://dart.dev/tools/pub/pubspec 22 | 23 | # The following section is specific to Flutter packages. 24 | # This section identifies this Flutter project as a plugin project. 25 | # The 'pluginClass' specifies the class (in Java, Kotlin, Swift, Objective-C, etc.) 26 | # which should be registered in the plugin registry. This is required for 27 | # using method channels. 28 | # The Android 'package' specifies package in which the registered class is. 29 | # This is required for using method channels on Android. 30 | # The 'ffiPlugin' specifies that native code should be built and bundled. 31 | # This is required for using `dart:ffi`. 32 | # All these are used by the tooling to maintain consistency when 33 | # adding or updating assets for this project. 34 | flutter: 35 | plugin: 36 | platforms: 37 | android: 38 | package: com.example.simple_aniatiom_progress_bar.simple_animation_progress_bar 39 | pluginClass: SimpleAnimationProgressBarPlugin 40 | ios: 41 | pluginClass: SimpleAnimationProgressBarPlugin 42 | linux: 43 | pluginClass: SimpleAnimationProgressBarPlugin 44 | macos: 45 | pluginClass: SimpleAnimationProgressBarPlugin 46 | windows: 47 | pluginClass: SimpleAnimationProgressBarPluginCApi 48 | 49 | 50 | # To add assets to your plugin package, add an assets section, like this: 51 | # assets: 52 | # - images/a_dot_burr.jpeg 53 | # - images/a_dot_ham.jpeg 54 | # 55 | # For details regarding assets in packages, see 56 | # https://flutter.dev/assets-and-images/#from-packages 57 | # 58 | # An image asset can refer to one or more resolution-specific "variants", see 59 | # https://flutter.dev/assets-and-images/#resolution-aware 60 | 61 | # To add custom fonts to your plugin package, add a fonts section here, 62 | # in this "flutter" section. Each entry in this list should have a 63 | # "family" key with the font family name, and a "fonts" key with a 64 | # list giving the asset and other descriptors for the font. For 65 | # example: 66 | # fonts: 67 | # - family: Schyler 68 | # fonts: 69 | # - asset: fonts/Schyler-Regular.ttf 70 | # - asset: fonts/Schyler-Italic.ttf 71 | # style: italic 72 | # - family: Trajan Pro 73 | # fonts: 74 | # - asset: fonts/TrajanPro.ttf 75 | # - asset: fonts/TrajanPro_Bold.ttf 76 | # weight: 700 77 | # 78 | # For details regarding fonts in packages, see 79 | # https://flutter.dev/custom-fonts/#from-packages 80 | --------------------------------------------------------------------------------