หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

แถบความคืบหน้าของแอนิเมชั่น Flutter

แพ็คเกจวิดเจ็ต Flutter ที่มีสีสันนี้มีจุดมุ่งหมายเพื่อแสดงแถบความคืบหน้าของแอนิเมชั่นในสไตล์ปฏิกิริยา นอกจากนี้ยังรองรับทั้งแถบแนวตั้งและแนวนอน

Flutter สร้างการแข่งขัน

แพ็คเกจนี้ยังเป็นการส่งการประกวด Flutter Create กฎพื้นฐานของการประกวดนี้คือการวัดขนาดไฟล์ DART ทั้งหมดน้อยลงหรือเท่ากับ 5KB

หลังจากคลายซิปไฟล์ที่ถูกบีบอัดให้เรียกใช้คำสั่งต่อไปนี้เพื่ออัปเดตการอ้างอิง: 

 flutter packages get

เพื่อประเมินขนาดทั้งหมดของไฟล์ DART ทั้งหมด: 

 find . -name "*.dart" ! -name "*test*"  | xargs cat | wc -c

เพื่อประเมินเฉพาะรหัสแพ็คเกจ DART: 

 find . -name "*.dart" ! -name "*test*" ! -path "*example*"  | xargs cat | wc -c

ในการเรียกใช้แอพตัวอย่างง่ายๆที่มีขนาดทั้งหมดของรหัส DART น้อยลงหรือเท่ากับ 5KB: 

 cd example
flutter clean
flutter run

แอปรีสตาร์ทร้อนพร้อม "R" เพื่อเล่นซ้ำแอนิเมชั่น

เพื่อเรียกใช้แอพตัวอย่างเต็ม: 

 cd example
mv lib/main.dart tmp && mv lib/main.dart.bk lib/main.dart && mv tmp lib/main.dart.bk
flutter clean
flutter run

การใช้ปุ่มแอ็คชั่นลอยในตัวเพื่อเปลี่ยนค่าและดูเอฟเฟกต์

เริ่มต้น

ในการใช้แพ็คเกจนี้ให้นำเข้า 

 import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;

การใช้งานพื้นฐานสามารถทำได้เช่นรหัสด้านล่าง: 

 import 'package:flutter/widgets.dart' ;
import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;

void main () {
  runApp (
    Center (
        child : FAProgressBar (
      currentValue : 80 ,
      displayText : '%' ,
    )),
  );
}

ตัวอย่างแอพ

คุณสามารถค้นหาตัวอย่างเพิ่มเติมได้จากแอปตัวอย่าง

API

ในตารางนี้คุณสามารถค้นหาคุณลักษณะทั้งหมดที่จัดทำโดยแพ็คเกจนี้:

คุณลักษณะ ค่าเริ่มต้น คำอธิบาย
ค่าปัจจุบัน 0 ตั้งค่าปัจจุบันสำหรับแถบความคืบหน้า ค่านี้ควรอยู่ใน สถานะที่ มีการเรียก ว่า เมื่อ ใด ก็ตาม
ค่าสูงสุด 100 ค่าสูงสุดที่จะแสดงเป็นแถบความคืบหน้า
ค่าปัจจุบันอาจมากกว่าค่าสูงสุด
ขนาด 30 ความสูงของแท่งถ้าทิศทางในแกน horizontal
ความกว้างของแถบถ้าทิศทางในแกน
AnimatedDuration ระยะเวลา const (มิลลิวินาที: 300) กำหนดระยะเวลาสำหรับวงจรภาพเคลื่อนไหว
ทิศทาง axis.horizontal แถบสามารถอยู่ใน แกน horizontal หรือ แกน ทิศทางทิศทาง
แนวตั้ง VerticalDirection.down ด้วยทิศทางแนวตั้งแถบสามารถเป็นแนว ตั้ง ได้
ชายแดน 8 ตั้งรัศมีเส้นขอบบาร์
ชายแดน null ตั้งค่าสไตล์บาร์โดย BoxBorder
พื้นหลัง สี const (0x00ffffff) ตั้งค่าสีพื้นหลังของบาร์
ProgressColor สี const (0xfffa7268) ตั้งค่าแถบความคืบหน้าสี
ProgressGradient null ตั้งค่าแถบความคืบหน้าการไล่ระดับสี แทนที่ progressColor
ChangeColorValue null กำหนดค่าที่ควรเปลี่ยนสีความคืบหน้าเป็น
[0 --- สีน้ำเงิน ---- [ 70 ] -red-100]
ChangeProgressColor สี const (0xff5f4b8b) สีที่มีความก้าวหน้าสีจะถูกเปลี่ยนเป็นเมื่อ ใด ก็ตาม
DisplayText null ข้อความที่จะแสดงเป็นของ CurrentValue
ตัวอย่าง:
% -> 20%
°F -> 80°F
displayTextStyle - TextStyle ของ DisplayText

วัตถุ 

 class FAProgressBar {

  final double currentValue;
  final double maxValue;
  final double size;
  final Duration animatedDuration;
  final Axis direction;
  final VerticalDirection verticalDirection;
  final double borderRadius;
  final BoxBorder border;
  final Color backgroundColor;
  final Color progressColor;
  final Gradient progressGradient;
  final int changeColorValue;
  final Color changeProgressColor;
  final String displayText;
  final TextStyle displayTextStyle;
}

ข้อเสนอแนะ

อย่าลังเลที่จะแสดงความคิดเห็นใด ๆ เพื่อช่วยสนับสนุนแพ็คเกจนี้?

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด