Skip to content

Instantly share code, notes, and snippets.

@felangel

felangel/main.dart

Last active December 30, 2023 10:52
Show Gist options
  • Save felangel/6bcd4be10c046ceb33eecfeb380135dd to your computer and use it in GitHub Desktop.
Save felangel/6bcd4be10c046ceb33eecfeb380135dd to your computer and use it in GitHub Desktop.
Download ZIP
[flutter_bloc_recipes] Navigation: Routes
Raw
main.dart
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
runApp(
BlocProvider(
builder: (context) => MyBloc(),
child: MyApp(),
),
);
}
enum MyEvent { eventA, eventB }
@immutable
abstract class MyState {}
class StateA extends MyState {}
class StateB extends MyState {}
class MyBloc extends Bloc<MyEvent, MyState> {
@override
MyState get initialState => StateA();
@override
Stream<MyState> mapEventToState(MyEvent event) async* {
switch (event) {
case MyEvent.eventA:
yield StateA();
break;
case MyEvent.eventB:
yield StateB();
break;
}
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (context) => PageA(),
'/pageB': (context) => PageB(),
},
initialRoute: '/',
);
}
}
class PageA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocListener<MyBloc, MyState>(
listener: (context, state) {
if (state is StateB) {
Navigator.of(context).pushNamed('/pageB');
}
},
child: Scaffold(
appBar: AppBar(
title: Text('Page A'),
),
body: Center(
child: RaisedButton(
child: Text('Go to PageB'),
onPressed: () {
BlocProvider.of<MyBloc>(context).add(MyEvent.eventB);
},
),
),
),
);
}
}
class PageB extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page B'),
),
body: Center(
child: RaisedButton(
child: Text('Pop'),
onPressed: () {
Navigator.of(context).pop();
},
),
),
);
}
}
@eliudio
Copy link

eliudio commented Nov 13, 2021 •
edited
Loading

This is related to what I posted here: felangel/bloc#2938

I tried the example https://booiljung.github.io/technical_articles/flutter/bloc/recipes_flutter_navigation.html

(also the example from top of this page)

I've taken that example but rather than have "pop" I've implemented the Go to Page B. This is to allow to simulate a more complex application with navigation implemented in this way. Basically you want to be able to navigate from page to page to page to page. And when I do, this doesn't work as I would hope.

The code is copied below. I've added some logging as well. From the logging you can see the same unexpected / incorrect behaviour: going to pageB works fine, going back to pageA works fine as well, but then we get this funny behaviour where all the listeners of the widgets in the history gets triggered as well... I think. Basically, the output logfile is:

I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');

The output should be:

I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageB');
I/flutter ( 6717): Navigator.of(context).pushNamed('/pageA');

The code:

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

void main() {
  runApp(
    BlocProvider(
      create: (context) => MyBloc(),
      child: MyApp(),
    ),
  );
}

enum MyEvent { eventA, eventB }

@immutable
abstract class MyState {}

class StateA extends MyState {}

class StateB extends MyState {}

class MyBloc extends Bloc<MyEvent, MyState> {
  MyBloc() : super(StateA());

  @override
  Stream<MyState> mapEventToState(MyEvent event) async* {
    switch (event) {
      case MyEvent.eventA:
        yield StateA();
        break;
      case MyEvent.eventB:
        yield StateB();
        break;
    }
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => PageA(),
        '/pageB': (context) => PageB(),
        '/pageA': (context) => PageA(),
      },
      initialRoute: '/',
    );
  }
}

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<MyBloc, MyState>(
      listener: (context, state) {
        if (state is StateB) {
          print("Navigator.of(context).pushNamed('/pageB');");
          Navigator.of(context).pushNamed('/pageB');
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('Page A'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Go to PageB'),
            onPressed: () {
              BlocProvider.of<MyBloc>(context).add(MyEvent.eventB);
            },
          ),
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<MyBloc, MyState>(
      listener: (context, state) {
        if (state is StateA) {
          print("Navigator.of(context).pushNamed('/pageA');");
          Navigator.of(context).pushNamed('/pageA');
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('Page B'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Go to PageA'),
            onPressed: () {
              BlocProvider.of<MyBloc>(context).add(MyEvent.eventA);
            },
          ),
        ),
      ),
    );
  }
}

@Ahmed-Omar-Hommir
Copy link

Same Problem
<<>>

@Iri-Hor
Copy link

Iri-Hor commented Dec 30, 2023

I updated the code to work with flutter_bloc 8.1.3

Because Flutter discourages the usage of named routes, I used the Navigator with anonymous routes.

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

void main() {
  runApp(
    BlocProvider(
      create: (context) => MyBloc(),
      child: const MyApp(),
    ),
  );
}

@immutable
sealed class MyEvent {}

final class EventA extends MyEvent {}

final class EventB extends MyEvent {}

@immutable
abstract class MyState {}

class StateA extends MyState {}

class StateB extends MyState {}

class MyBloc extends Bloc<MyEvent, MyState> {
  MyBloc() : super(StateA()) {
    on<EventA>((event, emit) => emit(StateA()));
    on<EventB>((event, emit) => emit(StateB()));
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PageA(),
    );
  }
}

class PageA extends StatelessWidget {
  const PageA({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocListener<MyBloc, MyState>(
      listener: (context, state) {
        if (state is StateB) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const PageB()),
          );
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Page A'),
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Go to PageB'),
            onPressed: () {
              BlocProvider.of<MyBloc>(context).add(EventB());
            },
          ),
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  const PageB({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page B'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Pop'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment