Flutter File Select and Upload to the Server with Progress Bar - Day 44

Overview

Flutter File Select and Upload - Day 44

class Afgprogrammer extends Flutter100DaysOfCode {
  video() {
    return {
      "title": "Flutter File Select and Upload",
      "description": "Let’s work with file_picker package.",
      "day": 44,
    }
  }
}

Previous Designs

Checkout my Youtube channel

Development Setup

Clone the repository and run the following commands:

flutter pub get
flutter run

Screenshots

Home Page

Links

You might also like...

πŸ—‚ File Manager App built with πŸ’™ with Flutter 🎯

 πŸ—‚ File Manager App built with πŸ’™ with Flutter 🎯

πŸ—‚ File Manager App built with πŸ’™ with Flutter 🎯

Dec 29, 2022

Concatenate file(s) to standard output.

dcat: Concatenate File(s) to Standard Output A cat command-line implementation in Dart, inspired by the Write command-line apps sample code. Synopsis

Jan 28, 2022

gceditor - a client/server application for creating a persistent data of an application

gceditor - a client/server application for creating a persistent data of an application

gceditor - a client/server application for creating a persistent data of an application

Dec 17, 2022

Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Jan 4, 2023

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

Jul 14, 2022

Attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling.

Attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling.

An attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling. Getting started Exa

Jan 3, 2023

A fully responsive BMI calculator app made using flutter and dart with beautiful minimalistic user interface design and easy to use .

A fully responsive BMI calculator app made using flutter and dart with beautiful minimalistic user interface design and easy to use .

BMI_Calculator_Flutter A fully responsive BMI calculator app made using flutter and dart with beautiful minimalistic user interface design and easy to

Oct 9, 2021

Chat App Development Front-End and Back-End using Flutter, SocketIo, and NodeJS. (Limited code)

 Chat App Development Front-End and Back-End using Flutter, SocketIo, and NodeJS. (Limited code)

Chat App Development Front-End and Back-End using Flutter, SocketIo, and NodeJS. (Limited code) ( You can buy the full code on $30 (mail me): devstack

Dec 31, 2022

To do and accomplishment app built with Flutter and Dart. Made use of Provider

Todioapp A todo and accomplishment app built with Flutter Getting Started This project is a starting point for a Flutter application. A few resources

Dec 10, 2022
Comments
  • Show animation progress with Index in Listview builder

    Show animation progress with Index in Listview builder

    Your example is working perfectly but I want to show progress in list view builder with loading controller.value for that index how can we do this.

    my working code without animation

    Map<int, double> fileDownloadProgress = {};
    
    ListView.builder(
                       itemCount: doc.getDocument.length + 1,
                       physics: const BouncingScrollPhysics(),
                       shrinkWrap: true,
                       itemBuilder: (ctx, index) {
                         progress = downloadProgress[index];
                         if (index == 0) {
                           return InkWell(
                             onTap: () => _getUserSelfie(index),
                             child: DocumentsWidget(
                               fileName:
                                   AppLocalizations.of(context)!.upload_selfie,
                               percentage: progress,
                             ),
                           );
                         } else {
                           fileProgress = fileDownloadProgress[index - 1];
                           return GestureDetector(
                             onTap: () => _showBottomFilePicker(index - 1, doc),
                             child: DocumentsWidget(
                               fileName: doc.docData[index - 1].name,
                               percentage: fileProgress,
                             ),
                           );
                         }
                       },
                     ),
    

    on upload Image method

     var percentage = byteCount / totalByteLength * 100;
     loadingController.forward();
      setState(() {
              valuePercentage = percentage / 100;
          
              fileDownloadProgress[i] = valuePercentage;
            
              debugPrint('downloadProgress => ${fileDownloadProgress[i]}');
            });
    
    opened by MustafaDev-shaikh 2
Owner
Mohammad Rahmani
Full-stack Software Developer. Currently working on Flutter 100 Days Challenge.
Mohammad Rahmani
A Flutter Ecommerce App can upload a product according to a particular category & brand

Ecommerce App This is a Flutter Project. Here, sellers can upload a product according to a particular category & brand. Customers can navigate the pro

Padmanabha Das 5 Oct 1, 2022
A Flutter plugin to select, open, choose, pick and create documents, images videos

file_picker_cross The only Flutter plugin to select, open, choose, pick and create documents, images videos or other files on Android, iOS, the deskto

null 0 Oct 30, 2021
FTFS is a Flutter package which uses a TextField Widget to search and select a value from a list

FTFS is a Flutter package which uses a TextField Widget to search and select a value from a list. It's a simple, lightweight, and fully tested package unlike other "autocomplete" or textfield search packages.

null 1 Jan 5, 2022
To keep track of dogs food every day in order to prevent overlaps and double feeding

This application is just a demo on how to use StreamBuilders with Firebase. Brief Description: All the people having this application, can see changes

Kamand Shayegan 1 May 4, 2022
Flutter Home Service Application Example - Day 35

Flutter Home Service Application Example - Day 35

Mohammad Rahmani 138 Dec 23, 2022
Flutter Wallet Application Example - Day 40

Flutter Wallet Application Example - Day 40

Mohammad Rahmani 89 Dec 23, 2022
Flutter password validation example - Day 29

Flutter Password Validation - Day 29

Mohammad Rahmani 25 Dec 17, 2022
Astronomy Picture of The Day gives you the best picture or a video nasa took on that particular date, or today.

NASA Astronomical Picture of the Day (APOD) A simple Flutter Application that shows a list of Astronomical Pictures in chronological order fetched fro

Aman Jain 2 Nov 4, 2022
Wraps flutter_svg and the Flutter SDK image providers and picks the right widget based on the file extension

Hybrid Image Wraps flutter_svg and the Flutter SDK image providers and picks the right widget based on the file extension Features As of right now it'

Dutch Coding Company 1 Jun 18, 2022
Flutter project file sturcture that can help me to create new project easily

flutter_project_arch A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

Rafat Jamader Meraz 1 Oct 9, 2022