0

Стейт не перерисовуется при использование ToogleLoadedEvent, Flutter bloc 8, изменения наступают только после hot-reload.

home_bloc

import 'package:flutter/cupertino.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:equatable/equatable.dart';
import 'package:models/models.dart';

import '../../../services/api_service.dart';

part 'home_event.dart';
part 'home_state.dart';

class HomeBloc extends Bloc<HomeEvent, HomeState> {
  final ApiService _apiService;
  HomeBloc(this._apiService) : super(HomeLoadingState()) {
    on<LoadPresentationsEvent>((event, emit) async {
      final List<Presentation> presentations = await _apiService.getPresentations(http.Client());
      emit(HomeLoadedState(presentations));
    });
    on<ToggleLoadedEvent>((event, emit) async {
      // event.presentation.isLoaded = true;
      // final Presentation presentation = event.presentation;
      // presentation.isLoaded = true;
      HomeLoadedState currentState = state as HomeLoadedState;
      // currentState.presentations.remove(event.presentation);
      // currentState.presentations.add(event.presentation);

      List<Presentation> presentationList = currentState.props.toList() as List<Presentation>;
      int index = presentationList.indexOf(event.presentation);
      presentationList[index].isLoaded = true;
       print(presentationList[index].isLoaded);

      emit(HomeLoadedState(currentState.presentations));
    });
  }
}

part of 'home_bloc.dart';

abstract class HomeEvent extends Equatable {
  const HomeEvent();
}

class LoadPresentationsEvent extends HomeEvent {
  @override
  List<Object?> get props => [];
}

class ToggleLoadedEvent extends HomeEvent {
  final Presentation presentation;

  const ToggleLoadedEvent(this.presentation);


  @override
  List<Object?> get props => [presentation];
}
part of 'home_bloc.dart';

abstract class HomeState extends Equatable {
  const HomeState();
}
@immutable
class HomeLoadingState extends HomeState {
  @override
  List<Presentation> get props => [];
}

class HomeLoadedState extends HomeState {
  final List<Presentation> presentations;

  const HomeLoadedState(this.presentations,);
  @override
  // TODO: implement props
  List<Presentation> get props => presentations;
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiRepositoryProvider(
          providers: [RepositoryProvider(create: (context) => ApiService()),],
          child: const HomePage()),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> homeKey = GlobalKey();
    return BlocProvider(
      create: (context) => HomeBloc(RepositoryProvider.of<ApiService>(context))
        ..add(LoadPresentationsEvent()),
      child: SafeArea(
        child: Scaffold(
            key: homeKey,
            drawer: const CustomDrawer(),
            endDrawer: SizedBox(
                width: MediaQuery.of(context).size.width * 0.7,
                child: Container(
                  color: Colors.red,
                )),
            backgroundColor: const Color.fromRGBO(31, 31, 31, 1),
            body: BlocBuilder<HomeBloc, HomeState>(
              builder: (context, state) {
                if (state is HomeLoadingState) {
                  return const Center(
                    child: CupertinoActivityIndicator(
                      radius: 40,
                    ),
                  );
                }
                if (state is HomeLoadedState) {
                  return showAllPresentations(context, state.presentations);
                }
                return Container();
              },
            ),
            bottomNavigationBar: bottomNavigation(homeKey, context)),
      ),
    );
  }
}

Widget showAllPresentations(context, List<Presentation> presentations) {
  return Center(
    child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: GridView.builder(
        itemBuilder: (BuildContext ctx, index) {
          return presentation(presentations[index],context);
        },
        itemCount: 20,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: MediaQuery.of(context).size.width > 1530
                ? 5
                : MediaQuery.of(context).size.width < 1235
                    ? 3
                    : 4,
            childAspectRatio: (1.2 / 1.13),
            crossAxisSpacing: 0,
            mainAxisSpacing: 5),
      ),
    ),
  );
}
Widget presentation(Presentation presentation,BuildContext context) {
  // final HomeBloc homeBloc = BlocProvider.of<HomeBloc>(context);
  final homeWatcher = context.watch<HomeBloc>();
  final String? src = presentation.thumbnailMiniature?.replaceAll("min", "big");
  return SizedBox(
    height: 320,
    width: 300,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Stack(
          alignment: AlignmentDirectional.center,
          children: [
            // const SizedBox(
            //   height: 230,
            //   width: 290,
            // ),
            Container(
              height: 190,
              width: 250,
              decoration: BoxDecoration(
                image: presentation.thumbnailMiniature == ''
                    ? const DecorationImage(image: AssetImage(AppImages.test))
                    : DecorationImage(
                        image: NetworkImage(
                        src ??
                            "https://cdndev.prezentor.com/production/presentations/5a5",
                      )),
              ),
            ),
            presentation.isLoaded ? const SizedBox() :
            Positioned(
                top: 0,
                right: 0,
                child: FloatingActionButton(
                  heroTag: UniqueKey(),
                  backgroundColor: Colors.white30,
                  onPressed: () {
                    // ResourceLoader().loadOnePresentationResources(presentation.sourceId!);
                    homeWatcher.add(ToggleLoadedEvent(presentation));
                  },
                  mini: true,
                  child: !presentation.isLoading? const Icon(
                    Icons.save_alt,
                    color: Colors.white,
                    size: 20,
                  ) : const Text('cancel'),
                )),
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Flexible(
          child: Text(
            presentation.title!.length > 25
                ? "${presentation.title!.substring(0, 25)} ..."
                : presentation.title ?? "Title",
            textAlign: TextAlign.start,
            maxLines: 1,
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    ),
  );
}

1 ответ 1

0
emit(HomeLoadedState(currentState.presentations));

В данной строке вы отправляете тот же экземпляр списка presentations. Блок не эмитит стэйты, в которых ничего не поменялось (во избежание лишних перерисовок ui).

Т.к. стэйт вашего блока наследуется от Equatable, то сравнение старого и нового стэйтов происходит по значению props. Т.к. вы эмитите новый стэйт с тем же самым экземпляром списка presentations, то сравнение по props дает результат идентичности нового стэйта, и он не эмитится.

Выходом будет создание нового экземпляра списка:

emit(HomeLoadedState( []..addAll(currentState.presentations) ));

То же относится и к любым модификациям списка. Например, при попытке добавления нового элемента списка

emit ( presentations..add(new Presentation()) ); // не сработает

вы все равно будете иметь дело с прежним экземпляром списка (пусть и изменился его размер), и новый стэйт не заэмитится. Поэтому тут аналогично нужно создать новый экземпляр:

emit ( [...presentations, new Presentation()] ); // сработает

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.