شرح كيفية نشر صورة على الfirebase بإستخدام flutter

شرح كيفية نشر صورة على الfirebase بإستخدام flutter

شرح كيفية نشر صورة على الfirebase بإستخدام flutter

استكمالا لشروحات التعامل مع firebase بواسطة flutter نقدم لكم اليوم درس جديد واستكمالا للدرس السابق حيث سوف نشرح لكم كيفية نشر الصورة والحصول على العنوان الخاص بها وارسالها الى firestore .


تعرف على كيفية إنشاء تطبيقات لنظامي التشغيل Android و iOS باستخدام Flutter ، إطار عمل برمجة الأجهزة المحمولة متعدد الأنظمة الأساسية الرائد من Google. يوضح لك احمد محمود من جي كودرس كيفية النهوض والركض مع Flutter بسرعة وفعالية في هذه الدورة.


data model to create user with firebase


كما اخبرناكم انه علينا انشا class يحمل البيانات وهذا الكلاس سوف نجعل بداخله string سوف يعبر عن رابط الصورة .


data model to create user with firebase

model.dart


class UserModel {
  String? name;
  String? email;
  String? phone;
  String? uId;
  String? imageUrl;

  UserModel({
    this.name,
    this.email,
    this.phone,
    this.uId,
    this.imageUrl,
  });

  UserModel.fromMap(Map<String, dynamic> json) {
    name = json['name'];
    email = json['email'];
    phone = json['phone'];
    uId = json['uId'];
    imageUrl = json['imageUrl'];
  }

  Map<String, dynamic> toMap() => {
    'name': name,
    'email': email,
    'phone': phone,
    'uId': uId,
    'imageUrl': imageUrl,
  };
}


how to send image to firebase and get image


الان وبداخل ملف cubit سوف يتم رفع الصورة والحصول عليها وارفاقها مع بيانات المستخدم , بالنسبة لمرحلة رفع الصورة سوف تكون عن استقبال للصورة واستخدام ref لكي نقوم حفظها في المكان المخصص للبيانات وهو storage وسوف نضعها في المسار المرفع وتكون باسم الid الخاص بالمستخدم والامر put لكي نرفع الملف في المرحلة التاليه كانت للحصول على البيانات وتم فيها استخدام الامر get بعد الانتقال الى المسار المخصص الذي تم رفع فيه الصورة سابقا في الخطوة السابقة وبعدها getDownload واخيرا تم ارفاق الصورة مع البيانات الخاصه بالمستخدم .


how to send image to firebase and get image

cubit.dart


// after register success

void _uploadImage() async {
    try {
      await FirebaseStorage.instance
        	// folder profile_instagram and save image by user id .
          .ref('profile_instagram/$uId')
        	// put image .
          .putFile(imageFile!);
      _getImageUrl();
    } on FirebaseException catch (e) {
      emit(Error(e.toString()));
    }
  }

  void _getImageUrl() async {
    // open folder and get image url .
    imageUrl = await FirebaseStorage.instance
        .ref('profile_instagram/$uId')
        .getDownloadURL();
    userCreate();
  }

  void userCreate() async {
    UserModel userModel = UserModel(
      email: email,
      name: name,
      phone: phone,
      uId: uId,
      imageUrl: imageUrl,
    );
    print('userCreate -----------------');
    await FirebaseFirestore.instance
        .collection('users_instagram')
        .doc(uId)
        .set(userModel.toMap())
        .then((value) {
      saveData(userModel);
      emit(CreateUserSuccessState());
    }).catchError((error) {
      emit(Error(error.toString()));
    });
  }
  


how to get image from gallery


في البداية عليك باستخدام xFile للتعامل مع الملفات الموجوده داخل هاتفك , في النهايه سوف تجد اننا نستخدم imagePicker وهو ما سوف يساعدنا في اختيار الصورة ونقوم بتخزين قيمة الصورة التي تم الحصول عليها بداخل الimage وهو الاسم المعبر لل xFile لكي نحصل على المسار وفي عملية الارسال مع ضغطة login نقوم باستخدام الاسم image ونحصل منه على مسار الصورة وذلك كيون عن طريق path .


how to get image from gallery

ui.dart


class RegisterPage extends StatefulWidget {
  const RegisterPage({Key? key}) : super(key: key);

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}


class _RegisterPageState extends State<RegisterPage> {
  late RegisterBloc cubit;
  ...
  XFile? image;

  @override
  void initState() {
    super.initState();
    cubit = context.read<RegisterBloc>();
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<RegisterBloc, RegisterBlocState>(
      listener: (context, state) {
        if (state is CreateUserSuccessState) {
          navigateAndFinish(context, HomePage());
        } else if (state is Error) {
          showSnackBar(state.error,context);
        } else if (state is RegisterLoadingState) {
          showSnackBar('Please wit ...',context);
        }
      },
      child: Scaffold(
        appBar: AppBar(),
        body: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              children: [
                buildProfileImage(),
                space10Vertical,
                TextFormDesign(
                  controller: usernameController, hint: 'username',
                  onChange: (String? text){
                    enableLoginButton();
                  },),
                space10Vertical,
                TextFormDesign(controller: emailController,
                  hint: 'email',
                  type: TextInputType.emailAddress,
                  onChange: (String? text){
                    enableLoginButton();
                  },),
                space10Vertical,
                TextFormDesign(controller: phoneController,
                  hint: 'phone number',
                  type: TextInputType.number,
                  onChange: (String? text){
                    enableLoginButton();
                  },),
                space10Vertical,
                TextFormDesign(
                    controller: passwordController,
                    hint: 'password',
                  onChange: (String? text){
                    enableLoginButton();
                  },),
                space10Vertical,
                TextFormDesign(controller: confirmPasswordController,
                  hint: 'confirm Password',
                  onChange: (String? text){
                    enableLoginButton();
                  },
                  action: TextInputAction.done,),
                space10Vertical,
                if (!isDisabled)
                  BtnLogin(
                    onTap: () {
                      if (image == null) {
                        showSnackBar("Select image!",context);
                        return;
                      }
                      cubit.userRegister(email: emailController.text,
                          password: passwordController.text,
                          name: usernameController.text,
                          phone: phoneController.text,
                          // send image to cubit.
                          imageFile: File(image!.path));
                    },
                    text: "Sign in",
                  ),
                space10Vertical,
                if (isDisabled)
                  Container(
                      color: Colors.red[400],
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('Please fill your data.',
                          style: TextStyle(color: Colors.red[100]),),
                      )),
                TextButton(onPressed: () {
                  navigateAndFinish(context, LoginPage());
                }, child: const Text('Login ?'))
              ],
            ),
          ),
        ),
      ),
    );
  }

  buildProfileImage() {
    return InkWell(
      onTap: () async {
        // ImagePicker object
        final ImagePicker _picker = ImagePicker();
        // pickImage go to gallery.
        image = await _picker.pickImage(source: ImageSource.gallery);
        setState(() {});
      },
      child: image == null
          ? Lottie.asset('assets/images/register.json',width: 200, height: 200)
          : Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(80),
          // show image .
          child: Image.file(File(image!.path),
            
            fit: BoxFit.fill,
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }

  void enableLoginButton() {
    if (emailController.text.isNotEmpty && passwordController.text.isNotEmpty) {
      isDisabled = false;
      setState(() {});
    } else {
      isDisabled = true;
      setState(() {});
    }
  }

}


مزيد من المقالات

تعليقات