How To Download Progress Bar Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

download progress bar indicates the status of the file being downloaded, a linear progress indicator is in sync with the download status so that user will know the timely updates.Some task we perform in app level need to be known by the user example downloading a file, audio clip or even video live streaming we use these progress indicators to let the user know the status of the current task.Linear progress bar provides you the pictorial representation of the task completed and task to be completed so that user can easily understand the progress of the task.

How To Download Progress Bar Using Flutter Android App

Download Progress Bar
Step 1 
We cannot directly remove the time stamp from Download Progress Bar  but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code .

dependencies:
  flutter:
    sdk: flutter
  percent_indicator: ^2.1.5

Step 2
After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command.

flutter pub get



Complete Code For Download Progress Bar In Flutter
main.dart
import 'package:flutter/material.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Downloading...',
      theme: ThemeData(
        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Downloading...'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              LinearPercentIndicator(
                width: 250.0,
                lineHeight: 50.0,
                percent: 0.7,
                center: Text(
                  "20.0%",
                  style: new TextStyle(fontSize: 16.0,color: Colors.white, fontStyle: FontStyle.italic),
                ),
                trailing: Icon(Icons.close),
                linearStrokeCap: LinearStrokeCap.butt,
                backgroundColor: Colors.grey,
                progressColor: Colors.green,
              ),
              Padding(padding: EdgeInsets.all(30)),
              Text("Downloading file...",style: new TextStyle(fontSize: 20),),
              Padding(padding: EdgeInsets.all(10)),
              LinearPercentIndicator(
                width: MediaQuery.of(context).size.width - 80,
                animation: true,
                lineHeight: 25.0,
                animationDuration: 9000,
                percent: 0.4,
                center: Text("70.0%"),
                linearStrokeCap: LinearStrokeCap.roundAll,
                progressColor: Colors.pink[200],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

Related Post