Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Custom Progress Indicator In Flutter. Progress Indicator adalah sebuah widget pada flutter yang digunakan untuk memberitahu pengguna tentang status proses yang sedang berlangsung.

Step 1. Tambahkan Dependencies 

Tambahkan https://pub.dev/packages/liquid_progress_indicator/install pada pubspec.yml

dependencies:   flutter:     sdk: flutter   liquid_progress_indicator: ^0.4.0

Step 2. Import Dependencies 

Tambahkan Import liquid_progress_indicator pada home.dart seperti berikut 

import ‘package:liquid_progress_indicator/liquid_progress_indicator.dart’;

Step 3. Buat Class Home

Buat class dengan nama home lalu tambahkan code seperti berikut 

class HomePage extends StatefulWidget {   const HomePage({Key? key}) : super(key: key);   @override   _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> {   @override   Widget build(BuildContext context) {     return Scaffold(         appBar: AppBar(           title: Text(“Liquid Progress Indicator”),           backgroundColor: Colors.blue,         ),         body: Padding(             padding: EdgeInsets.all(30),             child: Center(               child: Column(                 crossAxisAlignment: CrossAxisAlignment.center,                 children: [                                   ],               ),             )));   } }

Step 4. Tambahkan Progress Indicator

Tambahkan Progress Indicator dengan menambahkan code seperti berikut 

Container(                       child: SizedBox(                           height: 130,                           width: 130,                           child: LiquidCircularProgressIndicator(                             value: 0.5,                             valueColor:                                 AlwaysStoppedAnimation(Colors.lightBlue),                             backgroundColor: Colors.white,                             borderColor: Colors.white,                             borderWidth: 0.0,                             direction: Axis.vertical,                             center: Text(“50%”,                                 style: TextStyle(                                     color: Colors.lightBlue,                                     fontWeight: FontWeight.bold)),                           ))),

Hasil Run : 

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂