0

Никак не получается разобраться во Flutter с архитектурой Bloc. Для примера сделал простейшее приложение: на первом экране квадрат. При нажатии кнопки на этом же экране, отрабатывает эвент на изменение цвета квадрата. На втором экране - еще одна кнопка, при нажатии которой снова отрабатывает эвент на изменение цвета. Однако если на первом экране при нажатии на кнопку цвет квадрата меняется (становится красным), то при нажатии кнопки на втором экране, цвет квадрата на первом экране не меняется (должен быть стать зелёным). Что я делаю не так?

введите сюда описание изображения

Код bloc:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

abstract class ColorEvent {}
class event_red extends ColorEvent {}
class event_green extends ColorEvent {}

class ColorBloc extends Bloc<ColorEvent, Color> {
  ColorBloc() : super(Colors.black) {
    on<event_red>((event, emit) {
      emit(Colors.red);
    });
    on<event_green>((event, emit)  {
      emit(Colors.green);
    }
    );
  }
  @override
  void onEvent(ColorEvent event) {
    super.onEvent(event);
    print(event);
  }
}

Код первого экрана:

import 'bloc/color_bloc.dart';
import 'Page2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Bloc',
      initialRoute: '/',
      routes: {
        "/": (BuildContext context) =>BlocProvider(create: (context) => ColorBloc(), child: MyHomePage(),),
        '/Page2':(BuildContext context) => BlocProvider(create: (context) => ColorBloc(), child: Page2(),),
      },
    );
  }
}
class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() =>
      _MyHomePageState(); 
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    ColorBloc _bloc = BlocProvider.of<ColorBloc>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bloc'),
        centerTitle: true,
      ),
      body: Center(
        child: BlocBuilder<ColorBloc, Color>(
          builder: (context, currentColor) => Container(height: 100, width: 100, color: currentColor,
          ),
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            heroTag: "btn3",
            backgroundColor: Colors.red,
            onPressed: () {_bloc.add(event_red());},
          ),
          TextButton.icon(
              onPressed: () {
                Navigator.pushNamed(context, '/Page2');
              },
              icon: Icon(Icons.local_bar_sharp),
              label: Text("Page2")
          ),
        ],
      ),
    );
  }
}

Код второго экрана:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'bloc/color_bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class Page2 extends StatefulWidget {
  _Page2State createState() =>
      _Page2State(); // сюда передаем текущее состояние страницы
}
class _Page2State extends State<Page2> {
  final Page2_scaffoldKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return
      Scaffold(
          key: Page2_scaffoldKey,
          appBar: AppBar(title: Text('Страница 2'),),
          body:
            FloatingActionButton(
              heroTag: "btn12",
              backgroundColor: Colors.green,
              onPressed: () {
                BlocProvider.of<ColorBloc>(context).add(event_green());
              },
            ),
      );
  }
}

1 ответ 1

0

Проблема была в том что при переключении станиц менялся контент страницы. Навигацию нужно было оформить так:

  @override
  Widget build(BuildContext context) {
    return BlocProvider<ColorBloc>(
        create: (context) => ColorBloc(),
        child:MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Bloc',
          initialRoute: '/',
          routes: {
            "/": (BuildContext context) =>MyHomePage(),
            '/Page2':(BuildContext context) =>  Page2(),
          },
        )
    );
  }

Ваш ответ

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

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