How can put a placeholder image in flutterflow , for example if a user has not yet uploaded a profil-CodePudding

l need help someone to point me to the right direction, l am still new on flutterflow . So l have a app where a user registers name , email and password are required and they can update profile picture on the inside so what l want to achieve is put a placeholder image from if a user has not yet uploaded profile picture . how can i have a placeholder image.

CodePudding user response：

CachedNetworkImage(
            height: 100,
            width: 100,
            fit: BoxFit.cover,
            imageUrl: initialImage.thumb ?? '',
            placeholder: (context, url) => Image.asset(
              'assets/img/loading.gif',
              fit: BoxFit.cover,
              width: double.infinity,
              height: 100,
            ),
            errorWidget: (context, url, error) => Icon(Icons.error_outline),
          ),

Adding an asset image can help you achieve this, if a user has not uploaded image.

CodePudding user response：

please write this code

 GestureDetector(
          onTap: (){
            please put your logic to select image from galary or camera here..if you don't have please comment. I will give you
          },
          child: Center(
                child: ClipOval(
                  child: Container(
                    height:120,
                    width:120,
                    decoration: BoxDecoration(
                   color: Colors.red  
                   ),
                    child: DocumentImage(
                    documentName: 'Profile Picture',
                    callback: (value) {
                    },
                    documentPicture: profileImage,
                      
                    ),
                  ),
                ),
              ),
        )

and please make a new dart file and paste this code

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class DocumentImage extends StatelessWidget {
  final String documentName;
  final File ? documentPicture;
  final Function callback;

  

  DocumentImage({required this.documentName,required this.documentPicture,required this.callback});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 120,
        width: 120,
        decoration: BoxDecoration(
          color: Colors.white,
           boxShadow: [
                            BoxShadow(
                              color: Colors.blue.withOpacity(0.5),
                              spreadRadius: 3,
                              blurRadius: 10,
                              offset: Offset(
                                2,
                                2,
                              ), // changes position of shadow
                            ),
                          ],
        shape: BoxShape.circle
        ),
        child:documentPicture!= null  ? Image.file(documentPicture!,fit: BoxFit.cover,):Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.add_photo_alternate,
              color: Colors.black,
              size: 30,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(documentName.toString(),style: TextStyle(fontSize: 12),),
            )
          ],
        )
        );
  }


}