void main() {
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(),
        ),
      ),
    );
  }
}

void main() {
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.green,
            width: 100,
            height: 100,
          ),
        ),
      ),
    );
  }
}

sealed class ContainerState {}
class AuthorizedState extends ContainerState {}
class NotAuthorizedState extends ContainerState {}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  ContainerState state = NotAuthorizedState();

  // Метод изменяет текущее состояние на противоположное
  void changeState() {
    setState(() {
      if (state is AuthorizedState) {
        state = NotAuthorizedState();
      } else {
        state = AuthorizedState();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: state is AuthorizedState
              ? const Text('log out')
              : const Text('log in'),
          onPressed: () {
            changeState();
          },
        ),
        body: Center(
          child: SizedBox(
            height: 100,
            width: 100,
            child: switch (state) {
              AuthorizedState() => const ColoredBox(color: Colors.green),
              NotAuthorizedState() => const ColoredBox(color: Colors.red),
            },
          ),
        ),
      ),
    );
  }
}

1) Создаем базовый sealed класс СontainerState(). Наследуем от него два наших состояния - AuthorizedState и NotAuthorizedState. Зачем нам нужен sealed класс и два наследника? В целом, просто для красоты и удобства. Это даёт нам возможность использовать в коде красивую switch-конструкцию и уменьшает количество кода в самом виджете.

2) Преобразуем Stateless виджет в Statefull. Нам ведь нужно где-то хранить состояние авторизации пользователя.

3) Создаём переменную state в стейтфул виджете. Если она является объектом AuthorizedState(), то показываем зелёный квадрат, если NotAuthorizedState - красный. За изменение этой переменной отвечает метод changeState(), вызываемый нажатием на FloatingActionButton().

sealed class ContainerState {}
class AuthorizedState extends ContainerState {}
class NotAuthorizedState extends ContainerState {}

class StateManager extends ChangeNotifier {
  ContainerState state = NotAuthorizedState();
  void changeState() {
    if (state is AuthorizedState) {
      state = NotAuthorizedState();
    } else {
      state = AuthorizedState();
    }
    notifyListeners();
  }
}

class StateManagerProvider extends InheritedNotifier<StateManager> {
  const StateManagerProvider({
    required this.stateManager,
    super.key,
    required this.child,
  }) : super(
          child: child,
          notifier: stateManager,
        );

  final StateManager stateManager;
  final Widget child;

  static StateManager of(BuildContext context) {
    return context
        .dependOnInheritedWidgetOfExactType<StateManagerProvider>()!
        .stateManager;
  }
}

По сути только что мы создали примитивный стейт-менеджер.

В классе StateManager теперь содержится и наш стейт, и вся логика изменения этого стейта. Мы полностью вынесли всю нашу логику в этот класс. Презентационный слой теперь никак не влияет на неё.

А класс StateManagerProvider это просто инхерит, который мы пробросим в дерево. Зачем?

1) Это дарит нам возможность далее получать наш StateManager в любой точке дерева.

2) За счёт использования InheritedNotifier мы сможем в презентационном слое подписаться на изменения StateManager'а. Это значит, что при изменении стейта, слой логики будет говорить презентационному слою - "Дружище, перерисуй экран!". И презентационный слой будет перерисовывать экран, учитывая новые данные.

Чтобы лучше понять, как работает InheritedNotifier, можешь посмотреть этот ролик - https://youtu.be/n_HLJUBkc48?feature=shared Да и вообще, все ролики на этом канале нужно обязательно посмотреть

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StateManagerProvider(
        stateManager: StateManager(),
        child: const _View(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final stateManager = StateManagerProvider.of(context);
    final state = stateManager.state;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: state is AuthorizedState
            ? const Text('log out')
            : const Text('log in'),
        onPressed: () {
          stateManager.changeState();
        },
      ),
      body: Center(
        child: SizedBox(
          height: 100,
          width: 100,
          child: switch (state) {
            AuthorizedState() => const ColoredBox(color: Colors.green),
            NotAuthorizedState() => const ColoredBox(color: Colors.red),
          },
        ),
      ),
    );
  }
}

Чтобы обращаться к стейт-менеджеру, мы получаем его через context. Также мы получаем state и отрисовываем нужный виджет.

sealed class Event {}
class GoToFirstState extends Event {}
class GoToSecondState extends Event {}

sealed class State {}
class FirstState extends State {}
class SecondState extends State {}

Да, теперь в виде классов мы будем использовать не только стейты, но и эвенты. Во-первых это удобно, во-вторых - читаемо. Об остальных причинах пока не надо сильно задумываться

class AuthBloc extends Bloc<Event, State> {
  AuthBloc() : super(FirstState()) {
    on<GoToFirstState>((event, emit) {
      emit(FirstState());
    });
    on<GoToSecondState>((event, emit) {
      emit(SecondState());
    });
  }
}

В конструктор с помощью super мы передаём самый первый state, который мы хотим показать. А в теле конструктора мы определяем функции для каждого нашего эвента. Теперь, когда в презентационной логике мы будем кидать event, bloc будет вызывать функцию, которую мы приготовили для этого эвента.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (BuildContext context) => AuthBloc(),
        child: const _View(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final bloc = context.read<AuthBloc>();
    return BlocBuilder<AuthBloc, State>(
      builder: (context, state) {
        return Scaffold(
          body: Center(
            child: switch (state) {
              FirstState() => StateScreen(
                  text: '{FirstState}',
                  textColor: Colors.green,
                  buttonText: 'go to SecondState',
                  buttonColor: Colors.red,
                  onTap: () {
                    bloc.add(GoToSecondState());
                  },
                ),
              SecondState() => StateScreen(
                  text: '{SecondState}',
                  textColor: Colors.red,
                  buttonText: 'go to FirstState',
                  buttonColor: Colors.green,
                  onTap: () {
                    bloc.add(GoToFirstState());
                  },
                ),
            },
          ),
        );
      },
    );
  }
}

class StateScreen extends StatelessWidget {
  const StateScreen({
    super.key,
    required this.text,
    required this.buttonText,
    required this.onTap,
    required this.textColor,
    required this.buttonColor,
  });

  final String text;
  final String buttonText;
  final Color textColor;
  final Color buttonColor;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          text,
          style: TextStyle(color: textColor, fontSize: 40),
        ),
        const SizedBox(
          height: 50,
        ),
        ElevatedButton(
          style: ButtonStyle(
            backgroundColor: WidgetStateProperty.all(buttonColor),
          ),
          onPressed: onTap,
          child: Text(
            buttonText,
            style: const TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}