How do I keep a variable value after UI state change? - flutter

Question

So basically, I have an ImagePicker widget that empties every time my view changes in a browser(flutter web):
But once I change the size of the browser window, the image dissappears:
So I was wondering if there's a way to keep value of the variable that contains the string image.
This is the function that gets the image:
static Future<Uint8List?> webPickImage() async {
final picker = ImagePicker();
var file = await picker.pickImage(source: ImageSource.gallery);
if (file != null) {
return await file.readAsBytes();
} else {
return null;
}
}
As you can see, this returns an Uint8List which then is emited in a BLoC/cubit state management class variable
void userWebImageChanged() async {
final newWebImage = await CommonFunction.webPickImage();
emit(
state.copyWith(
webUserImage: newWebImage,
),
);
}
State management class:
So it appears that webUserImage loses it's value when the browser window changes size:
part of 'sign_up_cubit.dart';
class SignUpState extends Equatable {
const SignUpState(
{
this.webUserImage
});
final Uint8List? webUserImage;
#override
List<Object?> get props => [
webUserImage
];
SignUpState copyWith(
{
Uint8List? webUserImage
}) {
return SignUpState(
webUserImage: webUserImage ?? this.webUserImage);
}
}
Widget(read comments):
class SignUpForm extends StatelessWidget {
const SignUpForm({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => SignUpCubit(),
child: BlocConsumer<SignUpCubit, SignUpState>(
builder: (context, state) => ResponsiveRowColumn(
rowMainAxisAlignment: MainAxisAlignment.spaceEvenly,
rowPadding: const EdgeInsets.all(10),
columnPadding: const EdgeInsets.all(10),
layout: ResponsiveWrapper.of(context).isSmallerThan(DESKTOP)
? ResponsiveRowColumnType.COLUMN
: ResponsiveRowColumnType.ROW,
children: [
ResponsiveRowColumnItem(
rowFlex: 1,
child: SizedBox(
width: 350,
child: Column(
children: [
Wrap(
runSpacing: 10,
alignment: WrapAlignment.center,
children: [
ResponsiveVisibility(
hiddenWhen: const [
Condition.smallerThan(name: TABLET)
],
//BLoC
child: BlocBuilder<SignUpCubit, SignUpState>(
buildWhen: (previous, current) =>
previous.webUserImage !=
current.webUserImage,
builder: (cubitContext, state) {
return GestureDetector(
onTap: () async {
cubitContext
.read<SignUpCubit>()
.userWebImageChanged();
},
child: Container(
margin: const EdgeInsets.all(10),
width: 135,
height: 135,
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(
Radius.circular(10)),
border: Border.all(
color: Theme.of(context)
.primaryColorDark,
width: 1,
),
color: Colors.white),
child: state.webUserImage == null
? Center(
child: Icon(
Icons.add,
color: Theme.of(context)
.primaryColorDark,
size: 50,
),
)
: ClipRRect(
child: Image.memory(
// This is the state variable that sets and holds the image:
state.webUserImage!),
borderRadius:
const BorderRadius.all(
Radius.circular(11)),
),
),
);
},
),
//...