Write simple functions inside screens in Flutter using BloC

Question

I have been working on a Flutter application, using the BloC pattern. I have two functions that I don't know if I should write them in my BloC file. Here goes the code.

This is my BloC file code:

import 'dart:io';

import 'package:FlutterTWOHANDSAPPv2/Pets/model/createPetScreenProperties.dart';
import 'package:FlutterTWOHANDSAPPv2/bloc/jsonReader.dart';
import 'package:flutter/material.dart';
import 'package:generic_bloc_provider/generic_bloc_provider.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

class PetsBloc implements Bloc {
  CreatePetScreenProperties properties;

  PetsBloc() {
    properties = CreatePetScreenProperties();
  }

  @override
  void dispose() {
    // TODO: implement dispose
  }

  getImage(ImageSource source) async {
    ImagePicker picker = ImagePicker();

    PickedFile image = await picker.getImage(source: source);
    if (image != null) {
      File cropped = await ImageCropper.cropImage(
          sourcePath: image.path,
          aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
          compressQuality: 100,
          maxWidth: 1000,
          maxHeight: 1000,
          compressFormat: ImageCompressFormat.jpg,
          androidUiSettings: AndroidUiSettings(
            toolbarColor: Colors.blueAccent,
            toolbarTitle: JsonReader.getTranslationString("CREATEPET_CROP"),
            statusBarColor: Colors.deepOrange.shade900,
            backgroundColor: Colors.white,
          ));
    } else {
      // Do something
    }
  }
}

and this is my screen file

import 'dart:io';

import 'package:FlutterTWOHANDSAPPv2/Pets/bloc/petsBloc.dart';
import 'package:flutter/material.dart';
import 'package:generic_bloc_provider/generic_bloc_provider.dart';
import 'package:image_picker/image_picker.dart';

class CreateNewPetScreen extends StatelessWidget {
  PetsBloc bloc;
  bool inProcessOfSelectingImage() => bloc.properties.inProcessOfSelectingImage;
  File imageOfPet() => bloc.properties.image;

  @override
  Widget build(BuildContext context) {
    bloc = BlocProvider.of(context);

    return Container(
      padding: EdgeInsets.all(20),
      child: Stack(
        children: [
          Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Center(
                  child: GestureDetector(
                    onTap: selectPetPicture,
                    child: Container(
                      height: 150,
                      width: 150,
                      decoration: BoxDecoration(
                          image: DecorationImage(image: getImageOfPet()),
                          shape: BoxShape.circle,
                          color: Colors.black),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  void selectPetPicture() {
    bloc.getImage(ImageSource.gallery);
  }

  ImageProvider<Object> getImageOfPet() {
    return imageOfPet() != null
        ? FileImage(imageOfPet())
        : AssetImage("heregoesadefaultimageasset");
  }
}

As you can see, in my screen, I have two functions at the very bottom, which do some very basic stuff, so I feel they don't fit in my BloC file. Should I write them there? Am I breaking the architecture if I do this?

Answer 1

It's not really clear what you have going on in your PetsBloc class that actually uses anything specific to the bloc pattern. From what I see you could remove that implementation and create the PetsBloc like a normal object and the functionality wouldn't change. That being said, assuming you had a full blown Bloc class setup with a mapEventToState method...proper Bloc architecture would be only firing events from your UI that then trigger a state.

bloc.add(EventThatTriggersState);

However Cubits are great for simpler tasks and it would not be against intended architecture to have simple functions like that in a Cubit class.