✨ (feat) Add module to upload profile banner image

Author: TheAlphamerc

lib/model/user.dart

@@ -6,6 +6,7 @@ class UserModel {
   String userName;
   String webSite;
   String profilePic;
+  String bannerImage;
   String contact;
   String bio;
   String location;
@@ -23,6 +24,7 @@ class UserModel {
     this.userId,
     this.displayName,
     this.profilePic,
+    this.bannerImage,
     this.key,
     this.contact,
     this.bio,
@@ -49,6 +51,7 @@ class UserModel {
     userId = map['userId'];
     displayName = map['displayName'];
     profilePic = map['profilePic'];
+    bannerImage = map['bannerImage'];
     key = map['key'];
     dob = map['dob'];
     bio = map['bio'];
@@ -82,8 +85,8 @@ class UserModel {
       "userId": userId,
       "email": email,
       'displayName': displayName,
-      'userId': userId,
       'profilePic': profilePic,
+      'bannerImage': bannerImage,
       'contact': contact,
       'dob': dob,
       'bio': bio,
@@ -109,6 +112,7 @@ class UserModel {
     String contact,
     bio,
     String dob,
+    String bannerImage,
     String location,
     String createdAt,
     String userName,
@@ -132,6 +136,7 @@ class UserModel {
       key: key ?? this.key,
       location: location ?? this.location,
       profilePic: profilePic ?? this.profilePic,
+      bannerImage: bannerImage ?? this.bannerImage,
       userId: userId ?? this.userId,
       userName: userName ?? this.userName,
       webSite: webSite ?? this.webSite,

lib/page/profile/EditProfilePage.dart

@@ -12,6 +12,7 @@ class EditProfilePage extends StatefulWidget {
 
 class _EditProfilePageState extends State<EditProfilePage> {
   File _image;
+  File _banner;
   TextEditingController _name;
   TextEditingController _bio;
   TextEditingController _location;
@@ -49,13 +50,7 @@ class _EditProfilePageState extends State<EditProfilePage> {
           height: 180,
           child: Stack(
             children: <Widget>[
-              Container(
-                    height: 180,
-                    padding: EdgeInsets.only(bottom: 50),
-                child: customNetworkImage(
-                    'https://pbs.twimg.com/profile_banners/457684585/1510495215/1500x500',
-                    fit: BoxFit.fill),
-              ),
+              _bannerImage(authstate),
               Align(
                 alignment: Alignment.bottomLeft,
                 child: _userImage(authstate),
@@ -107,6 +102,42 @@ class _EditProfilePageState extends State<EditProfilePage> {
     );
   }
 
+  Widget _bannerImage(AuthState authstate) {
+    return Container(
+      height: 180,
+      decoration: BoxDecoration(
+        image: authstate.userModel.bannerImage == null
+            ? null
+            : DecorationImage(
+                image:
+                    customAdvanceNetworkImage(authstate.userModel.bannerImage),
+                fit: BoxFit.cover),
+      ),
+      child: Container(
+        decoration: BoxDecoration(
+          color: Colors.black45,
+        ),
+        child: Stack(
+          children: [
+            _banner != null
+                ? Image.file(_banner,
+                    fit: BoxFit.fill, width: MediaQuery.of(context).size.width)
+                : customNetworkImage(
+                    authstate.userModel.bannerImage ??
+                        'https://pbs.twimg.com/profile_banners/457684585/1510495215/1500x500',
+                    fit: BoxFit.fill),
+            Center(
+              child: IconButton(
+                onPressed: uploadBanner,
+                icon: Icon(Icons.camera_alt, color: Colors.white),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
   Widget _entry(String title,
       {TextEditingController controller,
       int maxLine = 1,
@@ -161,6 +192,7 @@ class _EditProfilePageState extends State<EditProfilePage> {
       location: state.userModel.location,
       profilePic: state.userModel.profilePic,
       userId: state.userModel.userId,
+      bannerImage: state.userModel.bannerImage,
     );
     if (_name.text != null && _name.text.isNotEmpty) {
       model.displayName = _name.text;
@@ -174,7 +206,7 @@ class _EditProfilePageState extends State<EditProfilePage> {
     if (dob != null) {
       model.dob = dob;
     }
-    state.updateUserProfile(model, image: _image);
+    state.updateUserProfile(model, image: _image, bannerImage: _banner);
     Navigator.of(context).pop();
   }
 
@@ -186,6 +218,14 @@ class _EditProfilePageState extends State<EditProfilePage> {
     });
   }
 
+  void uploadBanner() {
+    openImagePicker(context, (file) {
+      setState(() {
+        _banner = file;
+      });
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(

lib/page/profile/profilePage.dart

@@ -97,7 +97,8 @@ class _ProfilePageState extends State<ProfilePage>
                     height: 180,
                     padding: EdgeInsets.only(top: 28),
                     child: customNetworkImage(
-                      'https://pbs.twimg.com/profile_banners/457684585/1510495215/1500x500',
+                      authstate.userModel.bannerImage ??
+                          'https://pbs.twimg.com/profile_banners/457684585/1510495215/1500x500',
                       fit: BoxFit.fill,
                     ),
                   ),

lib/state/authState.dart

@@ -23,6 +23,7 @@ class AuthState extends AppState {
   final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
   final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
   final GoogleSignIn _googleSignIn = GoogleSignIn();
+  final FirebaseStorage _firebaseStorage = FirebaseStorage.instance;
   dabase.Query _profileQuery;
   List<UserModel> _profileUserModelList;
   UserModel _userModel;
@@ -296,29 +297,35 @@ class AuthState extends AppState {
   }
 
   /// `Update user` profile
-  Future<void> updateUserProfile(UserModel userModel, {File image}) async {
+  Future<void> updateUserProfile(UserModel userModel,
+      {File image, File bannerImage}) async {
     try {
-      if (image == null) {
+      if (image == null && bannerImage == null) {
         createUser(userModel);
       } else {
-        var storageReference = FirebaseStorage.instance
-            .ref()
-            .child('user/profile/${Path.basename(image.path)}');
-        await storageReference.putFile(image);
-
-        storageReference.getDownloadURL().then((fileURL) async {
-          print(fileURL);
+        /// upload profile image if not null
+        if (image != null) {
+          /// get image storage path from server
+          userModel.profilePic = await _uploadFileToStorage(image,
+              'user/profile/${userModel.userName}/${Path.basename(image.path)}');
+          // print(fileURL);
           var name = userModel?.displayName ?? user.displayName;
           _firebaseAuth.currentUser
-              .updateProfile(displayName: name, photoURL: fileURL);
-          if (userModel != null) {
-            userModel.profilePic = fileURL;
-            createUser(userModel);
-          } else {
-            _userModel.profilePic = fileURL;
-            createUser(_userModel);
-          }
-        });
+              .updateProfile(displayName: name, photoURL: userModel.profilePic);
+        }
+
+        /// upload banner image if not null
+        if (bannerImage != null) {
+          /// get banner storage path from server
+          userModel.bannerImage = await _uploadFileToStorage(bannerImage,
+              'user/profile/${userModel.userName}/${Path.basename(bannerImage.path)}');
+        }
+
+        if (userModel != null) {
+          createUser(userModel);
+        } else {
+          createUser(_userModel);
+        }
       }
 
       logEvent('update_user');
@@ -327,6 +334,15 @@ class AuthState extends AppState {
     }
   }
 
+  Future<String> _uploadFileToStorage(File file, path) async {
+    var task = _firebaseStorage.ref().child(path);
+    var status = await task.putFile(file);
+    print(status.state);
+
+    /// get file storage path from server
+    return await task.getDownloadURL();
+  }
+
   /// `Fetch` user `detail` whoose userId is passed
   Future<UserModel> getuserDetail(String userId) async {
     UserModel user;