Image is not removing from UI

[anbarasannethaji]

when image is add from gallery its not removing even when i give null value to copyWith

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:image_picker/image_picker.dart';

final tryProvider = StateNotifierProvider<TryController, TryState>((ref) {
  return TryController();
});

class Try extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final tryState = ref.watch(tryProvider); 
    final tryController = ref.read(tryProvider.notifier);

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [

          GestureDetector(
            onTap: () {
              if (tryState.imageFile == null) {
                tryController.pickLogoImage();
              }
            },
            child: Container(
              height: 76,
              width: MediaQuery.of(context).size.width * 0.20,
              decoration: BoxDecoration(
                color: Color(0xffD9D9D9),
                borderRadius: BorderRadius.circular(4),
                image: tryState.imageFile != null
                    ? DecorationImage(
                        image: FileImage(tryState.imageFile!),
                        fit: BoxFit.cover,
                      )
                    : null,
              ),
              child: tryState.imageFile != null
                  ? Stack(
                      children: [
                        Positioned(
                          right: 0,
                          top: 0,
                          child: GestureDetector(
                            onTap: () {
                              tryController
                                  .removeLogoImage(); 
                            },
                            child: Icon(
                              Icons.close,
                              color: Colors.red,
                              size: 20,
                            ),
                          ),
                        ),
                      ],
                    )
                  : Center(
                      child: Text(
                        "Logo",
                        style: Theme.of(context).textTheme.bodyLarge!.copyWith(
                            color: Color(0xff8D8D8D),
                            fontWeight: FontWeight.normal,
                            fontSize: 12),
                      ),
                    ),
            ),
          ),

          GestureDetector(
            onTap: () {
              if (tryState.imageLogo == null) {
                tryController.pickLogo();
              }
            },
            child: Container(
              height: 76,
              width: MediaQuery.of(context).size.width * 0.20,
              decoration: BoxDecoration(
                color: Color(0xffD9D9D9),
                borderRadius: BorderRadius.circular(4),
                image: tryState.imageLogo != null
                    ? DecorationImage(
                        image: FileImage(tryState.imageLogo!),
                        fit: BoxFit.cover,
                      )
                    : null,
              ),
              child: tryState.imageLogo != null
                  ? Stack(
                      children: [
                        Positioned(
                          right: 0,
                          top: 0,
                          child: GestureDetector(
                            onTap: () {
                              tryController
                                  .removeLogo(); 
                            },
                            child: Icon(
                              Icons.close,
                              color: Colors.red,
                              size: 20,
                            ),
                          ),
                        ),
                      ],
                    )
                  : Center(
                      child: Text(
                        "Logo",
                        style: Theme.of(context).textTheme.bodyLarge!.copyWith(
                            color: Color(0xff8D8D8D),
                            fontWeight: FontWeight.normal,
                            fontSize: 12),
                      ),
                    ),
            ),
          ),
        ],
      ),
    );
  }
}

class TryState {
  final File? imageFile; 
  final File? imageLogo; 

  TryState({this.imageFile, this.imageLogo});

  TryState copyWith({File? imageFile, File? imageLogo}) {
    return TryState(
      imageFile: imageFile ?? this.imageFile,
      imageLogo: imageLogo ?? this.imageLogo,
    );
  }
}

class TryController extends StateNotifier<TryState> {
  TryController() : super(TryState());
  final ImagePicker _picker = ImagePicker();

  void pickLogoImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      state =
          state.copyWith(imageFile: File(image.path)); 
      print("Image picked for imageFile: ${image.path}");
    }
  }

  // To pick imageLogo (second image)
  void pickLogo() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      state =
          state.copyWith(imageLogo: File(image.path)); 
      print("Image picked for imageLogo: ${image.path}");
    }
  }

  void removeLogoImage() {
    state = state.copyWith(imageFile: null); 
    print("Removed imageFile");
  }

  void removeLogo() {
    state = state.copyWith(imageLogo: null);
    print("Removed imageLogo");
  }
}

image is not removing from UI

[mboyamike]

That's not an issue with riverpod. It's an issue with how copy with works. Prefer using freezed as it caters for this situation.

Here's how copyWith works:

 TryState copyWith({File? imageFile, File? imageLogo}) {
    return TryState(
      imageFile: imageFile ?? this.imageFile,
      imageLogo: imageLogo ?? this.imageLogo,
    );
  }

if you pass null to the imageFile, the new TryState object created will have the current imageFile. The check translates to this kind of pseudocode

if (imageFile != null) { 
  imageFile; 
} else { 
  currentImageFile;
}

[rrousselGit]

Indeed, that is unrelated to Riverpod. Your copyWith does not support assigning null values.